飞道科技

飞道科技文档总汇

DOM

概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

引自百度百科

HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

学习这一章的概念，需要你具备一些网页编程的一些基本技能，这包括html,javascript，甚至需要具备一部分css的基础知识。

结构

以下为例：

<html>
	<head>
		<title></title>
	</head>
	<body>
	</body>
</html>

每一个html页面都是一棵Dom树，它的根节点是html，里面通常至少有两个孩子节点（通常我们也称之为子节点）：head和body。html是head和body的父亲节点，head和body互为兄弟节点。而head和body又会是其它节点的父亲节点，如head为title的节点，而html则为title的祖先节点。

html

每一个html元素都具有以下几部分内容：

  1. 标签名字(tagName)
  2. 属性(attributes)
  3. 内容(content)
<tagName attribute-name="attribute-value">Content</tagName>

特别需要提醒注意的是：html中某个节点的属性(attribute)和对应dom对象的属性(property)是不一样的，尽管有时候它们很像(像input的value和id属性),为了说明这一点，我们看下面这个简单的例子：

<script>
	function test() {
		const input = document.getElementById('t');
		alert(input.value);
		input.value = 'lalala';
		alert(input.value);
		alert(input.getAttribute('value'));
	}
</script>
<input id="t" type="text" value="abc" />
<input type="button" value="test" onclick="test()">

上例中，id为t的一个文本框中初始显示值为它的value属性(attribute)，我们在一个用户事件中，通过JavaScript脚本修改它的value属性（property)值为lalala，这时候我们在页面中看到该文本框中显示的值也已变成为了lalala,并且如果我们再获取它的value属性（property）的时候，它的值也确实改变成为了lalala。

但是，如果我们在浏览器的开发者工具中查看这个节点，我们会看到，它的value属性（attribute）依然是abc不变,通过该dom对象的getAttribute方法获取它的value属性(attribute)值也是abc。