JS是怎么获取节点并进行兼容性封装的呢？
导读：关于“JS是怎么获取节点并进行兼容性封装的呢？”的知识点有一些人不是很理解，对此小编给大家总结了相关内容，文中的内容简单清晰，易于学习与理解，具有一定的参考学习价值，希望能对大家有所帮助，接下来就跟随小编一起学习一下“JS是怎么获取节点并进...
关于“JS是怎么获取节点并进行兼容性封装的呢？”的知识点有一些人不是很理解，对此小编给大家总结了相关内容，文中的内容简单清晰，易于学习与理解，具有一定的参考学习价值，希望能对大家有所帮助，接下来就跟随小编一起学习一下“JS是怎么获取节点并进行兼容性封装的呢？”吧。
节点
网页内容是由标签组成的（不完全正确）
网页的内容是由节点组成的
元素节点 属性节点 文本节点 注释节点 文档节点
节点三要素
- 节点类型 ：nodeType
- 节点名称 ： nodeName
- 节点值 ：nodeValue
节点类型（nodeType） 节点名称（ nodeName） 节点值（nodeValue） 元素节点 1 标签名大写 null属性节点 2 属性名 属性值 文本节点 3 #text 文本 注释节点 8 #comment 注释内容 文档节点 9 #document null
获取父节点
获取父节点 ：子元素.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>
1.兄弟元素和兄弟节点
获取兄弟节点
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：返回的是一个元素节点
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。
div id="box">
I'm a big box
h1>
我是标题/h1>
/div>
var box = document.getElementById("box");
var Newbox = box.cloneNode(true)console.log(New);
克隆节点只会在内存中克隆一份, 不会添加到页面上 只能手动添加
克隆huibaid也克隆过去
为了保持页面id的唯一性，需要修改克隆元素的id
Newbox.id = "Newbox"
淘宝案例，隐藏二维码
!DOCTYPE html>
html>
head>
meta charset="utf-8" />
title>
关闭二维码/title>
style type="text/css">
#box{
width: 94px;
height: 92px;
margin: 30px auto;
position: relative;
}
#x{
width: 14px;
height: 14px;
line-height: 14px;
border: 1px solid #D9D9D9;
color: #D6D6D6;
text-align: center;
position: absolute;
top: 0;
left: -15px;
}
#img{
width: 76px;
height: 90px;
background-image: url(img/erweima.png);
}
/style>
/head>
body>
div id="box">
div id="x">
x/div>
div id="img">
/div>
/div>
script type="text/javascript">
var x = document.getElementById("x")
x.onclick = function(){
this.parentNode.style.display = 'none';
}
/script>
/body>
/html>
关于“JS是怎么获取节点并进行兼容性封装的呢？”的内容就介绍到这，感谢各位的阅读，相信大家对JS是怎么获取节点并进行兼容性封装的呢？已经有了进一步的了解。大家如果还想学习更多知识，欢迎关注网络，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： JS是怎么获取节点并进行兼容性封装的呢？
本文地址： https://pptw.com/jishu/653448.html