DOM(Document Object Model文档对象模型)用法

DOM（Document Object Model，文档对象模型）描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。这使得JavaScript操作HTML，不是在操作字符串，而是在操作节点，极大地降低了编程难度。编写例子整体感知一下这个事儿。

学习DOM，说白了就是学习document对象。
document.getElementById()
document.getElementsByTagName()

JS可以更改HTML的任何属性，方法是两种：点语法 和 setAttribute()、getAttribute()。
1oImg.setAttribute("src","images/2.jpg");
2等价于
oImg.src = “images/2.jpg”;

setAttribute和点语法有一丢丢不一样：
第一，所有自定义的属性，都不能通过点语法得到
1<div dongcidaci=”38”></div>

1alert(oBox.dongcidaci);	 //undefined，自定义的属性，不是w3c的属性，都不能用点语法
2alert(oBox.getAttribute("dongcidaci"));	//38


第二，所有的行内样式，点语法.style得到的是一个样式对象。我们可以通过.style.border继续得到小样式。但是getAttribute()得到的是字符串
1var oDiv = document.getElementById("box");
2
3console.log(typeof oDiv.style);   //object
4console.log(typeof oDiv.getAttribute("style"));   //string

第三，getAttribute()不需要避讳，直接
1oDiv.getAttribute(“class”); //就行了

点语法的效率远高于getAttribute()、setAttribute()。
所以，如果我们是要读取自定义的属性，必须dongcidaci属性，偶尔用一次getAttribute，除此之外，都用点语法。

通过点语法.style能够得到所有样式的封装  注意，只能得到行内样式，所有写在css内嵌的、外联的，一律不能得到。需要我们后面学习的知识，得到计算后样式。