DOM 笔记

DOM: D: document; O: Object; M: Model

节点：文档是由节点构成的集合.

<p title=”hello”> Hello World</p>

1. 元素节点: <p> 就是元素, 显而易见，元素可以包含其他元素。

2. 文本节点：Hello World 就是文本节点，一般放在元素内部。

3. 属性节点：title=”hello” 就是属性节点，元素不一定含有属性，但属性一定被元素包含。

获取节点：

1. getElementById: 这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。它是document对象特有的函数：document.getElementById(id);

2. getElementsByTagName方法返回一个数组对象，每个对象对应着文档里有着给定标签的一个元素。element.getElementById(Tag);Tag:标签的名字。

       getElementById 与 getElementsByTagName混合使用：

var selectId = document.getElementById(“hello”);

Var items = selectId .getElementByTagName(“*”);

可以得到id属性值是hello的元素下包含的元素对象

3. getElementsByClassName (Html5 Dom 新加)：通过class属性中的类名来访问元素。也可与getElementById混合使用。

一个公用方法通过传入node节点和classname class名可以返回对应的class对象数组,以便适用新老浏览器。

function getElementsByClassNameAndNode(node, className) {
    if (node.getElementsByClassName) {
        return node.getElementsByClassName(className)
    } else {
        var result=new Array();
        var ele= node.getElementsByTagName("*");
        for(vari=0;i<ele.length;i++) {
            if (ele[i].className.indexOf(className)!=-1) {
                result[result.length] =ele[i];
            }
        }
        return result;
    }
}

 

获取和设置属性：getAttribute, setAttribute

getAttribute(attribute) 和 setAttributu(attribute, value)不属于document对象，只能通过元素节点对象调用.

注意：通过setAttribute对文档作出修改后，在通过查看代码去查看文档的源代码时看到的依然是改变前的属性值，所以setAttribute做出的修改不会反映在文档本身的源代码里。这种现象源自DOM的工作模式：先加载静态内容，再动态刷新，动态刷新不影响文档静态的内容。即DOM的特性：对页面内容刷新却不需要在浏览器里刷新页面。