DOM基本操作（获取元素 节点的创建和添加 节点的替换和删除）

获取元素

document.getElementById通过id名字获取节点

<div id="box"><ul><li>1</li><li>2</li><li>3</li></ul></div>

var oBox = document.getElementById("box");console.log(oBox);

document.getElementsByClassName通过class名字获取节点 获取的是一个数组

<div class="box"><ul><li>1</li><li>2</li><li>3</li></ul></div>

var oBox = document.getElementsByClassName("box");console.log(oBox);

在HTML与CSS里.class类名是可以重复使用的，在页面上可能出现多个重复的.class类名，他是获取到多个把获取到多个放在数组里

返回结果是一个数组我们需要的是里面的值，那么如何拿到呢？？？

var oBox = document.getElementsByClassName("box")[0]//通过下标来换取索引0的值也可以获取别的索引值console.log(oBox);

document.getElementsByTagName通过标签名字获取节点 获取的是一个数组

<div class="box"><ul><li>1</li><li>2</li><li>3</li></ul></div><div class="box"></div><div></div>

var aBox = document.getElementsByTagName("div");console.log(aBox)

那么如何获取数组里面的值呢？？？

var aBox = document.getElementsByTagName("div")[2];//通过下标来换取索引2的值console.log(aBox);

document.querySelectorAll通过复合（层级）选择器获取节点 获取的是一个数组

<div class="box"><ul><li>1</li><li>2</li><li>3</li></ul></div>

var aLi = document.querySelectorAll(".box ul li");console.log(oBox);

那么如何获取数组里面的值呢？？？

var aLi = document.querySelectorAll(".box ul li")[1];console.log(aLi );

document.querySelector通过复合（层级）选择器获取符合条件的第一个节点

<div class="box"><ul><li>1</li><li>2</li><li>3</li></ul></div>

var oLi = document.querySelector(".box ul li");console.log(oLi);

document.getElementsByName通过name属性获取节点 获取的是一个数组

<input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女

var aInput = document.getElementsByName("sex");console.log(aInput);

获取特殊元素的方式

document.head获取head标签document.body获取body标签document.documentElement获取html标签

console.log(document.head);console.log(document.body);console.log(document.documentElement);

document只对head，body，documentElement提供了开发接口其余都没有提供

节点的创建和添加（创建完一定要添加）

节点的创建

document.createElement创建元素节点

var oDiv = document.createElement("div");console.log(oDiv);

如何把这个属性节点添加到DOM树中

<div id="box"><span>我是haven</span></div>

var oBox = document.getElementById("box");var oDiv = document.createElement("div");oBox.appendChild(oDiv);

document.createTextNode创建文本节点

var oText = document.createTextNode("heaven")console.log(oText);

如何把这个文本节点添加到DOM树中

<div id="box"><span>我是haven</span></div>

var oBox = document.getElementById("box");var oText = document.createTextNode("heaven");oBox.appendChild(oText);

document.createComment创建注释节点

var oComment = document.createComment("我是注释节点");console.log(oComment);

如何把这个注释节点添加到DOM树中

<div id="box"><span>我是haven</span></div>

var obox = document.getElementById("box");var oComment = document.createComment("我是注释节点");obox.appendChild(oComment);

document.createDocumentFragment创建文档片段节点

var fragment = document.createDocumentFragment();console.log(fragment);

节点的添加、剪切操作

parentNode.appendChild(子节点)把子节点插入到父节点的最后面

<div id="box"><span>我是haven</span></div>

var oBox = document.getElementById("box");var oDiv = document.createElement("div");oBox.appendChild(oDiv);//把oDiv插入到oBox的最后面是以字符串形式添加的

parentNode.insertBefore(A,B)把节点A添加到节点B之前

<div id="box"><h2>我是标题</h2><span>我是haven</span></div>

var oBox = document.getElementById("box");var oSpan = document.getElementsByTagName("span")[0];var oDiv = document.createElement("div");oBox.insertBefore(oDiv,oSpan);

如何把现有标签添加到，另一个现有标签之前

<div id="box"><h2>我是标题2</h2><h3>我是标题3</h3><span>我是haven</span></div>

var oBox = document.getElementById("box");var oSpan = document.getElementsByTagName("span")[0];var oH3 = document.getElementsByTagName("h3") [0];oBox.insertBefore(oSpan,oH3);

那么用appendChild方法来可以实现吗？？

<div id="box"><h2>我是标题2</h2><h3>我是标题3</h3><span>我是haven</span></div>

var oBox = document.getElementById("box");var oSpan = document.getElementsByTagName("span")[0];var oH3 = document.getElementsByTagName("h3") [0];oBox.appendChild(oH3);

结论：无论是appendChild方法还是insertBefore方法都可以对节点的 添加、剪切操作，都可以操作一次不能操作多次

节点的替换和删除

节点的替换 、 剪切操作（只能一换一操作不能一换多个节点操作）

节点的替换parentNode.replaceChild(A,B)用节点A替换节点B

<div id="box"><h2>我是标题2</h2><span>我是heaven</span><h3>我是标题3</h3></div>

var oBox = document.getElementById("box");var oH3 = document.getElementsByTagName("h3")[0]var oDiv = document.createElement("div");oBox.replaceChild(oDiv,oH3);

剪切操作parentNode.replaceChild(A,B)用节点A替换节点B

<div id="box"><h2>我是标题2</h2><span>我是heaven</span><h3>我是标题3</h3></div>

var oSpan = document.getElementsByTagName("span")[0];var oBox = document.getElementById("box");var oH3 = document.getElementsByTagName("h3")[0]oBox.replaceChild(oSpan,oH3);

节点的删除 、删除子节点parentNode.removeChild(子节点)

<div id="box"><h2>我是标题2</h2><span>我是heaven</span><h3>我是标题3</h3></div>

var oBox = document.getElementById("box");var oH3 = document.getElementsByTagName("h3");oBox.removeChild(oH3[0]);

动态获取与静态获取

get系列获取元素的方式是动态获取

动态获取指的是：在获取节点之后还可以检测出符合条件的节点、并放置到集合中

<div id="box"><h3>1</h3><h3>2</h3><h3>3</h3></div>

var oBox = document.getElementById("box");var oH3 = document.getElementsByTagName("h3");var h3 = document.createElement("h3");oBox.appendChild(h3);console.log(oH3);

动态获取的方式是能再次感知到用js的方法添加新的标签的

query系列获取元素的方式是静态态获取

静态获取指的是：在获取节点之后无法检测出符合条件的节点、不能放置到集合中

<div id="box"><h3>1</h3><h3>2</h3><h3>3</h3></div>

var oBox = document.getElementById("box");var oH3 = document.querySelectorAll("h3");var h3 = document.createElement("h3");oBox.appendChild(h3);console.log(oH3);

静态获取的方式是不能能再次感知到用js的方法添加新的标签的

如何在创建空节点的时候添加内容

元素节点.innerText可以设置节点的文本内容、也可以读取节点的内容、不可以解析标签

<div id="box"><h3>1</h3><h3>2</h3><h3>3</h3></div>

var oBox = document.getElementById("box");var oH3 = document.createElement("h3");oBox.appendChild(oH3);oH3.innerText = "我是h3节点";//创建h3标签添加文本内容

那么如何读取元素节点的内容呢？？

var oBox = document.getElementById("box");var oH3 = document.querySelectorAll("h3");oH3.innerText = "我是新增节点H3";console.log(oH3[2].innerText);//读取节点的文本内容

修改并赋值innerText

var oBox = document.getElementById("box");var oH3 = document.querySelectorAll("h3");oH3[0].innerText = "我是修改并赋值的节点";

元素节点.innerHTML、可以设置节点的文本内容、也可以读取节点的内容、可以解析标签

怎么样innerHTML方法解析字符串中的标签

var oBox = document.getElementById("box");var oH3 = document.querySelectorAll("h3");oH3[0].innerHTML = "<a>我是修改后的文本节点的内容</a>"

打印的结果是用innerHTML替换的结果

var oBox = document.getElementById("box");var oH3 = document.querySelectorAll("h3");oH3[0].innerHTML = "<a>我是修改后的文本节点的内容</a>";console.log(oH3[0].innerHTML);

元素节点的常用方法

<div id="box"><h3 class="no">测试标题</h3></div>

如何拿到h3标签的属性集合

var oBox = document.getElementById("box");console.log(oBox.children[0].attributes);

元素节点.setAttribute(属性节点名,属性节点值)、设置指定的属性节点

<div id="box"><h3 class="no">测试标题</h3></div>

var oBox = document.getElementById("box");oBox.children[0].setAttribute("id", "title")

元素节点.getAttribute(属性节点名)、获取指定属性节点名称的值

var oBox = document.getElementById("box");console.log(oBox.children[0].getAttribute("class"));

元素节点.removeAttribute(属性节点名)、删除指定属性节点

<div id="box"><h3 class="no">测试标题</h3></div>

var oBox = document.getElementById("box");oBox.children[0].removeAttribute("class");

元素节点.hasChildNodes、判断元素节点有没有子节点

var oBox = document.getElementById("box");console.log(oBox.children[0].hasChildNodes());

如果有则返回返回结果是true如果没有则返回结果是是false