JS DOM 编程艺术(第2版)读书笔记 第3章 DOM

前面两章都是概念性的东西，基本是找书的原文记录。从本章开始，更多是用一些实例来详细说明DOM的常用的操作和方法。

首先解释一下什么是DOM(Document Object Model),文档对象模型。DOM结构很像我们的家谱树，用parent(父)、child(子)、sibling(兄弟)等来表示家庭中的成员。

要获取一个DOM文档中的成员的有以下几个方法，通过节点ID，通过节点名，通过类名。

例如：

<div id="div1" class="divClass"></div>

<script type="text/javascript">

document.getElementById("div1"); //返回节点对象

document.getElementsByTagName("div");//返回div集合

document.getElementsByClassName("divClass");//返回className为divClass集合

</script>

其中getElementsByClassName 是HTML5中新加的方法，在一些浏览器中还没有的到使用，所以慎用该方法。

写自己的getElementsByClassName:

<script type="text/javascript">

function getElementsByClassName(node, classname){

if(node.getElementsByClassName){

return node.getElementsByClassName(classname);

}else{

var arr = [];

var nodes = node.getElementsByTagName("*");

for(var i = 0, l = nodes.length; i < l; i++){

if(nodes[i].indexOf(classname) != -1){

arr.push(nodes[i]);

}

}

return arr;

}

}

</script>

获取和设置节点属性的方法分别为：

obj.setAttribute(attr);

obj.getAttribute(attr);

值得一提的是getAttribute获取href属性时在IE6和IE7下得到的是绝对路径，在其他浏览器下得到是相对路径。

例如：

<a id="home" href="/doc/index.html">home</a>

<script type="text/javascript">

var home = document.getElementById("home");

var url = home.getAttribute("href");

//标准浏览器下返回的是 /doc/index.html

//IE6和IE7下返回的是(如开有本地服务器) http://localhost/doc/index.html
alert(url);

</script>

小结：

本章学习，DOM最基本的5个方法，分别为：

获取节点：

getElementById();

getElementsByTagName();

getElementsByClassName(); // 只有新的浏览器支持该方法，写自己的getEelementsByClassName

getAttribute(); // IE6和IE7 获取href和标准浏览器下不一致

setAttribute();