JavaScriptDOM基础

最新推荐文章于 2025-07-07 19:35:11 发布

原创最新推荐文章于 2025-07-07 19:35:11 发布 · 315 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了DOM（文档对象模型）的基本概念，包括其定义、用途及如何使用JavaScript与HTML或XML文档进行交互。文中还提供了示例代码，展示了如何访问、添加、替换和克隆节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM(Document object Model)文档对象模型，用来描述Javascript脚本怎样与HTML或XML文档进行交互的Web标准

DOM规定：整个文档是一个文档节点，每个标签是个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点

<!--本例演示如果借助节点的nodeType属性检索当前文档中包含元素的个数-->
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>19DOM基础</title>
		<script src="19DOM基础.js"></script>
	</head>
	<body>
		<h1>DOM</h1>
		<p>DOM 是<cite>Document Object Model</cite>首字母简写，中文翻译为<b>文档对象模型</b>，
		是<i>W3c</i>组织推荐的处理可扩展标识语言的标准编程接口。</P>
		<ul>
			<li>D表示文档，HTML文档结构。</li>
			<li>O表示对象，文档结构的Javascript脚本化映射。</li>
			<li>M表示模型，脚本与结构交互的方法和行为。</li>
		</ul>
		<script>
			function count(n){
				var num=0;
				if(n.nodeType == 1)
				num++;
				var son = n.childNodes;
				for(var i=0; i<son.length; i++){
					num+=count(son[i]);
				}
				return num;
			}
			console.log("当前文档包含" + count(document) + " 个元素");
		</script>
	</body>
</html>

节点类型     nodeType属性返回值   nodeName返回值   nodeValue返回值
Element                 1                                 标签名称              null
Attr                        2                               属性的名称             属性的值
Text                       3                               #text                       节点的内容
访问节点：
ownerDocument:返回当前节点的根元素（document对象）
parentNode：返回当前节点的父节点。所有节点都仅有一个父节点
childNodes：返回当前节点的所有子节点的节点列表
firstChild：返回当前节点的首个子节点
lastChild：返回当前节点的最后一个子节点
nextSibling：返回当前节点之后相邻的同级节点
previousSibling：返回当前节点之前相邻的同级节点
本例展示了如何访问保存在nodeList中的节点：通过方括号，也可以使用item（）方法

<ul>
			<li>D表示文档，HTML文档结构。</li>
			<li>O表示对象，文档结构的Javascript脚本化映射。</li>
			<li>M表示模型，脚本与结构交互的方法和行为。</li>
		</ul>
		<script>
			var tag = document.getElementsByTagName("ul")[0];
			var a = tag.childNodes;
			console.log(a[0].nodeType);
			console.log(a.item(1).innerHTML);             //显示第二个节点包含的文本
			console.log(a.length);
		</script>

parentNode属性返回节点永远是一个元素类型节点，因为只有元素节点才能包含子节点

node.childNodes[0] = node.firstChild
node.childNodes[node.childNodes.length-1] = node.lastChild

添加节点

<body>
		<div id="box">
		<p>测试Div1</P>
		<p>测试Div2</P>
		<p>测试Div3</P>
		</div>
		<script>
			var box = document.getElementById("box");
			var p = document.createElement("p");//只是创建了一个元素节点p，还没有添加到文档中去，只是存在在内存中
			box.appendChild(p);//将新节点p添加到id=box的div的子节点列表的末尾上
			
			var text = document.createTextNode("测试Div4");
			//p.appendChild(text);//把文本添加到P里面
			//box.appendChild(text);
			document.body.appendChild(text);
			
		</script>
	</body>

	<body>
		<div id="box">
		<p>测试Div1</P>
		<p>测试Div2</P>
		<p>测试Div3</P>
		</div>
		<script>
			var box = document.getElementById("box");
			var p = document.createElement("p");
			box.parentNode.insertBefore(p,box);// 在box的父节点添加一个P，就是在box前面添加一个元素节点
		</script>
	</body>

//向后添加节点
<body>
		<span>开始</span>
		<div id="box">
		<p>测试Div1</P>
		<p>测试Div2</P>
		<p>测试Div3</P>
		</div>
		<span>结束</span>
		<script>
			var box = document.getElementById("box");
			var p = document.createElement("p");
			insertAfter(p, box);
			function insertAfter(newElement, targetElement){
				//得到父节点
				var parent = targetElement.parentNode;
				//span节点的前面添加
				parent.insertBefore(newElement,targetElement.nextSibling);
			}
		</script>
	</body>

替换节点

<body>
		<span>开始</span>
		<div id="box">
		<p>测试Div1</P>
		<p>测试Div2</P>
		<p>测试Div3</P>
		</div>
		<span>结束</span>
		<script>
			var span = document.getElementsByTagName("Span")[0];
			var em = document.createElement("em");
			span.parentNode.replaceChild(em, span);
		</script>
	</body>

克隆节点

<body>
		<span>开始</span>
		<div id="box">
		<p>测试Div1</P>
		<p>测试Div2</P>
		<p>测试Div3</P>
		</div>
		<span>结束</span>
		<script>
			var box = document.getElementById('box');
			var clone = removeWhiteNode(box).firstChild.cloneNode(true);
			box.appendChild(clone);
			
			//移除空白节点
			function removeWhiteNode(node){
				for(var i=0; i<node.childNodes.length; i++){
					if(node.childNodes[i].nodeType==3&&/^\s+$/.test(node.childNodes[i].nodeValue)){
						node.removeChild(node.childNodes[i]);
					}
				}
				return node;
			}
		</script>
	</body>

合并同一级别的文本节点

<body>
		<span>开始</span>
		<div id="box"></div>
		<span>结束</span>
		<script>
			var box = document.getElementById('box');
			var text1 = document.createTextNode("Mr.");
			var text2 = document.createTextNode("Lee");
			box.appendChild(text1);
			box.appendChild(text2);
			box.normalize();//合并同一级别的文本节点
			alert(box.childNodes.length);
		</script>
	</body>