【JavaScript DOM编程艺术】- DOM

DOM

D：document，即文档，也就是你编写的网页文档。

O：object，即对象。在JS中对象分为三种类型

• 用户定义对象
• 内建对象
• 宿主对象：由浏览器提供的对象

M：model，即模型。即HTML文档的节点树模型。

---

节点

• 元素节点
• 文本节点
• 属性节点

<p title="pretty cool">今天下大雨</p>

---

获取元素

1. getElementById，返回一个指定Id的元素。
2. getElementsByTagName，返回一个指定Tag的元素数组。
3. getElementsByClassName，返回一个指定Class的元素数组。[HTML5 DOM新增]

旧浏览器替代方法

function getElementsByClassName(node, classname){
    if(getElementsByClassName){
        //使用现有方法
        return node.getElementsByClassName(classname);
    }else{
        var results = new Array();
        var elems = node.getElementsByTagName("*");
        for(var i=0; i < elems.length; i++){
            if(elems[i].className.indexOf(classname) != -1){
                result[result.length] = elems[i];
            }
        }
        return results;
     }
   }

获取和设置属性

1. getAttribute，获取元素节点对象中的某个属性。
   object.getAttribute(attribute)
2. setAttribute，设置元素节点对象中的某个属性。
   object.setAttribute(attribute, value)

DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面。