• 技术文章 >web前端 >js教程

    解析JS如何获取节点并进行兼容性封装

    藏色散人藏色散人2022-08-06 17:18:30转载171

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

    节点

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

    			节点类型(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(参数)
    参数:
    有参数时:

    没有参数,默认是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);

    为了保持页面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>

    相关推荐:【JavaScript视频教程

    以上就是解析JS如何获取节点并进行兼容性封装的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:javascript
    上一篇:一文详解JavaScript之DOM节点导航 下一篇:js如何创建、删除、追加及替换元素节点(附代码实例)
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• jquery怎么获取父亲节点的第一个子节点• JavaScript知识点整理之获取元素和节点• 一文搞定JavaScript的节点操作• 一文详解JavaScript之DOM节点导航
    1/1

    PHP中文网