Javascript中的DOM对象

最新推荐文章于 2023-05-12 19:23:06 发布

码农米格

最新推荐文章于 2023-05-12 19:23:06 发布

阅读量242

点赞数

分类专栏： Web 文章标签： javascript

本文链接：https://blog.csdn.net/e_mmm0629/article/details/104712739

版权

Web 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

Javascript中的DOM对象

DOM及其作用

（1）文档对象模型DOM（Document Object Model），根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。
（2）它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。
（3）DOM把网页和脚本以及其他的编程语言联系了起来。

以下内容均是针对HTML DOM

HTML DOM（针对HTML的标准规范）

（1）HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。
（2）脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素（一个HTML标签）都对应着一个对象。
（3）网页上的标签是一层嵌套的，最外面的一层是，文档对象模型也这样一层嵌套着，但是通常被理解成一棵树的形状。树根是window或document对象，相当于最外层的标签的外围，也就是整个文档。树根之下是子一级的对象，子对象也有它自己的子对象，除了根对象以外，所有的对象都有自己的父对象，同一对象的子对象之间就是兄弟的关系。（和数据结构中的树是一个意思，没学过也不要紧看下图）
（4）节点彼此都有等级关系。
（5）HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元
素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出
枝条，直到处于这棵树最低级别的所有文本节点为止。
（6）下面这个图片表示一个文档树（节点树）：
在这里插入图片描述

HTML DOM中节点的分类

（1）根据DOM的规定，HTML文档中的每个成分都是一个节点。

整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每个HTML属性是一个属性节点
注释是注释节点

（2）通过DOM，可以访问HTML文档中的每个节点。

DOM的属性与方法

Javascript DOM的属性：

childNodes:获取作为指定对象直接后代的 HTML 元素和 TextNode对象的集合。
children：获取作为对象直接后代的 DHTML 对象的集合
firstChild : 返回第一个子节点
lastChild : 返回最后一个子节点
parentNode : 返回一个给定节点的父节点
nextSiblng :获取该节点的下一个同级节点对象
previousSiblng :获取该节点的上一个同级节点对象
Atributes : 获取对象标签属性的集合
Elements :获取表单对象的下所有表单元素
ALL :所有的HTML元素节点[直接与间接节点]

Javscript DOM的方法（这里举出几个常用方法，更多的方法请自行百度）

createElement(elment) ：创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针
createTextNode(string) ：创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针：
appendChild(node) ：插入节点
removeChild(node) ：将从一个给定元素利删除一个子节点，返回一个指向已被删除的子节点的引用指针。
hasChildNodes：用来检查一个给定元素是否有子节点，返回bolean值
replaceChild(newnode,oldnode)：节点替换
setAribute(key,value)：为给定元素节点添加一个新的属性值或是改变它的现有属性
getAribute(key)：返回一个给定元素的一个给定属性节点的值
getElementById():寻找一个有着给定id属性值的元素，返回一个元素节点
getElementsByTagName():用于寻找有着给定标签名的所有元素

实例演示：（这里我将`<head></head>`和`<body></body>`分开）

实现效果：

在这里插入图片描述

实现代码：

<head>
	<meta charset="UTF-8">
	<title></title>
	<script>
		function test01(){
			// 表格 动态添加
			// 1、先获取父容器
			var table = document.getElementById("mytable");
			// 2、创建tr
			var tr = document.createElement("tr");
			// 3、创建td
			var td1 = document.createElement("td");
			var td2 = document.createElement("td");
			var td3 = document.createElement("td");
			var td4 = document.createElement("td");
			
			// 4、给td设置相应的值,因为没有属性所以不能使用setAttribute(),可以使用innerText innerHtml
			td1.innerHTML = "新增的值";
			td2.innerHTML = "新增的值";
			td3.innerHTML = "新增的值";
			td4.innerHTML = "<input type='button' value='删除'οnclick='deleteTr(this.parentNode.parentNode)' />";
			// parentNode表示父节点
			// 5、将td添加进它的父节点tr中
			tr.appendChild(td1);
			tr.appendChild(td2);
			tr.appendChild(td3);
			tr.appendChild(td4);
			// 6、将tr添加进它的父节点table
			table.appendChild(tr);
		}
		// 删除 删除的对象是tr，因此在方法中传一个tr的参数
		function deleteTr(tr){
			var table = document.getElementById("mytable");
			table.removeChild(tr);
		}
	</script>
</head>

这里HTML标签之间的树状关系如图所示：
在这里插入图片描述
具体用到方法包括：getElementById()、createElement()、appendChild()、removeChild()

<body>
	<div id="d1">
		<input type="button" value="动态添加表格" onclick="test01()"/>
		<table id="mytable" border="1px">
			<tr>
				<td>第一列</td>
				<td>第二列</td>
				<td>第三列</td>
				<td>操作</td>
			</tr>
		</table>
	</div>	
</body>
</html>

通过HTMLDOM，可以更好的去操控和掌握网页的设计。这样方便容易理解DOM的作用：DOM把网页和脚本以及其他的编程语言联系了起来。

码农米格

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript中的DOM对象

Javascript中的DOM对象DOM及其作用（1）文档对象模型DOM（Document Object Model），根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。（2）它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。（3）DOM把网页和脚本以及其他的编程语言联系了起来。以下内容均是针对HT...
复制链接

扫一扫