DOM（文档对象模型）

一.DOM简述

DOM 是一项 W3C (World Wide Web Consortium) 标准。

DOM 定义了访问文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

• Core DOM - 所有文档类型的标准模型
• XML DOM - XML 文档的标准模型
• HTML DOM - HTML 文档的标准模型

而其中HTML DOM 是关于如何获取，更改，添加，删除HTML元素的标准。我主要介绍的也是HTML DOM.

二.编程界面 

HTML DOM 能够通过 JavaScript 进行访问（其他编程语言也可以）。

在 DOM 中，所有 HTML 元素都被定义为对象。

编程界面是每个对象的属性和方法：

属性是我们能够获取或设置的值（就比如改变 HTML 元素的内容）。

方法是我们能够完成的动作（比如添加或删除 HTML 元素）。

三.document对象

HTML DOM Document 对象

文档对象代表我们的网页。

如果我们希望访问 HTML 页面中的任何元素，那么总是从访问 document 对象开始。

接下来就介绍一些通过ducument对象实现的操作。

1.html元素查找

方法	描述
document.getElementById(id)	通过元素id查找
document.getElementsByTagName(name)	通过标签名查找
document.getElementsByClassName(name)	通过类名查找

2.html元素内容修改

• 改变元素的inner HTML
• 改变元素属性值
• 改变元素样式

3.添加或删除元素 

• 创建html元素
• 删除html元素
• 添加html元素
• 替换html元素
• 写入html输出流

4.添加事件处理程序 

向 onclick 事件添加事件处理程序：document.getElementById(id).onclick = function(){code} 

四.DOM查找html元素 

方式一：通过元素id

方式二：通过标签名

方式三：通过类名

方式四：通过CSS选择器

方式五：通过HTML对象选择器

    var content = document.getElementById("id");  //id
    var content = document.getElementsByName("h1"); //标签，返回动态集合
    /*查找某一元素中的另一个元素，方法一*/
    var x = document.getElementById("contend");
    var y = x.getElementsByTagName("p");
    var content = document.getElementsByClassName("intro");//类名，返回为集合
    var content = document.querySelectorAll("p.intro");//CSS选择器
    var content = parent.querySelector("selector");/*selector支持一切css中选择器，
    如果匹配有多个，则返回第一个；如为SelectorAll 返回的为非动态集合*/
    /*在forms集合中，显示所有的元素值，HTML对象选择器*/
    var x = document.forms["frm1"];
    var text = "";
     var i;
    for (i = 0; i < x.length; i++) {
        text += x.elements[i].value + "<br>";
    }
    document.getElementById("demo").innerHTML = text;

通过讲解，了解了元素增删改写的详细操作，对DOM中元素的了解更加全面了。发现DOM中还有事件没学习，了解了一些常见事件，如：

• 当用户点击鼠标时
• 当网页加载后
• 当图像加载后
• 当鼠标移至元素上时
• 当输入字段被改变时
• 当 HTML 表单被提交时
• 当用户敲击按键时

以及应该如何将这些事件写入网页 。