本文共 5838 字，大约阅读时间需要 19 分钟。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 以树结构表达 HTML 文档。::::::::::::::::::::::::::::::::::::::::::::::::::HTML DOM 简介。。。。。。。。。什么是 DOM？DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准："W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"W3C DOM 标准被分为 3 个不同的部分：核心 DOM - 针对任何结构化文档的标准模型XML DOM - 针对 XML 文档的标准模型HTML DOM - 针对 HTML 文档的标准模型编者注：DOM 是 Document Object Model（文档对象模型）的缩写。http:/ /www.iis7.com/a/lm/gjcpmcx/
。。。。。。。。。。什么是 XML DOM？XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。。。。。。。。。。。什么是 HTML DOM？HTML DOM 是：HTML 的标准对象模型HTML 的标准编程接口W3C 标准HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。::::::::::::::::::::::::::::::::::::::::::::::::::::::::HTML DOM 节点在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。。。。。。。。。。。DOM NodesDOM 节点根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::HTML DOM 方法HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。。。。。。。。。。。编程接口可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是您能够执行的动作（比如添加或修改元素）。属性是您能够获取或设置的值（比如节点的名称或内容）。。。。。。。。。。。getElementById() 方法getElementById() 方法返回带有指定 ID 的元素。。。。。。。。。。HTML DOM 对象 - 方法和属性一些常用的 HTML DOM 方法：getElementById(id) - 获取带有指定 id 的节点（元素）appendChild(node) - 插入新的子节点（元素）removeChild(node) - 删除子节点（元素）一些常用的 HTML DOM 属性：innerHTML - 节点（元素）的文本值parentNode - 节点（元素）的父节点childNodes - 节点（元素）的子节点attributes - 节点（元素）的属性节点。。。。。。。。。。。。现实生活中的对象某个人是一个对象。人的方法可能是 eat(), sleep(), work(), play() 等等。所有人都有这些方法，但会在不同时间执行它们。一个人的属性包括姓名、身高、体重、年龄、性别等等。所有人都有这些属性，但它们的值因人而异。。。。。。。。。。。。。。一些 DOM 对象方法方法 描述getElementById() 返回带有指定 ID 的元素。getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。appendChild() 把新的子节点添加到指定节点。removeChild() 删除子节点。replaceChild() 替换子节点。insertBefore() 在指定的子节点前面插入新的子节点。createAttribute() 创建属性节点。createElement() 创建元素节点。createTextNode() 创建文本节点。getAttribute() 返回指定的属性值。setAttribute() 把指定属性设置或修改为指定的值。:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::HTML DOM 属性属性是节点（HTML 元素）的值，您能够获取或设置。。。。。。。。。。。。编程接口可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是您能够执行的动作（比如添加或修改元素）。属性是您能够获取或设置的值（比如节点的名称或内容）。。。。。。。。。。。。innerHTML 属性获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。innerHTML 属性可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>。。。。。。。。。。。。nodeValue 属性nodeValue 属性规定节点的值。元素节点的 nodeValue 是 undefined 或 null文本节点的 nodeValue 是文本本身属性节点的 nodeValue 是属性值nodeName 属性规定节点的名称。nodeName 是只读的元素节点的 nodeName 与标签名相同属性节点的 nodeName 与属性名相同文本节点的 nodeName 始终是 #text文档节点的 nodeName 始终是 #document注意： nodeName 始终包含 HTML 元素的大写字母标签名。。。。。。。。。。。。。nodeType 属性nodeType 属性返回节点的类型。nodeType 是只读的。比较重要的节点类型有：元素类型 NodeType元素 1属性 2文本 3注释 8文档 9:::::::::::::::::::::::::::::::::::::::::::::::::::::::::HTML DOM 访问访问 HTML DOM - 查找 HTML 元素。。。。。。。。。。。访问 HTML 元素（节点）访问 HTML 元素等同于访问节点您能够以不同的方式来访问 HTML 元素：通过使用 getElementById() 方法通过使用 getElementsByTagName() 方法通过使用 getElementsByClassName() 方法。。。。。。。。。。getElementById() 方法getElementById() 方法返回带有指定 ID 的元素引用：语法：node.getElementById("id")。。。。。。。。。。getElementsByTagName() 方法getElementsByTagName() 返回带有指定标签名的所有元素。语法：node.getElementsByTagName("tagname")。。。。。。。。。。The getElementsByClassName() Method如果您希望查找带有相同类名的所有 HTML 元素，请使用这个方法：document.getElementsByClassName("class")::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::HTML DOM - 修改修改 HTML = 改变元素、属性、样式和事件。。。。。。。。。。。修改 HTML 元素修改 HTML DOM 意味着许多不同的方面：改变 HTML 内容改变 CSS 样式改变 HTML 属性创建新的 HTML 元素删除已有的 HTML 元素改变事件（处理程序）。。。。。。。。。。创建 HTML 内容，改变元素内容的最简单的方法是使用 innerHTML 属性。改变 HTML 样式，通过 HTML DOM，您能够访问 HTML 元素的样式对象。创建新的 HTML 元素，如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::HTML DOM - 修改 HTML 内容通过 HTML DOM，JavaScript 能够访问 HTML 文档中的每个元素。。。。。。。。。。。使用事件HTML DOM 允许您在事件发生时执行代码。当 HTML 元素"有事情发生"时，浏览器就会生成事件：在元素上点击加载页面改变输入字段::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::HTML DOM - 元素添加、删除和替换 HTML 元素。。。。。。。。。。。创建新的 HTML 元素 - createElement()，如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。创建新的 HTML 元素 - insertBefore()。。。。。。。。。。删除已有的 HTML 元素，如需删除 HTML 元素，您必须清楚该元素的父元素。。。。。。。。。。能否在不引用父元素的情况下删除某个元素？很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素。。。。。。。。。。。替换 HTML 元素，如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::HTML DOM - 事件HTML DOM 允许 JavaScript 对 HTML 事件作出反应。。。。。。。。。。。。对事件作出反应当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：οnclick=JavaScriptHTML 事件的例子：当用户点击鼠标时当网页已加载时当图片已加载时当鼠标移动到元素上时当输入字段被改变时当 HTML 表单被提交时当用户触发按键时。。。。。。。。。。。。HTML 事件属性如需向 HTML 元素分配事件，您可以使用事件属性。。。。。。。。。。。。onload 和 onunload 事件当用户进入或离开页面时，会触发 onload 和 onunload 事件。onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。onload 和 onunload 事件可用于处理 cookies。。。。。。。。。。。。onmouseover 和 onmouseout 事件onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。。。。。。。。。。。。onmousedown、onmouseup 以及 onclick 事件onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::HTML DOM 导航通过 HTML DOM，您能够使用节点关系在节点树中导航。。。。。。。。。。。。HTML DOM 节点列表getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。注意：下标号从 0 开始。。。。。。。。。。。。HTML DOM 节点列表长度length 属性定义节点列表中节点的数量。。。。。。。。。。。。导航节点关系您能够使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航。firstChild 属性可用于访问元素的文本。。。。。。。。。。。DOM 根节点这里有两个特殊的属性，可以访问全部文档document.documentElement - 全部文档document.body - 文档的主体。。。。。。。。。。。childNodes 和 nodeValue除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。转载于:https://blog.51cto.com/13941970/2176911