广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

本文主要给大家介绍JS如何获取节点及兼容性封装，希望对需要的朋友有所帮助！

网页内容是由标签组成的（不完全正确） 网页的内容是由节点组成的 元素节点 属性节点 文本节点 注释节点 文档节点 节点三要素

节点类型（nodeType）节点名称（ nodeName）节点值（nodeValue）元素节点1标签名大写null属性节点2属性名属性值文本节点3#text文本注释节点8#comment注释内容文档节点9#documentnull

获取父节点 ：子元素.parentNode

获取子元素

<div id = "box"><!--宫崎骏--><div>千与千寻</div><div id="box2">哈儿的移动城堡</div>龙猫<div>悬崖上的金鱼姬</div></div>

var box2 = document.getElementById("box2");console.log(box2.parentNode);

获取的父节点一定是元素节点（只有元素才会有子节点）

添加子元素到页面中（父元素中）父元素.appendChild(子元素)

<div id="box" style="width: 100px; height: 100px;"><div id="box1" style="background-color: lightblue;">千与千寻</div><div id="box2">哈尔的移动城堡</div></div><script type="text/javascript">var box =  document.getElementById("box")console.log(box.chilNodes);</script>

<div id = "box"><!--宫崎骏--><div>千与千寻</div><div id="box2">哈儿的移动城堡</div>龙猫<div>悬崖上的金鱼姬</div></div>

获取元素：

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：返回的是一个元素节点

<div id = "box"><!--宫崎骏--><div>千与千寻</div><div id="box2">哈儿的移动城堡</div>龙猫<div>悬崖上的金鱼姬</div></div>0

获取第一个子节点 ：父元素.firstChild 获取第一个子元素 ：父元素.firstElementChild

<div id = "box"><!--宫崎骏--><div>千与千寻</div><div id="box2">哈儿的移动城堡</div>龙猫<div>悬崖上的金鱼姬</div></div>1

IE8无法执行元素的操作

<div id = "box"><!--宫崎骏--><div>千与千寻</div><div id="box2">哈儿的移动城堡</div>龙猫<div>悬崖上的金鱼姬</div></div>2

获取最后一个子节点 ：父元素.lastChild 获取最后一个子元素 ：父元素.lastElementChild

<div id = "box"><!--宫崎骏--><div>千与千寻</div><div id="box2">哈儿的移动城堡</div>龙猫<div>悬崖上的金鱼姬</div></div>3

<div id = "box"><!--宫崎骏--><div>千与千寻</div><div id="box2">哈儿的移动城堡</div>龙猫<div>悬崖上的金鱼姬</div></div>4

克隆节点 ：元素.cloneNode(参数) 参数： 有参数时：

如果参数是true，表示深克隆： 能够克隆这个标签以及标签里面所有的内容。

如果参数是false，表示浅克隆：只能克隆当前这个标签，不会克隆这个标签里面的内容。

没有参数，默认是false。

<div id = "box"><!--宫崎骏--><div>千与千寻</div><div id="box2">哈儿的移动城堡</div>龙猫<div>悬崖上的金鱼姬</div></div>5

<div id = "box"><!--宫崎骏--><div>千与千寻</div><div id="box2">哈儿的移动城堡</div>龙猫<div>悬崖上的金鱼姬</div></div>6

克隆节点只会在内存中克隆一份, 不会添加到页面上 只能手动添加

克隆huibaid也克隆过去

为了保持页面id的唯一性，需要修改克隆元素的id

<div id = "box"><!--宫崎骏--><div>千与千寻</div><div id="box2">哈儿的移动城堡</div>龙猫<div>悬崖上的金鱼姬</div></div>7

<div id = "box"><!--宫崎骏--><div>千与千寻</div><div id="box2">哈儿的移动城堡</div>龙猫<div>悬崖上的金鱼姬</div></div>8

相关推荐：【JavaScript视频教程】

以上就是解析JS如何获取节点并进行兼容性封装的详细内容，更多请关注9543建站博客其它相关文章！