JavaScript之DOM的增删改查

JavaScript的组成:

1. ECMAScript-语法规范

2. Web APIs(浏览器提供的工具)

(1).BOM (浏览器对象模型)

(2).DOM (文档对象模型)


今天就来讲讲DOM的增删改查 (废话不多说上代码)。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <title>Document</title>
 8 </head>
 9 
10 <body>
11   <div class="app">
12     <div class="title">123</div>
13   </div>
14   <script>
15     /*  
16         获取节点的方式
17         1.  document.getElementById()  //根据节点的id值来获取该节点
18         2.  document.getElementByTagName()  //根据节点的标签来获取该节点
19         3.  document.getElementByName()   //根据节点的属性值来获取该节点
20         4.  document.getElementByClassName()  //根据节点的类名来获取该节点
21         5.  document.querySelectorAll()   //根据元素标签获取节点  考虑兼容
22     */
23     var app = document.getElementsByClassName("app")[0]
24     /*
25       从一个中心节点访问其所有直系或亲属节点
26       1,访问父节点   parentNode
27       2, 访问上一个兄弟节点   previousSibling
28       3,访问下一个兄弟节点   nextSibling
29       4,访问该节点的第一个属性节点   attributes[1]
30       5, 访问最后一个子节点   lastChild 或 childNodes[childNodes.length-1]
31     */
32   //---------------------------------------------------------------------------
33     /*
34       获取属性
35         getAttribute("属性名")  //返回属性值
36         getAttributeNode("属性名")  //返回属性节点
37     */
38   //---------------------------------------------------------------------------
39     /*
40       创建 (常用)
41       document.createElement()  //创建元素节点
42       document.createTextNode()  //创建文本节点
43       document.createAttribute()  //创建属性节点
44       innerHTML
45       innerText
46       cloneNode()       //克隆
47     */
48   //---------------------------------------------------------------------------
49     /*
50       加入
51       appendChild()       //追加到尾出
52       insertBefore()      //将元素插入到某一元素的前面
53       用法: 父元素.insertBefore(要插入的新元素,新元素插入其前面的元素)
54     */
55   //---------------------------------------------------------------------------
56     /*
57       删除
58       removeChild //删除子元素
59       removeAttributeNode  //删除属性节点
60     */
61   //---------------------------------------------------------------------------
62     /*
63       修改节点
64         删除再加入
65       修改样式
66         style.***=***
67         setAttribute("style","****")
68       修改文本
69         .innerHTML
70         .innerText
71         节点操作
72         .nodeValue
73       修改属性
74         .属性名=属性值
75         .setAttribute("属性名","属性值")
76     */
77   //---------------------------------------------------------------------------
78     /*
79       其余常用的操作
80       style //修改css样式
81       setAttribute("属性名","属性值")  // 设置属性
82     */
83   </script>
84 </body>
85 
86 </html>

 

posted @ 2020-04-01 17:15  阿政想暴富  阅读(277)  评论(0编辑  收藏  举报