JSDOM详解

最新推荐文章于 2024-07-16 19:32:16 发布
最新推荐文章于 2024-07-16 19:32:16 发布
阅读量6.7k 收藏 41
点赞数 9
分类专栏： 基础 文章标签： DOM详解
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40471415/article/details/89319671
版权

Dom元素（节点）

DOM(文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

HTML DOM树
在这里插入图片描述
通过这个对象模型，javascript获得了足够的能力来创建动态的HTML

JavaScriptDOM能做什么???

  1. JavaScript能够改变页面中的所有HTML元素
  2. JavaScript能够改变页面中的所有HTML属性
  3. JavaScript能够改变页面中的所有CSS样式

如何获取HTML元素？

  1. 通过ID得方式获取 在HTML中我都知道ID是唯一得，权重也是比较高
	<div id="box">hello,word</div>
	<script type="text/javascript">
		var oDiv=document.getElementById("box");
	</script>
	//这样咱就可以获取这个标签当然返回值是一个类数组，他跟数组同样都有length属性
	//类数组不能使用数组得方法（切记）
	//我们可以通过索引来获取他具体得值

2.通过标签名来获取这个HTML元素节点（当然我们也可以通过ID获取之后获取更加具体得元素）

	<div>
		<p>hello,word</p>
		<p>您好</p>
		<p>我好</p>
	</div>
	<script type="text/javascript">
		var oP=document.getElementsByTagName("p");
		//返回得仍然是一个类数组，我们可以通过类数组中索引来获取
		console.log(oP[0]);
		console.log(oP[1]);
		console.log(oP[2]);
		//我们也可以通过for循环来遍历每一个值
		for(var i=0;i<oP.length;i++){
			console.log(oP[i]);
		}
	</script>

3.通过Class来获取对应得类名控制HTML得元素节点
好东西来控制节点当然会有兼容性问题（IE8以下）

	<div>
		<p class="text">大家好</p>
		<p>您好</p>
		<p class="text">我好</p>
	</div>
	<p class="text">广州好迪</p>
	<script type="text/javascript">
		var oP=document.getElementsByClassName("text");
		//返回得仍然是一个类数组，我们可以通过类数组中索引来获取
		console.log(oP[0]);
		console.log(oP[1]);
		console.log(oP[2]);
		//我们也可以通过for循环来遍历每一个值
		for(var i=0;i<oP.length;i++){
			console.log(oP[i]);
		}
	</script>

4.通过Name属性来获取节点（一般在表单控件中使用）

	编号：<input type="text" name="text">
	密码：<input type="password" name="text">
	姓名：<input type="text" name="text">
	<p class="text">广州好迪</p>
	<script type="text/javascript">
		var oP=document.getElementsByName("text");
		//返回得仍然是一个类数组，我们可以通过类数组中索引来获取
		console.log(oP[0]);
		console.log(oP[1]);
		console.log(oP[2]);
		//我们也可以通过for循环来遍历每一个值
		for(var i=0;i<oP.length;i++){
			console.log(oP[i]);
		}
	</script>

5.通过选择器查找元素（此方法有浏览器兼容性问题IE8以下不支持）
语法格式为：querySelector() 返回的是一个标签
注意
若不是ID选择，只会选取第一个
此方法关于选择器：css选择器 类选择器，ID选择器等。

	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>无标题文档</title>
	</head>
	<body>
    编号：<input type="text" name="text" class="serialNum" >
    密码：<input type="password" name="text" class="serialNum"id="text1">
    姓名：<input type="text" name="text" class="serialNum">
    <p class="text">广州好迪</p>
    	<script type="text/javascript">
	      var serialNum=document.querySelector("input");//返回第一个input标签
	      var serialClass=document.querySelector(".serialNum");//返回第一个类名serialNum标签
	      var serialId=document.querySelector("#text1");//返回一个ID名为text1的标签
	      console.log(serialNum);
	      console.log(serialClass);
	      console.log(serialId);
	  	</script>
	</body>
	</html>
	</script>

6.querySelectorAll()获取选择器的所有有关标签
语法格式为：querySelectorAll() 返回的是一个NodeList;

	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>无标题文档</title>
	</head>
	<body>
    编号：<input type="text" name="text" class="serialNum" >
    密码：<input type="password" name="text" class="serialNum"id="text1">
    姓名：<input type="text" name="text" class="serialNum">
    <p class="text">广州好迪</p>
    	<script type="text/javascript">
	     var serialNum=document.querySelectorAll("input");//返回一个集合类数组
	     //通过遍历的方式拿到每一个input标签
	     for(var i=0;i<serialNum.length;i++){
	        console.log(serialNum[i]);
	      }
	      var serialClass=document.querySelectorAll(".serialNum");
	      console.log(serialClass);
	  	</script>
	</body>
	</html>
	</script>

DOM 对象节点属性

在DOM中，通过使用节点属性可以对各节点进行查询，查询各节点得名称、类型、属性、节点值、子节点和兄弟节点等。
在这里插入图片描述
先给大家讲一下这个父节点 和子节点
注意：
1.子节点只能获取直接子节点而不能获取间接子节点（很简单的例子，爷爷辈的直接子节点就是爸爸 而爸爸的儿子就不属于直接子节点）
2.子节点当然也具有他自己的子节点属性（父子节点是比较类似的）
3. fristChild-lastChild返回当前节点的第一个子节点和最够一个子节点（在DOM中文本也算一个节点）

	//在当前文档中
	//head得父节点就是HTML P标签得父节点就是DIV 而最大得父节点就是document
	//html得子节点呢 就是head body 获取不到head中的title等标签 
	
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script type="text/javascript">
		window.onload=function(){
        	var oDiv=document.getElementById('box');
			oDivSon=oDiv.childNodes;
			console.log(oDivSon);//在控制台输出oDiv下的所有子节点
        	}
		</script>
	</head>
	<body>
		<div id="box">
			<div id="box1">
				<p>hello,word</p>
			</div>
		</div>
	</body>
</html>

接下来是咱兄弟节点（跟咱们生活中的兄弟节点是一样的，两个相领的标签）

	还是上面的例子
	body和head标签就是兄弟元素，兄弟节点跟父子节点一样只能获取直接兄弟节点。

例子1
在以下例子中大家会发现 第一个直接子节点的值为#text，这是一个文本节点，子节点包括（文本节点、元素节点等）

	<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	 <!-- Demo树 -->
	 <div class="two">
	 	<p>11</p>
	 	<p>22</p>
	 </div><div id="one">
	 	<p><span>测试1</span></p>
	 	<p><span>测试2</span></p>
	 	<p><span>测试3</span></p></div>
	 <div id="three">
	 	<span>321</span>
	 </div>
		
	<!-- 例子 -->
	

	 <script type="text/javascript">
	 	var one=document.getElementById("one");
	 	console.log(one.firstChild);//返回当前节点的一个子节点
	 	console.log(one.lastChild);//返回当前节点的最后一个子节点
	 	console.log(one.previousSibling);//返回当前节点的前一个兄弟节点
	 	var one1=one.nextSibling.nextSibling;
	 	one1.style.backgroundColor="red";//设置one1的背景色
	 	console.log(one1);//返回当前节点的后一个节点
	 	cs=one.childNodes;//获取子节点
	 	cs[1].innerText='bbb';
	 	console.log(cs[1]);
	 </script>
</body>
</html>

children()

通过上面的例子我们会发现元素的直接子节点会包括文本节点，而使用children()方法返回的是元素节点不包括文本节点。

创建元素节点，添加元素节点

语法格式为：document.createElement();来创建元素节点
自然我们创建了一个元素节点同时也需要我们把他添加到相应的位置
添加元素节点语法格式：obj.appendChild();

	<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload=function () {
			var oDiv=document.getElementById('box');
			var span=document.createElement("span");//创建一个span标签
			span.innerHTML="javascript";//设置span标签中的值为javascript
			oDiv.children[0].appendChild(span);//将span添加到oDiv下的第一个元素节点
		}
	</script>
</head>
<body>
	<div id="box">
		<div>
			<p>hello,word</p>
		</div>
	</div>
</body>
</html>

插入节点

插入节点 通过使用insertBefore()方法来实现。insertBefore()方法将新的子节点添加到当前节点的末尾。
其语法格式为：
obj.insertBefore(new,ref)
new:表示新得子节点
ref:指定一个节点，在这个节点前插入新得节点。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
	<ul id="test">
    <li>JavaScript</li>
    <li>HTML</li>
    </ul> 
<script type="text/javascript">
	  var otest = document.getElementById("test");  
	  var oLi=document.createElement("li");
	  oLi.innerHTML="php";
	  alert(otest.children[1]);
	  otest.insertBefore(oLi,otest.children[1]);
</script> 

</body>
</html>

删除节点

删除节点通过使用removeChild方法来实现。其语法格式如下
obj.removeChild(olChild)
olChild:表示需要删除的节点
在这里插入图片描述
运行结果为：
HTML
删除节点的内容: javascript

替换元素节点

替换元素节点可以使用replaceChild方法来实现。语法格式如下
obj.replaceChild(new,old)
new:替换后的新节点
old:需要被替换的旧节点在这里插入图片描述
效果: 将文档中的 Java 改为 JavaScript。
注意:

  1. 当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
  2. newnode 必须先被建立
Baron_l
关注
  • 9
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中 DOM 的概念解释
norang的博客
06-04 1878
3.1 文档：DOM中的“D” 如果没有document （文档），DOM也就无从谈起。当创建了一个网页 并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把你编写 的网页文档转换为一个文档对象。 在人类语言中，“对象”这个词的含义往往不那么明确，它几乎可以用来 称呼任何一种东西。但在程序设计语言中，“对象”这个词的含义非常明 确。 3.2 对象：DOM中的“O” 在上一章的末尾，我们向大家展示了几个JavaScript对象的例子。你应该 还记得，“对象”是一种自足的数据集合。与某个特定对象相关联的变
JS DOM详解之节点的增加、删除、替换、复制，属性设置和获取，样式设置和获取
吉帅振博客
07-12 2998
写在前面：DOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。对于JavaScript，为了能够使JavaScript操作Html，JavaScript就有了一套自己的dom编程接口。对于Html，dom使得html形成一棵dom树，类似于一颗家族树一样，一层接一层，子子孙孙。所以说，有了DOM，在我看来就是相当于Java...
javascriptNOTE
wangbo910927的博客
09-18 288
1. 节点及其类型:  1). 元素节点  2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作.  3). 文本节点: 是元素节点的子节点, 其内容为文本.   2. 在 html 文档的什么位置编写 js 代码?    0). 直接在 html 页面中书写代码.   Click Me!   缺点:    ①. js 和 html 强耦合, 不利用代码的维护
JavaScript DOM 对象详解
最新发布
xycxycooo的博客
07-16 877
在 JavaScript 编程中，DOM（Document Object Model）是指文档对象模型，它提供了一组用于与 HTML 文档进行交互的对象。DOM 是一种跨平台的、独立于语言的接口，它将 HTML 或 XML 文档表示为一个树形结构，其中每个节点都是一个对象，代表文档的一部分（如元素、属性、文本等）。通过 DOM，开发者可以添加、删除、修改和查询文档中的元素和内容。通过本文的详细讲解，相信你已经对 JavaScript 中的 DOM 对象有了全面的了解。方法可以通过元素的标签名获取元素集合。
jsDOM
qq_39134392的博客
05-29 391
1.1 使用JS完成表格的一个隔行换色1.1.1 1.需求分析我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息，显示效果如下： 思路分析1、 获取tbody中所有的tr2、 循环遍历tr,索引对2取模为0,说明是偶数设置背景为粉色&lt;style&gt;        td {            border: 1px solid black;            width:...
JS中的DOM
m0_60489011的博客
11-24 7441
一、理解JS中的DOM 1.DOM是文档对象模型：当网页被加载时，浏览器会创建页面的文档对象模型。 2.通过 DOM，可访问 JavaScript HTML 文档的所有元素。 3.DOM 模型被构造为对象的树：通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面...
jsdom
Enche的博客
06-19 329
1. DOM Document Object Model(文本对象模型) 2. 节点及其类型     element node、attribute node、text node;     text node是element node的子节点；      3. JS写在什么地方     1).HTML代码和JS代码耦合在一起     缺点：不利于代码维护         Clic
js DOM的事件常见操作实例详解
10-15
JavaScript DOM事件是JavaScript编程中的核心部分，它使得用户与网页交互成为可能。DOM，即Document Object Model，是一种标准，用于表示HTML或XML文档的结构，并提供了与这些文档交互的方法。在JavaScript中，DOM...
js常用DOM方法详解
10-20
而W3school提供的JS参考手册是一份宝贵的资源，能够帮助开发者深入理解并扩展JavaScript DOM操作的知识。 以上内容详细介绍了JavaScript中常用的DOM操作方法，希望能对大家学习或工作带来帮助。在实际开发中，根据...
DOM
weixin_33973600的博客
05-07 555
一、DOM简介 D——document，没有文档，也就是没有网页，DOM就无从谈起。 当创建了一个网页并把它加载到web浏览器中时，DOM就悄然而生。浏览器根据网页文档创建一个文档对象。 O——object，对象。 对象有三种， 1、用户自定义对象 2、内建对象，javascript中的对象，如Array，Math，Date等。 3、宿主对象，由浏览器提供的对象，如window对象。...
JavaScript DOM 结构理解
凝弧
03-22 350
DOM 节点（Node）树形图： XML：可自定义语法标签，且标签必须闭合，主要用于传输数据，类似JSON对象的结构，现已被JSON取代 Document：是一个特殊的构造函数，只能由系统来实例化（new） 原型方法： HTMLDocument.prototype 定义了一些属性：body、head … Document.prototype 定义了一个属性：documentE...
JavaScript中什么是DOM?
NewTyun的博客
11-18 1519
新钛云服已为您服务1319天如果您刚刚开始学习 JavaScript，您可能听说过 DOM。但它究竟是什么？在本文中，我将解释什么是 DOM 并提供一些 JavaScript 代码示例。我...
JSDOM
qq_42555384的博客
08-21 230
JSDOM 目标： 能够说出什么是DOM 能够获取页面元素 能够给页面元素注册事件 能够操作DOM元素属性 能够创建元素 能够操作DOM节点 DOM简介 文档对象模型（Document Object Model,简称DOM）,是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过它，可改变页面的内容、结构和样式。 获取元素 getElementById() 通过ID...
js DOM 理解图
tangiwang的博客
01-31 82
js之DOM简介
shkstart的博客
11-04 4936
1 什么是 DOM 1）DOM 英文全称“Document Object Model”，译为“文档对象模型”。 2）DOM 是一个与平台和编程语言无关的接口，通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。 2 DOM 的组成 1）核心DOM- 针对任何结构化文档的标准模型。 2）XML DOM- 针对 XML 文档的标准模型。 3）HTML DOM- 针对 HTML 文档的标准模型。 3 DOM 分级（DOM的发展版本） DOM0 本没有DOM0，习惯上把未形成标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值