（二）文档对象模型（DOM），你只需知道这些就够…
2018-06-24 01:12:01来源：未知 阅读 ()
官方定义——应用程序编程接口（API）
文档对象模型是用于HTML和XML文档的应用程序编程接口，它定义文档的逻辑结构，以及访问和操作文档的方式。
"The Document Object Model (DOM) is an application programming interface (API) for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated." —— W3C DOM
“文档对象模型是用于HTML和XML文档的应用程序编程接口”
应用程序编程接口（Application Program Interface，简称API），就是“提供商”将一个功能的具体实现（业务逻辑）封装起来，只暴露给“客户”可供调用的编程接口。如果客户想使用某一功能，则只需调用该功能对应的编程接口，而无需关注于具体实现。打个比方，海尔生产空调，你购买空调后按照说明书操作空调就好，不需要知道空调是根据什么原理造出来的。
对于DOM而言，“提供商”指的就是实现DOM的开发者（比如，开发JavaScript引擎V8的工程师），“客户”指的就是使用DOM的开发者（比如，开发网站的前端工程师）。他们之间共同遵守的就是DOM规范。
因此，DOM规范同时约束它的实现者和使用者。DOM实现者必须实现规范中定义的所有接口，DOM使用者应该调用规范中相应的接口实现相应的功能。
如果你是实现者，需要关注如何实现DOM API；如果你是使用者，则只需关注如何使用DOM API。
“它定义文档的逻辑结构，以及访问和操作文档的方式”
上面这句话对 DOM API 作了更具体的解释，包括三层意思：
- 定义文档的结构
- 访问文档的方式
- 操作文档的方式
HTML DOM 是对 DOM Core 的扩展，添加了专门针对 HTML 文档的特定对象和方法，它与现有的文档对象模型一致。下面我们就来讨论如何使用 HTML DOM API 的问题。
一、如何定义文档的逻辑结构？——节点对象树
DOM规范，将网页中的HTML文档抽象为内存中的节点对象树(DOM Tree)。树中的每一个节点对象对应HTML文档中的一个元素。
二、如何访问文档？——访问节点对象
(0) Document 接口作为文档入口
Document 接口代表整个文档。JavaScript 中的全局对象 document 是对 Document 接口的实现。
(1) 直接访问文档中的节点对象。
| 方法 | 描述 |
| document.getElementsById("id"); | 通过 id 属性获取节点对象 |
| document.getElementsByName("name"); | 通过 name 属性获取节点对象 |
| document/element.getElementsByTagName("tag"); | 通过 tag 属性获取节点对象 |
| document/element.getElementsByClassName("class1[ class2]"); | 通过 class 属性获取节点对象 |
| document/element.querySelector("selector"); | 通过 css 选择器 获取首个节点对象 |
| document/element.querySelectorAll("selector"); | 通过 css 选择器 获取所有节点对象 |
(2) 通过节点关系访问一个节点周围的节点对象。
| 关系 | 属性 | 描述 |
| 父节点(parent node) | parentNode/parentElement | 获取所属父节点对象 |
| ownerDocument | 获取节点所属文档节点（根节点）对象 | |
| 兄弟节点(sibling nodes) | nextSibling nextElementSibling |
获取前一个兄弟节点对象 获取前一个兄弟元素节点对象 |
| previousSibling previousElementSibling |
获取后一个兄弟节点对象 获取后一个兄弟元素节点对象 |
|
| 子节点(child nodes) | childNodes children |
获取所有子节点对象 获取所有子元素节点对象 |
| hasChildNodes(); | 判断是否包含子节点对象 | |
| childElementCount | 获取子元素节点对象数量 | |
| firstChild firstElementChild |
获取第一个子节点对象 获取第一个子元素节点对象 |
|
| lastChild lastElementChild |
获取最后一个子节点对象 获取最后一个子元素节点对象 |
三、如何操作文档？——操作节点对象
思路一：【节点对象】首先是一个【对象】，只要是对象就具有【属性】和【行为】。
元素节点p作为对象，id，class，style（该属性是一个对象）等作为对象的属性，onclick，onfocus，oninput 等作为对象的行为，具体的动作由 JavaScript 代码控制。
思路二：节点对象只包含属性 —— 特性属性、样式属性和行为(事件)属性。
将【行为】看作对象的一种属性，以下实例印证了这一观点：
我们获取节点对象的目的，就是为了操作节点对象本身以及节点对象的属性。
(0) 操作节点对象本身
| 操作 | 方法 | 描述 |
| 创建节点 | document.createElement("TAG"); document.createTextNode("#文本"); document.createComment("#注释"); document.createDocumentFragment(); document.createAttribute("myAttrName"); |
创建一个元素节点 创建一个文本节点 创建一个注释节点 创建一个空白的文档片段节点 |
| 插入节点 | parentNode.appendChild(newChild); parentNode.insertBefore(newChild,refChild); |
插入子节点（作为最后子节点） 插入子节点（在指定子节点之前） |
| 删除节点 | parentNode.removeChild(oldChild); | 删除指定的子节点 |
| 替换节点 | parentNode.replaceChild(newChild,oldChild); | 替换一个子节点 |
| 克隆节点 | node.cloneNode(deep); | 克隆一个节点 |
(1) 操作节点对象的特性属性
| 方法 | 描述 |
| e.特性名称[="value"]; | 获取/设置特性值 |
| e.getAttributeNames()； | 获取已设置的全部属性名称（非IE内核） |
| e.getAttribute("特性名称"); | 获取特性值 |
| e.getAttributeNode("特性名称"); | 获取特性节点[特性名称=特性值] |
| e.setAttribute("特性名称","特性值"); | 设置特性值（不存在时新建该属性） |
| e.setAttributeNode(Attr); |
(2) 操作节点对象的样式属性
| 方法 | 描述 |
| e.style.color[ ="颜色值"] | 获取/设置标签内样式（内嵌样式） |
| window.getComputedStyle(e).color; document.defaultView.getComputedStyle(e).color; |
获取包括内嵌样式、<style>、<link>在内的最终样式（非IE内核 或 IE>8） |
| e.currentStyle.color | 获取包括内嵌样式、<style>、<link>在内的最终样式（IE内核） |
(3) 操作节点对象的行为（事件）属性
| 方法 | 描述 |
| e.onclick[ =fun()]； e.onclick(); |
获取/设置事件 触发事件 |
| e.addEventListener("type",listener,[useCapture]); | 注册事件（非IE内核 或 IE>8） |
| e.attachEvent("ontype",listener); | 注册事件（IE内核<11） |
| e.removeEventListener("type",listener,[useCapture]); | 移除事件（非IE内核 或 IE>8） |
| e.detachEvent("ontype",listener); | 移除事件（IE内核<11） |
| e.dispatchEvent(event) | 调度（触发）事件 |
(4) 操作节点对象的内容(属性)
节点对象的内容，实际上是节点对象的子节点。传统的方法是使用新创建的子节点替换需要修改的旧子节点。
<html> <body> <div> <p>第一个段落</p> <p>第二个段落</p> </div> </body> </html>
<script>
//获取父节点
var d = document.querySelector("div");
//获取需要替换的旧子节点
var oldChild = d.firstChild;
//创建新子节点
var newChild = document.createTextNode("新的文本");
//替换
d.replaceChild(newChild ,oldChild );
</script>
如此常用的操作，却有如此繁琐的操作过程，况且一次只能替换一个子节点，这也太坑了吧！别急，DOM 规范为我们提供了更加简便的操作。
转换一下思路，我们将节点对象的内容看作是节点对象的一个属性。那么方法 e.innerHTML 属性将以字符串的形式返回所有节点对象的内容。 e.innerHTML = newStr 将替换该内容。newStr 可以包含tag，替换的内容会自动转换为节点对象（其实简单的文本字符串，也会转换成一个文本节点）。
<script>
//获取节点
var d = document.querySelector("div");
//修改节点内容
var str = "新的文本";
d.innerHTML= str;
</script>
最终的节点对象应该是下面这张图：
【The End】
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- javascript面向对象入门基础详细介绍 2020-03-29
- jquery遍历筛选数组的几种方法和遍历解析json对象 2020-02-29
- Javascript Ajax异步读取RSS文档具体实现 2020-02-25
- jQuery表单对象属性过滤选择器实例详解 2020-02-21
- Javascript调试console对象的小技巧 2020-02-20
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
