站长资讯网
本文主要给大家介绍JS如何获取节点及兼容性封装，希望对需要的朋友有所帮助！ 网页内容是由标签组成的（不完全正确） 获取父节点 ：子元素.parentNode 获取子元素 获取的父节点一定是元素节点（只有元素才会有子节点） 添加子元素到页面中（父元素中）父元素.appendChild(子元素) 获取元素： 上一个节点 下一个节点 上一个元素 下一个元素 IE8不支持获取兄弟元素的操作，执行得到的undefined，而且 在IE8里面没有任何替代方案 @param ele ：需要查找的目标封装 获取第一个子节点 ：父元素.firstChild IE8无法执行元素的操作 获取最后一个子节点 ：父元素.lastChild 克隆节点 ：元素.cloneNode(参数) 如果参数是true，表示深克隆： 能够克隆这个标签以及标签里面所有的内容。 如果参数是false，表示浅克隆：只能克隆当前这个标签，不会克隆这个标签里面的内容。 没有参数，默认是false。 克隆节点只会在内存中克隆一份, 不会添加到页面上 只能手动添加 克隆huibaid也克隆过去 为了保持页面id的唯一性，需要修改克隆元素的id
节点
网页的内容是由节点组成的
元素节点 属性节点 文本节点 注释节点 文档节点
节点三要素
节点类型（nodeType） 节点名称（ nodeName） 节点值（nodeValue） 元素节点 1 标签名大写 null属性节点 2 属性名 属性值 文本节点 3 #text 文本 注释节点 8 #comment 注释内容 文档节点 9 #document null
获取父节点
<div id = "box"> <!--宫崎骏--> <div>千与千寻</div> <div id="box2">哈儿的移动城堡</div> 龙猫 <div>悬崖上的金鱼姬</div> </div>
var box2 = document.getElementById("box2");console.log(box2.parentNode);
获取所有子节点
<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要获取兄弟元素 智能通过节点获取上一个兄弟元素的封装
@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.获取第一个子节点和子元素
获取第一个节点和子元素
获取第一个子元素 ：父元素.firstElementChildvar box = document.getElementById("box");console.log(box.firstChild);console.log(box.firstElementChild);
获取第一个子元素的兼容性封装
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.获取最后一个子节点和子元素
获取最后一个子节点和子元素
获取最后一个子元素 ：父元素.lastElementChildvar 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.克隆节点
参数：
有参数时：
<div id="box"> I'm a big box <h1>我是标题</h1> </div>
var box = document.getElementById("box");var Newbox = box.cloneNode(true)console.log(New);
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>
站长资讯网
最全最丰富的资讯网站
最全最丰富的资讯网站