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>