javascript(二)——DOM基础

DOM概述

DOM定义

DOM（文档对象模型，Document Object Model）是W3C组织开发的一套便于操作XML和HTML的JavaScript方法，其将XML和HTML抽象成文档对象（Document），并将其中所有的标签和内容都抽象成对象（节点），利用面向对象的思对XML和HTML的操作。其中 Document 对象是DOM的顶层节点。
XML（扩展标记语言，Extensible Markup Language），主要用于信息的存储和传送，HTML也是一种XML。

DOM组成

• DOM核心：针对任何结构化文档的标准模型。
• XML DOM：针对 XML 文档的标准模型。
• HTML DOM：针对 HTML 文档的标准模型。

XML DOM和HTML DOM的关系

XML DOM ：用于 XML 的标准对象模型，用于 XML 的标准编程接口，中立于平台和语言的 W3C 标准。XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。换言之：XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。

HTML DOM ：HTML 的标准对象模型，HTML 的标准编程接口的 W3C 标准。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

其中，HTML DOM 是 XML DOM 的扩展，换言之，XML DOM 的方法均可以使用在HTML中，而反过来，HTML DOM 的方法不可以使用在XML中。

树节点

1. DOM树

对于HTML文档，DOM将所有的标签全部抽象成节点，并且节点间有严格的等级关系，以此形成一个DOM树。

如：

    
    


    
DOM Lesson one
    
Hello world!

其对应的DOM树

其中，每一行都是兄弟节点，绿色线条代表父子关系，而红色线条也是父子关系的一种，但是无法通过父亲查找孩子而找到。

2. 节点

2.1 节点分类
由DOM树可见，节点分为三种：元素节点（标签），属性节点和文本节点。

2.2 节点属性
nodeName，nodeValue，nodeType

2.3节点关系

节点关系

DOM的使用

1. 读取子节点的内容

    
    
    


    

        

            北京
            
海淀
 奥运
        
        

            上海
        
        

        
    

2.获取孙子节点的内容
获取select下面option的文本内容。

HTML：

    
    
    


    
        本科
        专科
        高中
        小学
        幼儿园
    

实现方法：

var optNodes = document.getElementById("edu").options;
for (var i = 0; i < optNodes.length; i++) {
    var n = optNodes[i];
    alert(n.getAttribute("value"));
}