DOM模型概念和JavaScript访问和查找节点

发表于 | 分类于 |

1：DOM概念
Document,Object,Model文档对象模型，DOM模型给我们动态控制HTML提供了无限自由。
用途：例如不同时间显示不同网页，动态添加、修改，删除HTML元素等。
2、节点的概念
一个DOM文档是有很多个小的单元组成的一个大集合，这些小单元我们称为节点。

节点类型

3、节点类型
DOM中把节点分为十二种类型常用的有以下几种类型。
3.1、元素节点
3.2、属性节点
3.3、文本节点
3.9、document
3.11、文档片段(fragment)
例如：

1
<a href="http://www.baidu.com" title="百度网站">连接百度网站</a>

那么: a标签就是元素节点
href及title就是属性节点
中间的文本[连接百度网站]，就是文本节点。

访问节点

4：访问节点
认识节点后，如何控制他们就是dom模型章节的重点，DOM中常用的访问节点的两个方法。
1、getElementById()
2、getElementsByTagName()
getElementById(ID)返回指定ID的元素对象，标准的HTML中要求ID必须唯一。
代码示例：

1
2
3
var obj1 = document.getElementById("Dh1");
var obj2 = document.getElementById("Dh2");
alert(obj1.innerText + obj2.textContent);

IE老版本只认： innerText，火狐只认：textContent， 新版本都认：textContent
注意：ID号请不要和其他元素的name重名，在IE老浏览器中可能会产生错误。
3.getElementsByTagName(TagName);
功能：获取相同元素名的对象列表到数组中。
代码示例：

1
2
var hlist = document.getElementsByTagName("h1");
alert(obj1.innerText + obj2.textContent);

用途举例：动态批量修改样式

for(p in hlist){
    hlist[p].style.color="#ff0000";
    hlist[p].style.border="5px #ff0000 solid";
    hlist[p].style.width = "300px";
    hlist[p].style.borderRadius = "30px";
}

注意：很多JS代码需要HTML文档加载完毕后才能正确获取对应元素，所以一般都把JS放到最后,或用onload事件判断页面是否加载完毕。