标签：

操作文档对象模型

DOM 结构树    

　　文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可拓展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTMl和XML文档是通过说明部分定义的)。

　　分为：

　 1.元素节点
    2.文本节点
    3.属性节点
        不属于元素节点的子节点
    4.文档节点(document)

处理元素节点
    method
    1.document.getElementById(); //根据ID
    2.document.getElementsByTagName(); //根据标签名
        返回名为NodeList的DOM对象，使用时建议先通过length属性检查其长度。
        获取节点有两种可选：
            a. 使用item方法
            b. 使用数组下标
    3.document.getElementsByClassName(); //根据Class,作为新成员，浏览器支持情况暂不太好
    4.querySelector()、querySelectorAll(); //通过CSS选择器,亦为新成员
        前者返回第一个匹配的元素，后者返回NodeList。
        e.g document.querySelector("#header");

处理属性节点
    method
    1.getAttribute(); //获取属性
        建议先使用hasAttribute();
        e.g document.getElementById("pl").getAttribute("class");
    2.setAttribute(); //设置属性
    3.removeAttribute(); //移除属性
        建议先使用hasAttribute();
    4.hasAttribute();

处理文档节点
    直接通过innerHTML属性
    e.g

　　　a.document.getElementById("pl").innerHTML;
        b.document.getElementById("pl").innerHTML("<p>hello world</p>");

遍历DOM
    method
    1.parentNode;
        e.g document.getElementById("pl").parentNode.setAttribute("class","liu");
    2.previousSibling;
    3.nextSibling;
    4.firstChild;
    5.lastChild;
        访问首尾两个子节点时，由于空白的原因，往往未必返回预期的子元素

DOM中动态添加移除节点
    method
    1.createElement();
    2.createTextNode();
    3.appendChild();
    4.removeChild();
    新增元素
    1.创建元素
    2.填充内容
    3.放入DOM
    e.g
        var tar=document.getElementById("pl");
        var p=document.createElement("p");
        var tex=p.createTextNode("hello world");
        tar.appendChild(tex);
    移除元素
    e.g
        var tar=document.getElementById("pl");
        var t=document.getElementById("pll");
        tar.removeChild("t");

JS学习总结之操作文档对象模型

标签：

原文地址：http://www.cnblogs.com/zhaoww/p/4909247.html