获取元素
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