读解JavaScript_DOM编程艺术笔记（二）——DOM的基本方法与属性

DOM
DOM可以用一个家谱树来形容它，当然，把文档称为“节点树”大概会更准确


（一）节点
1．元素节点（element node）
a)标签的名字就是元素的名字，比如p，ul等等
b)html元素是我们节点树的根元素
2.文本节点(text node)
顾名思义，就是包含文本内容的一种节点，被元素节点包含
3.属性节点
属性节点用来对元素做出更具体的描述。并非所有的元素都包含属性，但所有的属性都被元素包含。

（二）DOM方法：获取元素
1.getElementById()
返回一个与那个有着给定id属性值的元素节点对应的对象
它是document对象特有的函数，且只有id参数,id值必须放在引号里
如：document.getElementById(“purchases”)
2.getElementsByTagName()
返回一个对象数组，它的参数是标签的名字
如：document.getElementByTaName(“li”)
可以用length属性查出这个数组的元素个数
因此也可以用alert(document.getElementsByTagName(“*”).length);来查看文档中有多少元素节点
3.getElementsByClassName()
可以通过该方法用class属性中的类名来访问元素，不过由于该方法比较新，某些DOM实现里可能还没有，因此在使用的时候要当心。
举个栗子：
alert(document.getElementsByClassName(“important sale”).length);
我们会看到结果显示为1，表示只有一个元素匹配，而事实上，class名没有important sale，但有sale important。
由此可见，该方法中的类名实际顺序不重要。
由于方法较新，为了让老浏览器也能有类似该方法的功能，于是有了类似函数

    function getElementsByClassName(node,classname){        //node为DOM中的搜索起点，classname为搜索类名
        if(node.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){
        results[results.length] = elems[i];
        }
    }
    return results;
    }
}

（三）DOM方法：获取和设置属性

1.getAttribure
是个函数，但只有一个参数——我们打算查询的属性的名字，可以和getElementsByTagName方法连用
如：object.getAttribute(attribute)

举个栗子：

var paras = document.getElementsByTagName(“p”);
for(var i =0; i<paras.length;i++){
    alert(paras[i].getAttribute(“title”));
}

若没有相关属性则返回null值，若想让它只有在属性有值的情况下才弹出消息，则：

var paras = document.getElementsByTagName(“p”);
for (var i = 0;i< paras.length;i++){
    var title_text = paras[i].getAttribute(“title”);
    if(title_text ) alert(title_text);
}

2.setAttribute
允许我们对属性节点的值做出修改，也只能用于元素节点。当修改后，在浏览器的源代码查看里看到的仍将是改变前的属性值，这种表里不一的现象源自于DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。
如：object.setAttribute(attribute,value)

举个栗子：既可以增加属性值，也可以修改已有属性值，后者可用if(有值的属性节点)

var shopping = document.getElementById(“purchases”);
alert(shopping.getAttribute(“title”));      //修改前为空白
shopping.setAttribute(“title”,”a list of goods”);
alert(shopping.getAttribute(“title”));      //修改后将显示”a list of goods”消息