节点
网页内容是由标签组成的（不完全正确） 网页的内容是由节点组成的 元素节点 属性节点 文本节点 注释节点 文档节点 节点三要素
节点类型 ：nodeType节点名称 ： nodeName节点值 ：nodeValue节点类型（nodeType）节点名称（ nodeName）节点值（nodeValue）元素节点1标签名大写null属性节点2属性名属性值文本节点3#text文本注释节点8#comment注释内容文档节点9#documentnull
获取父节点
获取父节点 ：子元素.parentNode
(资料图片仅供参考)
获取子元素
千与千寻哈儿的移动城堡龙猫悬崖上的金鱼姬
var box2 = document.getElementById("box2");console.log(box2.parentNode);获取的父节点一定是元素节点（只有元素才会有子节点）
添加子元素到页面中（父元素中）父元素.appendChild(子元素)
获取所有子节点
<script type="text/javascript">var box = document.getElementById("box")console.log(box.chilNodes);</script>千与千寻哈尔的移动城堡
1.兄弟元素和兄弟节点
获取兄弟节点
千与千寻哈儿的移动城堡龙猫悬崖上的金鱼姬
获取元素：
var box = document.getElementById("box");var box2 = document.getElementById("box2");上一个节点
console.log(box2.previousSibling); // 文本节点
下一个节点
console.log(box2.nextSibling); // 文本节点
获取兄弟元素
上一个元素
console.log(box2.previousElementSibling);
下一个元素
console.log(box2.nextElementSibling);
IE8不支持获取兄弟元素的操作，执行得到的undefined，而且 在IE8里面没有任何替代方案 IE8要获取兄弟元素 智能通过节点
获取上一个兄弟元素的封装
@param ele ：需要查找的目标封装 @return node：返回的是一个元素节点
function getPreviousElement(ele) { // 能力检测 if(ele.previousElementSibling) { // 谷歌火狐 return ele.previousElementSibling; } else { // IE8 // 获取上一个节点 : null 元素 文本 注释 var node = ele.previousSibling; // 循环次数不确定 // 1. node必须存在, 不是null, 2. node不是元素节点 while(node != null && node.nodeType != 1) { node = node.previousSibling } // node == null 或者 node.nodeType == 1 return node; } } console.log(getPreviousElement(li2));2.获取第一个子节点和子元素
获取第一个节点和子元素
获取第一个子节点 ：父元素.firstChild获取第一个子元素 ：父元素.firstElementChild
var box = document.getElementById("box");console.log(box.firstChild);console.log(box.firstElementChild);IE8无法执行元素的操作
获取第一个子元素的兼容性封装
function getFirstElementChild(ele) { if (ele.firstElementChild != undefined) { return ele.firstElementChild; } else { var nodeFirst = ele.firstChild; while (nodeFirst && nodeFirst.nodeType == 1) { nodeFirst = nodeFirst.nextSibling; } return nodeFirst; } } console.log(ul.firstElementChild);3.获取最后一个子节点和子元素
获取最后一个子节点和子元素
获取最后一个子节点 ：父元素.lastChild获取最后一个子元素 ：父元素.lastElementChild
var box = document.getElementById("box");console.log(box.lastChild);console.log(box.lastElementChild);获取最后一个子元素的兼容性封装
function firstElement(ele) { if (ele.firstElementChild) {//谷歌和火狐 return ele.firstElementChild; } else {//IE8 var node = ele.firstChild; while (node != null && node.nodeType != 1) { node = node.nextSibling; } return node; } } console.log(firstElement(ul))4.克隆节点
克隆节点 ：元素.cloneNode(参数)参数： 有参数时：
如果参数是true，表示深克隆： 能够克隆这个标签以及标签里面所有的内容。
如果参数是false，表示浅克隆：只能克隆当前这个标签，不会克隆这个标签里面的内容。
没有参数，默认是false。
I"m a big box我是标题
var box = document.getElementById("box");var Newbox = box.cloneNode(true)console.log(New);克隆节点只会在内存中克隆一份, 不会添加到页面上 只能手动添加
克隆huibaid也克隆过去
为了保持页面id的唯一性，需要修改克隆元素的id
Newbox.id = "Newbox"
淘宝案例，隐藏二维码
关闭二维码 <script type="text/javascript">var x = document.getElementById("x")x.onclick = function(){this.parentNode.style.display = "none";}</script>x
相关推荐：【JavaScript视频教程】
以上就是解析JS如何获取节点并进行兼容性封装的详细内容，更多请关注php中文网其它相关文章！
