javascript学习笔记其二 | 青训营

20、DOM

（1）什么是DOM?

DOM (文档对象模型)

DOM是W3C(万维网联盟)的标准，是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

对网页进行增删改查的操作。

（2）DOM查找

1、按id属性查找

只用于精确查找一个元素

getElementById只能用在document上

2、按标签名查找

不仅查直接子节点，而且查所有子代节点

返回一个动态集合

即使只找到一个元素，也返回集合；必须用[0],取出唯一元素

3、通过name属性查找

可以返回DOM树中具有指定name属性值的所有子元素集合

4、通过class查找

查找父元素下指定class属性的元素

（3）DOM修改

1、读取属性值

2、修改属性值

3、判断是否包含指定属性

返回 true 或 false

4、移除属性

5、修改样式

（4）DOM添加

在DOM中，添加元素有三步：

创建空元素

设置关键属性

将元素添加到DOM树中

1、创建空元素

2、设置关键属性

在创建好空元素之后要给空元素设置样式

（1）设置关键属性 元素.属性名

注意：element.属性对class属性无效，因为class可能有多个，这个时候用element.setAttribute(“class”,value)；来设置属性，element.getAttribute(“class”)；来访问属性.

（2）设置关键样式

3、将元素添加在DOM树中

(1) parentNode .appendChild(childNode)

(2) parentNode.insertBefore(newChild,pos)

用于在父元素中的指定子节点之前添一个新的子节点：

由于每次修改DOM树都会展开搜索一遍（layout）这样一来会导致时间空间开销，所以我们尽量在插入之前处理好子节点以达到优化的目的 :

(1)若同时创建父元素和子元素时，在内存中先将子元素添加到父元素节点上，再将父节点插入DOM树中。

（2）若只添加多个同级子元素，我们可以先将所有子元素临时添加到一个虚拟文档片段中（即为临时父节点），然后将文档片段整体添加到页面中:

1、先创建文档片段：

2、将子元素加入frag中

3、将frag插入到DOM中

append之后frag会自动释放，不会占用元素。

//var arr=document.querySelectorAll(".page");
var arr=document.getElementsByClassName("page");//通过css选择器或类名来查找
for(var i=0;i<arr.length;i++)
{
for(var j=0;j<4;j++)
{
	for(var k=0;k<4;k++)
	{
		//创建元素
		var divs=document.createElement("div");
		divs.style.cssText="width:100px;height:100px;border:1px solid white;position:absolute;background-image:url(images/"+(i+1)+".png);background-size:400px 400px;box-shadow:0px 0px 50px white";
		
		divs.style.top=j*100+"px";
		divs.style.left=k*100+"px";
			
		divs.style.backgroundPositionX=-k*100+"px";
		divs.style.backgroundPositionY=-j*100+"px";

		arr[i].appendChild(divs);
	}
}
}