html dom的理解

DOM (Document Object Model）文档对象模型，将html文档以及文档中的内容转换成node接口，以便外部（如js）操作（如修改html内容等）。

　　node节点的类型：

　　　　DocumentType（如下）、

　　　　Document（一个文档对应一个对象）、

　　　　Element（html、head、body等）、

　　　　Text（html文档中，标签之间，如下的div1和divc1之间虽然看着没有什么，其实是有一个内容为''的Text节点）

　　　　Attribute（标签的属性，如id=”div1“就是一个属性节点）

　　　　Comment（注释）

　　　　DocumentFragment （没见过）

<!DOCTYPE html>                  DocumentType   
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="div1">
            <div class="divc1">
                <div id="div">
                    文本节点
                </div>
                <!--注释--></div>
        </div>
    </body>
</html>

DOM是浏览器对外提供的一个编程接口，包含的接口中我们要用到的关系如下：

　　NodeList

　　HTMCollection

　　Node

　　　　Document

　　　　Element

　　　　Attr

　　Attr的使用是在Element中有个attributes属性，返回一个类数组，里面的对象都是Attr。

　　这里需要注意的是Node和Element连个接口，我们在前端开发中使用js操作html标签对应的对象，使用的都是Element接口的属性和方法（自己这样认为）。

更多见：http://www.w3help.org/zh-cn/causes/SD9024

http://javascript.ruanyifeng.com/dom/element.html(新地址：https://wangdoc.com/javascript/）

Node接口的属性与方法：

　　属性：

　　　　nodeType

　　　　nodeName

　　　　nodeValue

　　　　textContent

　　　　nextSibling

　　　　previousSibling

　　　　firstChild

　　　　lastChild

　　　　childNodes

　　　　parentNode

　　　　parentElement

　　　　ownerDocument

　　　　baseURI

　　方法：

　　　　appendChild()

　　　　insertBefore()

　　　　replaceChild()

　　　　removeChild()

　　　　contains()

　　　　normalize()

　　　　compareDocumentPosition()

　　　　cloneNode()

　　　　hasChildNodes()

　　　　isEqualNode()

Element：

　　getAttribute(name)

　　setAttribute(name,value)

　　removeAttribute(name)

　　getElementsByTagName()

　　getElementsByClassName()

　　getElementById()

Document:

HTML:

　　HTMLDocument：

　　　　title,referrer,URL,domain,body,images,applets,forms,links,anchors,cookie

　　　　open(),close(),write(),writeln(),getElementsByName()

　　HTMLElement:

　　　　id,title,lang,dir,className