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();