1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <ul id="list">
9 <li>1</li>
10 <li>2</li>
11 <li>3</li>
12 <li>4</li>
13 <li>5</li>
14 <li>6</li>
15 </ul>
16 <div id="box"><p id="p1">我是p标签</p><span>span标签</span></div>
17 </body>
18
19 <script type="text/javascript">
20 var list = document.getElementById("list");
21 var box = document.getElementById("box");
22 var p1 = document.getElementById("p1");
23 // 1、判断是不是一个node元素
24 // if(list.nodeType == 1){
25 // console.log(list);
26 // }
27 //2、返回节点的名称
28 // console.log(box.nodeName);
29 //3、获取一个元素的父节点
30 // console.log(p1.parentNode);
31 //4、 获取子节点
32 /* 在标准的浏览器下面，空格和换行会当做子节点处理
33 * 在IE9以下，会自动忽略空格和换行
34 */
35 // console.log(list.childNodes);
36 // console.log(box.childNodes);
37 //5、firstChild 第一个子节点，没有返回 null
38 // console.log(list.firstChild);
39 // console.log(box.firstChild);
40 //6、lastChild 最后一个子节点，没有返回 null
41 // console.log(list.lastChild);
42 // console.log(box.lastChild);
43 //7、previousSibling 上一个节点，没有返回 null
44 // console.log(box.previousSibling);
45 // 8、nextSibling 下一个节点，没有返回 null
46 //console.log(p1.nextSibling);
47
48 /*node方法*/
49 //1、是否含有子节点hasChildNodes
50 console.log(list.hasChildNodes());
51 console.log(box.hasChildNodes());
52 console.log(p1.hasChildNodes());
53 // 2、当前节点拼接一个新的节点（末尾）
54 // 创建一个新的节点,也可以拼接原来存在节点（原来位置会被删除）
55 //(createElement 创建一个新的元素)
56 var p2 = document.createElement("p");
57 p2.innerHTML = "我是p2";
58 box.appendChild(p2);
59 // 3、inserBefore 在某一个节点前面拼接一个其他的节点，这个方法的
60 // 返回值是新的节点
61 // box.insertBefore(p2,p1);
62 // 4、替换（把p1替换为p2标签） 返回旧的节点
63 // box.replaceChild(p2,p1);
64 // 5、removeChild() 用于移除,接受一个参数:要移除的节点, 返回被移除节点
65 // box.removeChild(p1);
66 // 6、cloneNode() 用于克隆节点,接受一个布尔值参数:true深复制,false浅复制,返回节点副本
67 // var box2 = box.cloneNode(false);
68 // console.log(box2);
69
70
71
72 </script>
73
74 </html>