概念

dom document object model 文档对象模型

定义了表示和修改文档的方法，也就是一些操作html和xml方法的集合（操作不了css样式表，但可以通过操作HTML属性间接更改样式）

document

document是指啥，我们随意打开一个html文件，在控制台打印document，发现其代表整个文本。

为啥叫文档对象，因为document是一个对象，可以在控制台打印document.__prototype看其构造函数的原型看看。

从这里可以看出原型链为Node --- Document --- HTMLDocument ----------> document

document.body --- 整个body
document.head --- 整个head
document.documentElement --- 整个html

节点

元素节点 ---- 1
文本节点 ----- 3
document ----- 9

节点的一个属性 nodeType 节点类型，值即为数字值

document查询元素常用方法

getElementsByTagName
getElementsByClassName

这两个方法选出来的为类数组，因此指定某个元素一定要加上序号，如

var div = document.getElelementsByTagName("div")[0]

选取所有元素：document.getElelementsByTagName("*")。

扫描二维码关注公众号，回复： 9856242 查看本文章

查出来的结果为实时的。

querySelector("div > span strong") 选满足条件的第一个元素
getSelectorAll() 选满足条件的所有元素

按照css选择器来筛选元素，但查出来的结果不是实时的。

节点遍历

childNodes 子节点们

元素节点遍历

children 当前元素的子元素节点
nextElementSibling/previousElementSibling 后一个/前一个兄弟元素

元素节点增删

document.createElement()
div.appendChild()
div.remove()

注意：div为选出的元素

元素节点属性

div.innerHTML 取写HTML内容追加内容 div.innerHTML += "<p>hahahah</p>"
div.innerText 取写文本内容
div.SetAttribute("class","demo") div.SetAttribute("class")

DOM结构树

这个树结构有什么用呢？

getElementsById
getElementsByName

你会发现这两个方法只有document对象能使用，而下面四个方法document和某个ELEMENT元素均可使用。

getElementsByTagName
getElementsByClassName
querySelector
getSelectorAll

这是因为，在两个方法只在document的原型链上定义了，而四个方法即在document又在element上定义了。来看以下例子：

<div id = "app">
	<p id = "example">
		你好啊！
	</p>
</div>
<script>
	var div = document.getElementById("app").getElementsByTagName("p")[0];
	console.log(div.innerText); //你好啊
	var div1 = document.getElementById("app").getElementById("example");
	//报错 document.getElementById(...).getElementById is not a function
</script>

报错就是因为 getElementsById方法只有document对象才有，元素对象没有。

实际上我们在操作各个节点时使用的各种方法和属性，都是在使用DOM结构树原型链上定义好的各种方法，当然你也可以自己往原型链上加自己定义的方法，这样元素节点对象可以直接继承你定义的方法。

练习题

实现insertAfter方法

Element.prototype.insertAfter = function (b, a) {
	var nextElement = a.nextElementSibling;
	if(nextElement) {
		//不为最后一个元素，则插入到下一个元素之前
		this.insertBefore(b, nextElement);
	} else {
		//为最后一个元素则增加
		this.appendChild(b);
	}
}

脚本化css

div.style.backgroundColor = "white" 改变的是行间样式

获取计算样式（显示的样式）

<!-- 获取显示样式 -->
function getStyle(element, prop) {
	if (window.getComputedStyle) {
		return window.getComputedStyle(element, null)[prop];
	} else {
        //ie8及以下
		return element.currentStyle[prop];
	}
}

另外，开发中常用改变class属性值的方法来间接改变元素样式。