JS--文档对象模型DOM

最新推荐文章于 2021-06-19 14:49:12 发布

原创最新推荐文章于 2021-06-19 14:49:12 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文深入解析DOM（文档对象模型）的概念与作用，详细介绍了如何利用DOM将HTML文档转换成树状结构，便于理解和操作。同时，文章提供了通过JavaScript操作DOM的实际案例，包括创建、替换、添加和删除节点等，帮助读者掌握网页动态更新的技术。

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

<!DOCTYPE html>
<html>
	<head>
		<!--
        	DOM (Document Object Model)，文档对象模型，根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。

        	HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。
			好处：可以把HTML变成一棵树形结构，我们可以很容易知道节点与节点之间的关系，父节点与子元素
			根据DOM的规定，HTML文档中的每个成分都是一个节点。
				整个文档是一个文档节点
				每个HTML标签是一个元素节点
				包含在HTML元素中的文本是文本节点
				每个HTML属性是一个属性节点
				注释属于注释节点
			通过DOM，可以访问HTML文档中的每个节点
				
			nodeName 属性将返回一个字符串，其内容是给定节点的名字。 
				如果节点是元素节点，返回这个元素的名称；
				如果是属性节点，返回这个属性的名称；
				如果是文本节点，返回一个内容为#text 的字符串； 
			nodeType 属性将返回一个整数，这个数值代表给定节点的类型 
			nodeValue 属性将返回给定节点的当前值 	如果节点是元素节点，返回null； 
				如果是属性节点，返回这个属性的值； 
				如果是文本节点，返回文本节点的内容

			childNodes:获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。（会默认把回车换行认为子节点)
			children：获取作为对象直接后代的 HTML 对象的集合(不包含文本)
			都是直接后代(儿子)，不包含孙子
			
			firstChild : 返回第一个子节点 
			lastChild : 返回最后一个子节点 
			parentNode : 返回一个给定节点的父节点
			nextSibling :获取该节点的下一个同级节点对象
			previousSibling :获取该节点的上一个同级节点对象
			Attributes : 获取对象标签属性的集合
			Elements :获取表单对象的下所有表单元素
			ALL :所有的HTML元素节点[直接与间接节点]
			
			
			
        -->
		<meta charset="utf-8" />
		<title>DOM</title>
	</head>
	<body>
		<div id="parent">
			parent
			<div>child1</div>
			<div>child2</div>
		</div>
		
		<form id="f1">
			
		</form>
		
		
		
	</body>
	<script>
		//通过js给表单添加输入框以及密码框，然后提交按钮
		var form = document.forms[0];
		
		//创建一个输入框
		var input = document.createElement("input");
		//设置input的type
		input.setAttribute("type","text");
		//创建元素之后必须添加到父节点后才能显示出来
		form.appendChild(input);//后添加的会显示在前面一点
		
		//把输入框替换成密码框
		var inputPass = document.createElement("input");
		//replaceChild(newnode,oldnode)：节点替换
		inputPass.setAttribute("type","password");
		form.replaceChild(inputPass,input);
		
		var table = document.createElement("table");
		var tr1 = document.createElement("tr");
		var tr2 = document.createElement("tr");
		tr1.innerHTML = "<td>aaa</td><td>1</td><td><button onclick='del(this)'>删除</button></td>";
		tr2.innerHTML = "<td>bbb</td><td>2</td><td><button onclick='del(this)'>删除</button></td>";
		table.appendChild(tr1);
		table.appendChild(tr2);
		document.body.appendChild(table);
		
		function del(curButton){
			//通过table 去删除tr，通过currentButton找到tr所在节点
			var tr = curButton.parentNode.parentNode;
			table.removeChild(tr);
			
		}
		
		
	</script>
</html>