1 DOCTYPE html>
  2 html>
  3     head>
  4         title>Page Titletitle>
  5     head>
  6 body>
  7     div class="box1">
  8         h2 id="title1">商品栏h2>
  9         ul id="goods">li class="first">商品1li>li>商品2li>li>商品3li>li class="last">商品4li>ul>
 10     div>
 11     script>
 12         /* 获取已存在节点 */
 13         var h2Node1_exist = document.getElementById("title1");
 14         var liNode1_exist = document.getElementsByClassName("first")[0];
 15         var ulNode1_exist = document.getElementById("goods");
 16         var liNode2_exist = document.getElementsByTagName("li")[2];
 17 
 18         /* 创建新节点 */
 19         var liNode1 = document.createElement("li");
 20         var txtNode1 = document.createTextNode("halo");
 21         liNode1.appendChild(txtNode1);
 22 
 23     
 24         /* 获取节点
 25         console.log(document.getElementById("goods"));
 26         console.log(document.getElementsByTagName("li"));
 27         console.log(document.getElementsByClassName("last"));*/
 28 
 29 
 30         /* 创建节点
 31         // 1创建元素节点
 32         console.log(document.createElement("span"));
 33 
 34         // 2创建属性节点并赋值
 35         var attrNode = document.createAttribute("name");
 36         attrNode.value = "shaohsiung";
 37         console.log(attrNode);
 38         // 将属性节点设置到标签上
 39         h2Node1_exist.setAttributeNode(attrNode);
 40         console.log(h2Node1_exist);
 41 
 42         // 3创建文本节点
 43         var txtNode = document.createTextNode("halo world");
 44         // 将文本节点设置到标签体内
 45         h2Node1_exist.appendChild(txtNode);*/
 46 
 47 
 48         /* 添加节点
 49         // 添加子节点
 50         h2Node1_exist.appendChild(liNode1);
 51 
 52         // 某节点前插入节点
 53         // 说明：document.insertBefore的使用方式是错误的，无法在根节点前插入元素
 54         ulNode1_exist.insertBefore(liNode1, liNode1_exist); */
 55 
 56 
 57         /* 复制节点 
 58         // 不包含子节点
 59         var result1 = ulNode1_exist.cloneNode(false);
 60         console.log(result1);
 61 
 62         // 包含子节点
 63         var result1 = ulNode1_exist.cloneNode(true);
 64         console.log(result1);*/
 65 
 66 
 67         /* 删除节点
 68         // 删除子节点
 69         ulNode1_exist.removeChild(liNode1_exist);
 70         // 删除标签的属性
 71         ulNode1_exist.removeAttribute("id");
 72         // 删除当前节点
 73         ulNode1_exist.remove(); */
 74 
 75 
 76         /* 获取节点类型
 77         
 78         常见节点类型小结：
 79             元素 1
 80             属性 2
 81             文本 3
 82             注释 8
 83             文档, 即document对象 9 
 84          */
 85         //console.log(document.nodeType);
 86 
 87 
 88         /* 操作属性节点
 89         // 获取元素节点某个属性值
 90         console.log(h2Node1_exist.getAttribute("id"));
 91         // 为元素节点设置属性值
 92         h2Node1_exist.setAttribute("name", "shaohsiung");
 93         // 删除元素节点属性
 94         h2Node1_exist.removeAttribute("name"); */
 95         
 96 
 97         /* 查找节点
 98         // 获取ul标签所有子节点（包括换行）
 99         // 说明：要特别注意这里的换行
100         console.log(ulNode1_exist.childNodes);
101         
102         // 获取ul标签第一个子节点
103         console.log(ulNode1_exist.firstChild);
104 
105         // 获取ul标签最后一个子节点
106         console.log(ulNode1_exist.lastChild);
107         // 可递归调用， 这里获取到文本节点
108         console.log(ulNode1_exist.lastChild.lastChild); */
109 
110 
111         /* 获取相邻的节点
112         // 上一个
113         console.log(liNode2_exist.previousElementSibling);
114         // 下一个
115         console.log(liNode2_exist.nextSibling); */
116 
117         
118         // 获取父节点
119         // 说明：包括父节点的所有子节点
120         console.log(liNode2_exist.parentNode);
121 
122         // 替换当前节点的子节点
123         ulNode1_exist.replaceChild(liNode1, liNode2_exist);
124     script>
125 body>
126 html>