javascript中的DOM操作

最新推荐文章于 2022-03-27 20:35:06 发布
最新推荐文章于 2022-03-27 20:35:06 发布
阅读量188 收藏 2
点赞数 1
分类专栏： javascript中的DOM操作 文章标签： javascript中的DOM操作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43551373/article/details/85052484
版权

1. 什么是 DOM？
DOM是W3C(万维网联盟)的标准.
DOM 定义了访问 HTML 和 XML 文档的标准:
“W3C文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容\结构和样式.”
W3C DOM标准被分为3个不同的部分:
(1)核心 DOM - 针对任何结构化文档的标准模型
(2)XML DOM - 针对 XML 文档的标准模型
(3)HTML DOM - 针对 HTML 文档的标准模型
注：DOM 是 Document Object Model（文档对象模型）的缩写
2. JavaScript 中 DOM 节点操作
在HTML DOM中,所有事物都是节点.DOM是被视为节点树的 HTML.
HTML 文档中的所有内容都是节点:
整个文档是一个文档节点;
每个 HTML 元素是元素节点;
HTML 元素内的文本是文本节点;
每个 HTML 属性是属性节点;
注释是注释节点.

HTML 文档中的所有内容都是节点：
​    整个文档是一个文档节点
​    每个 HTML 元素是元素节点
​    HTML 元素内的文本是文本节点
​    每个 HTML 属性是属性节点
​    注释是注释节点
​    节点父、子和同胞
​    节点树中的节点彼此拥有层级关系。
​    父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
​    每个节点都有父节点、除了根（它没有父节点）
​    一个节点可拥有任意数量的子节点
​    同胞是拥有相同父节点的节点

3. JavaScript 的 DOM 方法

方法是我们可以在节点（HTML 元素）上执行的动作。 编程接口 可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。 所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属 性。

方法是您能够执行的动作（比如添加或修改元素）。 属性是您能够获取或设置的值（比如节点的名称或内容）。

HTML DOM 对象 - 方法和属性

(1)一些常用的 HTML DOM 方法：
访问 HTML 元素（节点）常用的访问 HTML 元素的方法：

(1) getElementById()方法
getElementById() 方法返回带有指定 ID 的元素。语法：document.getElementById(“id 值”) ；

(2) getElementsByTagName()方法
getElementsByTagName() 返回带有指定标签名的所有元素。语法：元素.getElementsByTagName(“标签名称”);

(3) getElementsByClassName()方法
getElementsByClassName() 返回带有指定 class 的元素。语法：元素.getElementsByTagName(“class 值”);

(4) getElementsByName()方法
getElementsByName() 返回带有指定 name 的元素。语法：元素.getElementsByTagName(“name 值”)；

对于元素节点的操作
(1) appendChild()方法
​    功能：把新的子节点添加到指定节点

(2) removeChild()方法
​    功能：删除子节点

(3) replaceChild()方法
​    功能：替换子节点。

(4) insertBefore()方法
​    功能：在指定的子节点前面插入新的子节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素节点的操作</title>
		<script type="text/javascript">
			window.onload=function(){
				var div1=document.getElementById('div1');
				var p1=document.getElementById('p1');
				//(1),appendChild()		把新的子节点添加到指定节点中
//				div1.appendChild(p1);
				//(2),removeChild()		删除子节点
				var span1=document.getElementById('span1');
//				div1.removeChild(span1);
				//(3),raplaceChild()	替换子节点
				var span2=document.getElementById('span2');
				var p2=document.getElementById('p2');
//				div1.replaceChild(p2,span2);
				//(4),insertBefore()	在指定的子节点前插入新的子节点
				var span3=document.getElementById('span3');
//				div1.insertBefore(span3,span1);
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<span id="span1"></span>
			<span id="span2"></span>
		</div>
		<p id="p1"></p>
		<p id="p2"></p>
		<span id="span3"></span>
	</body>
</html>

对于节点属性及内容的操作
（1） createElement()方法
功能：创建元素

（2） createTextNode()方法
功能：创建文本节点

（3） createAttribute()方法
功能：创建属性节点

（4） getAttribute()方法
功能：返回指定的属性值

（5） setAttribute()方法
功能：把指定属性设置或修改为指定的值

（6）setAttributeNode()方法
功能：将属性节点添加到指定的节点
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>节点属性和内容的操作</title>
		<script type="text/javascript">
			window.onload=function(){
			//(1),createElement()	创建元素节点
				var body=document.getElementsByTagName('body')[0];
				//创建了一个p标签
				var p1=document.createElement('p');
				//把新的子节点添加到指定节点中	(将p添加到body中)
				body.appendChild(p1);
				var p2=document.createElement('p');
				body.appendChild(p2);
			//(2),createTextNode()		创建文本节点
				var txt1=document.createTextNode('创建了一个文本节点');
				//把新的子节点添加到指定节点中	(将txt1添加到p1中)
				p1.appendChild(txt1);
			//(3),createAttribute()		创建属性节点
				var clas=document.createAttribute('class');
				var id=document.createAttribute('id');
				clas.value='p1';
				id.value='p1';
			//setAttributeNode():将属性节点添加到指定的节点
				p1.setAttributeNode(clas);
				p1.setAttributeNode(id);
			//(4),getAttribute()			获取属性节点值
				alert(p1.getAttribute('class'));
			//(5),setAttribute()			把指定的属性值或修改为指定的值
				p1.setAttribute('id','p_01');
			}
			
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

常用的 HTML DOM 属性
(1) innerHTML 属性
功能： 设置或返回表格行的开始和结束标签之间的 HTML

(2) parentNode 属性
功能：以 Node 对象的形式返回指定节点的父节点;如果指定节点没有父节点，则返回 null。

(3) childNodes 属性
功能：返回节点的子节点集合，以 NodeList 对象

(4) attributes 属性
功能： 返回指定节点的属性集合，即 NamedNodeMap

(5) nodeName 属性
功能： nodeName 属性指定节点的节点名称。

(6) nodeValue 属性
功能： 设置或返回指定节点的节点值

(7)nodeType    属性
功能：节点元素的类型
​    nodeType 属性返回以数字值返回指定节点的节点类型。
​    如果节点是元素节点，则 nodeType 属性将返回 1。
​    如果节点是属性节点，则 nodeType 属性将返回 2。
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用的HTML DOM操作</title>
		<script type="text/javascript">
			window.onload=function(){
			//(1),innerHTML
				var div1=document.getElementById('div1');
				div1.innerHTML='<p>innerHTML</p>';
			//(2),parentNode	节点元素的父节点
				var div2=document.getElementById('div2');
				var spans=document.getElementsByTagName('span')[0];
				var h1=document.getElementsByTagName('h1')[0];
//				alert(spans.parentNode);		//显示结果为：[object HTMLDivElement]
//				alert(h1.parentNode);			//显示结果为：[object HTMLBodyElement]
			//(3),childNades	节点元素的子节点
//				alert(div2.childNodes);			//显示结果为：[object NodeList]		返回节点的子节点集合
			//(4),attributes	节点元素的属性节点
//				alert(div1.attributes);			//显示结果为：[object NamedNodeMap]
				//获取节点元素属性节点的长度
				var length=div1.attributes.length;
//				alert(length);					//显示结果为：2
			//(5),nodeName		节点元素的值
				//获取span标签的父节点元素的值
//				alert(spans.parentNode.nodeName);		//获取结果为：DIV
				//获取h1标签的父节点元素的值
//				alert(h1.parentNode.nodeName);			//获取结果为：BODY
			//(6),nodeValue		节点元素的值
				var btn=document.getElementById('btn');
				btn.addEventListener('click',myClick);
				function myClick(){
					h1.innerHTML=btn.childNodes[0].nodeValue;
				}
			//(7),nodeType		节点元素的类型
			/*nodeType 属性返回以数字值返回指定节点的节点类型。
			如果节点是元素节点，则 nodeType 属性将返回 1。
			如果节点是属性节点，则 nodeType 属性将返回 2。*/
				alert(spans.nodeType);		//返回：1	元素节点
			//创建一个属性节点	createAttribute()
				var clas=document.createAttribute('class');
				clas.value='div2';
			//setAttributeNode():将属性节点添加到指定的节点
			//如果这个指定的属性已存在，则此方法会替换它。
				div1.setAttributeNode(clas);
				alert(clas.nodeType);		//返回：2	属性节点
			}
		</script>
	</head>
	<body>
		<div id="div1" class="div1"></div>
		<div id="div2">
			<span></span>
		</div>
		<h1>按一下获取节点元素的值</h1>
		<button id="btn">按一下试试</button>
	</body>
</html>

 

森屿海岛
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中document.createElement()的用法
xiaokangmiclong的博客
11-04 5175
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法一起才能使用。 其中，appendChild() 方法表示在节点的子节点列表末添加新的子节点；insertBefore() 方法在节点的子节点列表任意位置插入新的节点。 下面，先举例说明document.createElement()的用法。 例
javascript DOM基本操作
ktutu的博客
12-30 1052
1.获取节点document1.用指定ID选取元素 document.getElementById<div id="div"></div>document.getElementById('div');2.用指定名字选取元素 document.getElementsByName 一些HTML元素拥有name属性（比如、、、、和等），非唯一，所以多个元素可能有相同的名字。基于name属性的值选取HTM
javascript对DOM的一些操作
the_fire的技术博客
05-02 1024
看了姜昊的那节视频之后，把他留下的练习做了做，把代码贴上来分享一下。javascript：IC(function(){ function $(){ var elements =new Array(); //arguments为当前传入的参数 for(var i=0;iif(typeof element==string){
html dom对象 w3c,JavaScript DOM
weixin_32480781的博客
06-18 170
DOM简介( Document Object Model 文档对象模型)W3CW3C 文档对象模型 (DOM) 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。W3C DOM 标准被分为 3 个不同的部分：核心 DOM - 针对任何结构化文档的标准模型XML DOM - 针对 XML 文档的标准模型HTML DOM - 针对 HTML 文档的标准模型也就是说，DO...
JavaScript(二十三) DOM继承树，DOM基本操作
Bella.的博客
02-23 629
上节讲到的节点类型也被用为查找的基本操作 IE不支持全说的是IE9及以下，IE10以上全部遵循W3C标准 1. DOM继承树 代表的就是一系列的继承关系 1. 大写的Document，你可以理解成构造函数（函数里只有构造函数需要首字母大写），但是你不能new它，它是留给系统留给自己new的 作用：大的Document可以作为小的document的原型，在大的上填一个属性，从小的里可以访问 但是大的Document，不是直接构造小的document的，正经说小的document的原型
JavaScript中DOM操作
10-12 3874
目录 DOM介绍 获取元素 操作元素 节点操作 DOM介绍 JavaScript一共包括三部分，分别是ECMAScript也就是JavaScript基础、DOM和BOM，前面的文章已经讲过ECMAScrit了、这里是ECMAScript的链接：https://blog.csdn.net/HeZhiYing_/article/details/102218018 今天来将一下DO...
JavaScript DOM操作
好好学习天天向上
03-27 5112
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
JavaScript中Dom操作实例详解
10-16
主要介绍了JavaScript中Dom操作,结合实例形式详细分析了javascript针对dom元素节点增删改查相关操作技巧与注意事项,需要的朋友可以参考下
JavaScript中 DOM操作方法小结
10-19
本篇文章主要介绍了JavaScript中 DOM操作方法小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript中Dom操作实例详解.docx
01-13
JavaScript 中 Dom 操作实例详解 在 JavaScript 中，DOM 操作是指对 HTML 文档中的元素节点进行操作，包括增加、删除、修改和查找节点等。以下是 JavaScript 中 DOM 操作的实例详解。 一、增加节点 增加节点的...
javascript DOM和DOM操作的四种基本方法
热门推荐
爱看书的昌 的博客
10-21 1万+
在了解了javascript的语言特性后，javascript真正大放光彩的地方来了——这就是javascript DOM.Javascript DOMDOM(Document Object Model),文档对象模型。简单的说就是一套操作文档内容的方法。文档：DOM的D 如果没有document(文档)，DOM就无从谈起。当创建了一个网页并把它加载到web浏览器中，DOM就悄然而生，它将根据你
Javascript的DOM操作
GOD_CHONG的专栏
12-16 642
前言     在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作,无论增删改查在前端页面操作这一范围内都是比较消耗性能的.如何高效率的,便捷的操作DOM,这就是本文要讲述的.希望看完全文,你能知道如何更高效的通过原生js以及jQuery操作DOM元素.     操作DOM     这里我希望介绍的相对系统一点,而不是东一句西一句,所以把J
第3章 javaScript操作 Dom对象 课后作业：
gz98411的博客
07-17 4717
1，图片轮播 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片轮播&lt;/title&gt; &lt;style&gt; .scroll{width: 360
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
基于Springboot和Vue的生鲜超市管理的设计与实现源码 生鲜超市管理的设计与实现代码（优秀毕业设计）
07-24
生鲜超市管理的设计与实现源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
使用 ReactJs 编写的简单旅行计划器（附源代码）.zip
07-24
项目：使用 ReactJS 编写的简单旅行计划器（附源代码） ReactJs 中的简单旅行计划器是一个简单的 JavaScript 项目。该项目是 ReactJS 中待办应用程序的一个简单示例。 关于项目 Simple Trip Planner In Reactjs 是使用ReactJS开发的。这个项目很容易做一种应用程序。这个项目使用 React 库来完成任务。为了运行这个项目，你必须在系统中安装 NodeJs。当你运行这个项目时，你的应用程序从主页开始。从那里你可以导航到菜单。你只能将计划添加到你的书中。你还可以对旅行进行分类。你所要做的就是输入日期和地点，然后选择你想要的旅行计划类型。 要运行此项目，您需要 在计算机上安装ReactJS和 NodeJs，并使用现代浏览器，例如Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
JavaScript基础与DOM操作总结
5. **DOM操作** - DOM（文档对象模型）允许通过JavaScript操作HTML或XML文档的结构。 - DOM节点包括根节点、父节点、子节点、兄弟节点和叶子节点。 - `document`对象提供了访问和操作HTML元素的方法，如`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值