扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >JS怎么获取节点并进行兼容性封装
  • 863

0
分享到

JS怎么获取节点并进行兼容性封装

2024-04-02 19:04:59 863人浏览 独家记忆
摘要

这篇“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
      <h2>我是标题</h2>
 </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怎么获取节点并进行兼容性封装”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网node.js频道。

--结束END--

本文标题: JS怎么获取节点并进行兼容性封装

本文链接: https://lsjlt.com/news/98503.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS怎么获取节点并进行兼容性封装
    这篇“JS怎么获取节点并进行兼容性封装”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JS怎...
    99+
    2024-04-02
  • java怎么获取xml节点属性
    要获取XML节点的属性，可以使用Java的DOM解析器来解析XML文档。DOM解析器提供了一种方便的方式来处理XML文档，并可以轻松...
    99+
    2024-02-29
    java
  • 字节码文件怎么利用java进行获取
    字节码文件怎么利用java进行获取？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。java 获取字节码文件的几种方法总结其具体思想及代码如下所示：public class P...
    99+
    2023-05-31
    java 字节码 ava
  • 怎么进行IE6、IE7、IE8三大浏览器兼容性对比
    本篇文章给大家分享的是有关怎么进行IE6、IE7、IE8三大浏览器兼容性对比，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。向大家简单介绍一下I...
    99+
    2024-04-02
  • Java Integer怎么获取第一位和最后一位并进行截取
    这篇文章的内容主要围绕Java Integer怎么获取第一位和最后一位并进行截取进行讲述，文章内容清晰易懂，条理清晰，非常适合新手学习，值得大家去阅读。感兴趣的朋友可以跟随小编一起阅读吧。希望大家通过这篇文章有所收获！Intege...
    99+
    2023-06-29
  • MySQL高可用工具Orchestrator怎么进行raft多节点模式安装
    这篇文章将为大家详细讲解有关MySQL高可用工具Orchestrator怎么进行raft多节点模式安装，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。环&nb...
    99+
    2024-04-02
  • vue怎么使用js对图片进行点击标注圆点并记录它的坐标
    这篇文章主要介绍“vue怎么使用js对图片进行点击标注圆点并记录它的坐标”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue怎么使用js对图片进行点击标注圆点并记录它的坐标”文章能帮助大家解决问题。...
    99+
    2023-06-30
  • 怎么使用C++和Direct3D获取屏幕截图并根据传入分辨率进行缩放图片大小
    这篇文章主要介绍“怎么使用C++和Direct3D获取屏幕截图并根据传入分辨率进行缩放图片大小”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么使用C++和Direct3D获取屏幕截图并根据传入分辨...
    99+
    2023-07-05
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作