1.获取子节点
1.1 父节点.children
1.2 父节点.childNodes 标准属性
var oUl = document.getElementsByTagName("ul")[0];
//获取子节点
//1.1 父节点.children 非标准属性 一般用这个
var children = oUl.children;
console.log(children); //HTMLCollection(6)
//1.2 父节点.childNodes 标准属性
var childNodes = oUl.childNodes;
console.log(childNodes); //NodeList(13) 节点列表
console.log(childNodes.length);2.节点的属性
2.1 节点.nodeType
2.2 节点.nodeName:节点名称
2.3 节点.nodeValue:节点内容
//1.4 节点的基本属性
//节点.nodeType : 返回当前节点的类型 1--标签节点 2--属性节点 3--文本节点 8--注释节点
console.log(childNodes[0].nodeType); //标签--1
console.log(childNodes[1].nodeType); //注释--8
console.log(childNodes[2].nodeType); //文本--3
//nodeName:节点名称
console.log(childNodes[0].nodeName); //LI
console.log(childNodes[1].nodeName);
console.log(childNodes[2].nodeName);
//nodeValue:节点内容
childNodes[2].nodeValue = "我是一个我那边节点”3.获取父节点
3.1 获取直接父节点 子节点.parentNode
3.2 获取定位父节点 子节点.offsetParent ,如果没有定位父节点获取到body
var oLi = document.getElementsByTagName("li")[0];
//1.获取直接父节点 子节点.parentNode
console.log(oLi.parentNode);
//2.获取定位父节点 子节点.offsetParent ,如果没有定位父节点获取到body
console.log(oLi.offsetParent);4.获取兄弟节点
4.1 获取首节点 父节点.firstChild 父节点.firstElementChild
var oUl = document.getElementsByTagName("ul")[0];
//1.获取首节点 父节点.firstChild ,ie可以正常获取到第一个标签，标准浏览器会获取到文本
var first = oUl.firstChild;
//父节点.firstElementChild ： 解决标准浏览器获取到文本的问题， ie不兼容
var first = oUl.firstElementChild;4.2 获取尾节点 父元素.lastChild 父元素.lastElementChild
var last = oUl.lastElementChild || oUl.lastChild
last.style.background = "yellow";4.3 获取下一个兄弟 参考节点.nextSibling 参考节点.nextElementSibling
var list = document.getElementById("list");
var next = list.nextElementSibling || list.nextSibling;
next.style.background = "pink";4.4 获取上一个兄弟 参考节点.previousSibling 参考节点.previousElementSibling;
var previous = list.previousElementSibling||list.previousSibling ;
previous.style.background = "blue";5.创建节点 添加节点
1.创建节点： document.createElement
var li = document.createElement('标签名'); //创建标签节点
var text = document.createTextNode('文本内容');// 创建文本节点；2. 在父元素末尾追加一个子节点 父节点.appendChild(子节点)
//父节点.appendChild(子节点)
// 注意：要添加的子节点必须是一个标签 ,如果添加的是一个已经存 在的标签,不会复制一份再添加,而是发生位置移动
var oLi = document.createElement("li");
oLi.innerHTML = "我是添加标签"
oUl.appendChild(oLi);6. 在某个元素之前添加节点
6.1 父节点.insertBefore(newChild[新节点],refChild[参考节点])
var oUl = document.getElementsByTagName("ul")[0];
var oLi = document.getElementById("li");
//1、在某个元素之前添加
//1.在数字2之前添加一个a 父节点.insertBefore(newChild[新节点],refChild[参考节点])
var cLi = document.createElement("li");
cLi.innerHTML = "a";
oUl.insertBefore(cLi,oLi);7. 删除节点
7.1 节点.remove() : 删除节点本身
7.2 父节点.removeChild(子节点)
//2.删除节点
var oDiv = document.getElementsByTagName("div")[0];
var oP = document.getElementsByTagName("p");
//2.1 节点.remove() : 删除节点本身
//oP[2].remove();
//2.2 父节点.removeChild(子节点)
oDiv.removeChild(oP[2]);8.替换节点
8.1 父节点.replaceChild(newChild,refChild)
var oL = document.createElement("p");
oL.innerHTML = "今天周五需要考试";
oDiv.replaceChild(oL,oP[1]);9.复制节点
9.1 被复制的节点.cloneNode(boolean)
// 被复制的节点.cloneNode(boolean) 默认是false
// false:复制标签，没有内容
// true:复制标签和内容
var copyP = oP[1].cloneNode(true);
oDiv.appendChild(copyP);10 查找节点
10.1 document.querySelect(css选择器) ： 获取到当前选择器选中标签的第一个元素
10.2 document.querySelectAll(css选择器) ： 获取到当前选择器选中的所有标签
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul id="list" class="list">
<li>a</li>
<li>b</li>
<li><span>c</span></li>
</ul>
console.log(document.querySelector("li")); // <li>1</li>
console.log(document.querySelectorAll("li")); // NodeList(6) [li, li, li, li, li, li]
//获取第二个ul里面的li
console.log(document.querySelectorAll("#list li")); //NodeList(3) [li, li, li]
console.log(document.querySelectorAll(".list li")); //NodeList(3) [li, li, li]
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
