DOM节点类型及相关的内容

最新推荐文章于 2024-06-05 23:20:10 发布
最新推荐文章于 2024-06-05 23:20:10 发布
阅读量1.3k 收藏 2
点赞数 1
分类专栏： 前端 文章标签： dom javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37953045/article/details/106494445
版权

 

DOM的全称是（document object model）一共有12种节点类型，最常用的有：元素节点（nodeType：1），属性节点（nodeType：2），文本节点（nodeType：3），注释节点（nodeType：8）

nodeName：获取节点名称

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="wrap"></div>
		<script>
			(function(){
				let oW = document.getElementById("wrap");
				console.log(oW.nodeName)//打印结果为：DIV
			})()
		</script>
	</body>
</html>

chileNames：获取节点的集合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="wrap">
			你好，世界
			<p>hello world</p>
		</div>
		<script>
			(function(){
				let oW = document.getElementById("wrap");
				console.log(oW.childNodes);
                //这里就会获取到3个子节点：text,p,text
			})()
		</script>
	</body>
</html>

注意：只要是空格都算是text节点

chlidren：获取元素子节点的集合（动态的）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="wrap">
			你好，世界
			<p>hello world</p>
			<span>ni hao</span>
		</div>
		<script>
			(function(){
				let oW = document.getElementById("wrap");
				console.log(oW.children);
                //这里就获取到了两个元素：p,span
			})()
		</script>
	</body>
</html>

createTextNode：创建文本节点

let oText = document.createTextNode("hello world");

createElement:创建元素节点

let oDiv = document.createElement("div");//这里写标签名

appendChild：添加子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="wrap">
			你好，世界
			<p id="op">hello world</p>
			<span>ni hao</span>
		</div>
		<script>
			(function(){
				let oWrap = document.getElementById("wrap");
				let oText = document.createTextNode("hello world");
				let oDiv = document.createElement("div");
				oWrap.appendChild(oDiv);
				oWrap.appendChild(oText);
				console.log(oWrap);
			})()
		</script>
	</body>
</html>

insertBefore：可在已有的子节点前插入一个新的子节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="wrap">
			你好，世界
			<p id="op">hello world</p>
			<span>ni hao</span>
		</div>
		<script>
			(function(){
				let oWrap = document.getElementById("wrap");
				let oP = document.getElementById("op");
				let oText = document.createTextNode("hello world");
				let oDiv = document.createElement("div");
				oWrap.insertBefore(oDiv,oP);//在p标签的前面添加div标签
				oWrap.insertBefore(oText,oWrap.children[0]);//在id为wrap的div最前面添加文本节点
				console.log(oWrap);
			})()
		</script>
	</body>
</html>

removeChild：删除节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style></style>
	</head>
	<body>
		<div id="wrap">
			<p>111</p>
			<p>222</p>
			<p>333</p>
		</div>
		<script>
			(function(){
				let oWrap = document.getElementById("wrap");
				let op = document.querySelectorAll("#wrap p");
				oWrap.removeChild(op[1]);//222就已经删除了
			})()
		</script>
	</body>
</html>

注意：removeChild删除的节点只要还在内存中就还是可以再次利用的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style></style>
	</head>
	<body>
		<div id="wrap">
			<p>111</p>
			<p>222</p>
			<p>333</p>
		</div>
		<div id="box"></div>
		<script>
			(function(){
				let oWrap = document.getElementById("wrap"),
					oBox = document.getElementById("box");
				let op = document.querySelectorAll("#wrap p");
				oWrap.removeChild(op[1]);//已经把id为wrap的div里的222p标签删除了
				oBox.appendChild(op[1]);//添加到了id为box的div里了
			})()
		</script>
	</body>
</html>

firstChild：第一个子节点（不支持IE8及以下）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="wrap">
        <p>111</p>
        <p>222</p>
    </div>
    <script>
        (function () {
            let oW = document.getElementById("wrap");
            console.log(oW.firstChild);
        })();
    </script>
</body>
</html>

 注意：这里的第一个子节点包括父级与子级中间的空格，所以这里打印的是：而不是111的p标签

firstElementChild：第一个元素子节点

 (function () {
            let oW = document.getElementById("wrap");
            console.log(oW.firstElementChild);
        })();

 这里打印的才是111的p标签：

netElementSibling：下一个兄弟元素节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="wrap">
        <p>111</p>
        <p>222</p>
        <p>333</p>
    </div>
    <script>
        (function () {
            let oW = document.getElementById("wrap").children;
            console.log(oW[0].nextElementSibling);//222的p
            console.log(oW[1].nextElementSibling);//333的p
            console.log(oW[2].nextElementSibling);//当下一个子节点没有就返回null
        })();
    </script>
</body>
</html>

 注意：netElementSibling不兼容IE8及一下：兼容代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="wrap">
        <p>111</p>
        <p>222</p>
        <p>333</p>
    </div>
    <script>
        (function () {
            let oW = document.getElementById("wrap").children;
       
            console.log(fn(oW[0]));//222的p
            console.log(fn(oW[1]));//333的p
            console.log(fn(oW[2]));返回null

            function fn(ele) {
                if (ele.nextElementSibling !== undefined){
                    return ele.nextElementSibling;
                }else{
                    return ele.nextSibling;
                }
            }
        })();
    </script>
</body>
</html>
previousElementSibling：获取上一个兄弟元素节点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="wrap">
        <p>111</p>
        <p>222</p>
        <p>333</p>
    </div>
    <script>
        (function () {
            let oW = document.getElementById("wrap").children;
           
            console.log(oW[0].previousElementSibling);//返回null
            console.log(oW[1].previousElementSibling);//111的p
            console.log(oW[2].previousElementSibling);//222的p
        })();
    </script>
</body>
</html>

parentDode：获取父级节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="wrap">
        <p>111</p>
        <p>222</p>
        <p>333</p>
    </div>
    <script>
        (function () {
            let oW = document.getElementById("wrap").children;
           
             console.log(oW[0].parentNode);//返回id为wrap的div
        })();
    </script>
</body>
</html>

 offsetParent：获取定位父节点，就是有定位的父级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="wrap">
        <p id="btn">111</p>
        <p>222</p>
        <p>333</p>
    </div>
    <script>
        (function () {
            let oW = document.getElementById("wrap").children;
            let oBtn = document.getElementById("btn");
           
            console.log(oBtn.offsetParent);//返回body节点，因为他的父级div没有定位，所以最终获取body
          
        })();
    </script>
</body>
</html>

 cloneNode：克隆节点（只是克隆一个空壳子，节点里面的内容是不会克隆过来的，要加个参数：true就行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="wrap">
        <p id="btn">111</p>
        <p>222</p>
        <p>333</p>
    </div>
    <div id="box">

    </div>
    <script>
        (function () {
            let oW = document.getElementById("wrap").children;
            let oBtn = document.getElementById("btn");
            let oBox = document.getElementById("box");
           
            let clone = oBtn.cloneNode();//这里只能克隆一个空的id为btn的p
            oBox.appendChild(clone);

            let clone1 = oBtn.cloneNode(true);//这里把id为btn的p的内容都克隆过来了
            oBox.appendChild(clone1);
           
        })();
    </script>
</body>
</html>
旭陌小生
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML文档中节点的主要类型,DOM系列：DOM节点属性
weixin_39856709的博客
06-04 784
经过前几篇文章的学习，对DOM有一定的了解。但这仅仅是DOM一些基础性的知识，如果要对DOM更了解，需要更深入地了解DOM节点。在这一节中，咱们将围绕DOM的节点属性、标签和内容来展开。这样我们就可以更进一步的了解它们是什么？以及它们最常的属性。DOM节点类DOM节点的属性取决于它们的类(class)。例如，标签对应的是一个元素节点和链接a相关的属性。文本节点与元素节点不一样，但是它们之间也有相同...
浅谈Javascript中的12种DOM节点类型
10-21
DOM是javascript操作网页的接口，全称为文档对象模型(Document Object Model)。本文将主要说明DOM节点类型，有需要的可以参考借鉴。
DOM节点类型及其属性和方法
叶子yes的博客
08-23 5521
DOM是JS操作网页的接口，全称为“文档对象模型它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。文档——文档表示的就是整个的HTML网页文档对象——对象表示将网页中的每一个部分都转换为了一个对象模型——使用模型来表示对象之间的关系，这样方便我们获取对象文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。
DOM节点类型及属性
BReezeFK的博客
08-04 1648
DOM操作之——DOM节点类型及属性 虽然现在我们在开发中已经用不到自己操作DOM了，之前有JQ，现在更是有VUE、REACT两大框架供我们使用，但是我们也有必要了解下，关于原生JS中的DOM操作问题。 这次我们介绍一下DOM节点类型及获取节点的方法 我们认为在页面中所有呈现的内容，都是DOM文档中的一个节点（node），例如：元素标签是元素节点、注释的内容是注释节点、文本内容是文本节点、document是文档节点… 一、节点类型 1、文档节点 document 重点记忆属性： nodeType
DOM节点类型
qq_56973906的博客
07-17 806
DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。
DOM是什么？含12种DOM节点类型概述
最新发布
qing_tong_tong的博客
06-05 1551
百度
html dom节点类型,JavaScript HTML DOM节点类型之Node类型介绍
weixin_42504058的博客
06-22 385
JavaScript中所有HTML DOM节点类型都继承自Node类型，因此所有类型的节点都有一些相同的属性和方法。Node接口是DOM1级中定义的一个接口，在JavaScript中Node接口被实现为Node类型。1. 返回节点类型nodeTypenode.nodeType每个节点都有nodeType属性，该属性表示节点类型。节点类型由Node类型中定义12个常量表示：常量值常量名1Node.E...
html dom节点有哪些,【DOM】DOM是什么（DOM的节点类型）
weixin_42407739的博客
06-11 891
写在前面：学到DOM时，看到关于文档(结构树)、节点(node)、和DOM提供的一些方法获取(找到)所需的节点、还有DOM属性，我很混乱，我无法弄清节点的关系层级属性和方法的关系，所以在使用DOM之前我要先了解DOM，当我们用javascript对HTML DOM进行操作的时候我们要明确HTML DOM中节点类型和层级才能准确定找到你想要增删改查的位置。找了些资料和书，看了些视频，写这篇文章总结一...
JavaScript中DOM节点类型(JS笔记:二十一)
TZOF_的博客
01-14 328
JavaScript中DOM节点类型(JS笔记:二十一) DOM节点类型： nodeType返回元素的节点类型 可以用nodeType判断是否为9或者1如果不是则不为DOM节点     (JS笔记:二十一    date:2020-12-24)
DOM判断节点类型分分钟搞定
weixin_46370867的博客
11-29 1542
小编和你一起解锁DOM判断节点类型的秘密 Let’s GO ! ! ! Node对象中的nodeName获取指定节点的节点名称 Node对象中的nodeType获取指定节点的节点类型 nodeType 属性返回以数字值返回指定节点的节点类型 如果节点是元素节点，则 nodeType 属性将返回 1 如果节点是属性节点，则 nodeType 属性将返回 2 如果节点是文本节点，则 nodeType 属性将返回 3 Node对象中的nodeValue获取指定节点的值 在DOM树结构中，文本节点是元
JavaScript HTML DOM元素 节点操作汇总
10-16
总之，JavaScript的DOM节点操作提供了强大的能力，使我们能够动态地更新页面内容，实现丰富的用户交互。通过熟练掌握这些基本操作，开发者可以轻松地创建动态、响应式的Web应用。在实际开发中，结合事件监听、CSS...
html dom节点操作(获取/修改/添加或删除)
09-04
它将网页内容视为一棵由节点组成的树形结构，每个部分都有对应的节点类型，包括元素节点、文本节点、属性节点和注释节点。通过DOM，开发者可以使用JavaScript等脚本语言对网页内容进行动态修改。 在DOM中，获取、...
JavaScript DOM节点操作方法总结
11-25
节点类型主要有三种：元素节点，属性节点和文本节点。 而对DOM的主要也就是围绕元素节点和属性节点的增删改查。下面就分别从对元素节点的操作和对属性节点的操作来介绍。 元素节点 查 在对DOM进行增删改之前，首先...
koa框架
qq_37953045的博客
11-15 4194
简介：koa是基于node.js平台的web开发框架，致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。 安装的方法： npm i koa 使用方法： 安装完了之后然后就是引包和创建对象： 引包：const koa = require("koa"); 引完包之后就是创建对象let app = new
vue能做什么以及特点
qq_37953045的博客
04-08 3882
做前端已经好几年了，也了解过好多前端的框架。今天我们来简单聊聊vue这个既简单又好用的框架：能做什么：几乎没有DOM操作，和比较适合SPA开发（单页面web）。特点：1.双向数据绑定，2.通过指令扩展HTML，通过表达式绑定数据到HTML，3.解耦视图与数据，4.可复用组件，5.虚拟DOM，6.M-v-vm，7.数据驱动视图等。在这里我给大家推荐学习vue的三个网站：，1.vue开源项目汇总，2....
vue项目：点击按钮新增一个input输入框
qq_37953045的博客
03-21 2234
vue项目：点击按钮新增一个input输入框
canvas
qq_37953045的博客
10-18 1286
canvas简介 canvas是H5新增的一个标签。它可以通过javascript在其中绘制图像的HTML元素，可以用来处理照片集和实时视频处理和渲染。在页面上放置一个canvas就相当于一个画布，可以绘制出各种各样的图形。如果不利用js编写的话，canvas就是一个透明的区域。canvas自带两个属性值：width和height。接下来就让我们一起来学习吧！ 首先我们要在 ...
el-upload中断取消
qq_37953045的博客
03-21 1245
el-upload中断取消
JavaScript DOM节点访问与null类型详解
在JavaScript技术中，节点访问是DOM（Document Object Model）操作的核心部分，它允许开发者直接与HTML文档中的元素进行交互。`document.getElementById()`和`getElementsByTagName()`是两个重要的方法： 1. `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旭陌小生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值