DOM 介绍

DOM(Document Object Model) 文档对象模型，是针对 HTML 和 XML 文档的一个 API。DOM 描绘了一个层次化的节点树，允许开发人员添加、修改、删除页面中的某一部分。DOM 脱胎于 Netscape 以及 Microsoft 创始的 DHTML(动态 HTML)，但它现在已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。

注意，IE 中所有 DOM 对象都是以 COM 对象的形式实现的。这意味着 IE 中的 DOM 对象与原生 Javascript 对象的行为或活动特点并不一致。

W3C DOM 标准

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

这里我们要说的是HTML DOM

  • HTML 标准对象模型。
  • HTML 标准编程接口。
  • W3C 标准。

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问他们的方法，换句话说**HTML DOM 是关于如何获取、修改、添加、删除 HTML 元素的标准** 。

节点层次

DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记。每个节点都有自己的特点、数据和方法，另外也有与其他节点存在某种关系。节点之间构成了层次，而所有页面标记则表现为一个以特定节点问根节点的树形结构。

dom-图源w3school

文档节点是每个文档的根节点。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中，每个文档只能有一个文档元素。 在 HTML 页面中，文档元素始终都是<html>元素。在 XML 中，没有预定义的元素，因此任何元素都有可能成为文档元素。

DOM 节点

  • 整个文档是一个文档节点。
  • 每个 HTML 元素是元素节点。
  • HTML 元素内的文本是文本节点。
  • 每个 HTML 属性是属性节点。
  • 注释是注释节点。

DOM 节点之间的关系

<html>
  <head>
    <title>这里是文本节点</title>
  </head>
  <body>
    <h1>DOM</h1>
    <p>Hello world!</p>
  </body>
</html>

dom-navigate来源W3school

  • 在节点树中，顶端节点被称为根（root）
  • 每个节点都有父节点、除了根（它没有父节点）
  • 一个节点可拥有任意数量的子
  • 同胞是拥有相同父节点的节点

不要忘记了这里title和p中的文本节点，可以通过innerHTML 来访问到文本节点的内容。

Node 类型

DOM1 级定义了一个 Node 接口，该接口将由 DOM 中所有节点类型实现。这个 Node 接口在 Js 中是作为 Node 类型来实现的。js 中所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。

常用的节点属性有：

nodeName 属性 规定了节点的名称：

  • nodeName 是只读的。
  • 元素节点的 nodeName 与标签名相同。
  • 属性节点的 nodeName 与属性名相同。
  • 文本节点的 nodeName 始终是 #text。
  • 文档节点的 nodeName 始终是 #document

nodeValue 属性 规定了节点的值：

  • 元素节点的 nodeValue 是 undefined 或 null。
  • 文本节点的 nodeValue 是文本本身。
  • 属性节点的弄 deValue 是属性的值。

nodeType 返回节点的类型（只读）：
比较重要的节点类型有：

元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

注意：每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。注意，虽然可以通过方括号语法来访问 NodeList 的值，而且这个对象也有 length 属性，但是它并不是 Array 的实例。NodeList 的独特之处在于，它实际上是基于 DOM 结构动态执行查询的结果，因此 DOM 结构的变化能够自动反映在 NodeList 对象中。虽然所有节点类型都继承自 Node，但并不是每种节点都有子节点。

Document 类型

js 通过 Document 类型表示文档。在浏览器中，document 对象是 HTMLDocument（继承自 Document 类型）的一个实例，表示整个 HTML 页面。而且，document 对象是 window 对象的一个属性，因此可以将其作为全局对象来访问。

虽然 DOM 标准规定 Document 节点的子节点可以是DocumentType Element ProcessingInstruction Comment，但还有两个内置访问子节点的快捷方式。第一个就是documentElement属性，该属性始终指向 HTML 页面中的<html>元素。另一个就是通过childNodes列表访问文档元素。

<html>
    <body></body>
</html>
###
var html = document.documentElement;
html === document.firstChild;//true
html === document.childNodes[0];//true

Document 另一个可能的子节点是 DocumentType。通常将<!DOCTYPE>标签看成一个与文档其他部分不同的实体，可以通过 document.doctype 来访问她的属性。但是不同的浏览器对 doctype 的处理方式不同，有些浏览器不会把其解析为 document 的子节点。

重要的方法

getElementById():

getElementById()接收一个参数，要取得元素的 Id。如果找到对应元素则返回该元素，如果不存在带有相应 Id 的元素，则返回 null。注意，这里的 Id 必须与页面中元素的 Id 特性严格匹配，包括大小写。

<div id="myDiv">some text</div>
----
var div = document.getElementById('myDiv');

getElementsByTagName():

这个方法接收一个参数，即要取得元素的标签名，而返回的是包含零或多个元素的 NodeList。在 HTML 文档中，这个方法会返回一个 HTMLCollection 对象，作为一个“动态”集合，该对象与 NodeList 非常相似。例如，下面代码会取得页面中所有的<img>元素，并返回一个 HTMLCollection。

var images = document.getElementsByTagName("img");

这段代码会将一个 HTMLCollection 对象保存在 images 变量中。与 NNodeList 对象相似，可以使用方括号语法或 item()方法来访问 HTMLCollection 对象中的项。

console.log(images.[0].src);
console.log(images.item(0).src);

getElementsByName()::

这个方法也只有 HTMLDocument 类型才有的方法。顾名思义，这个方法会返回带有给定 name 特性的所有元素。最常使用 getElementsByName()方法的情况是取得单选按钮。与 getElementsByTagName()相似 getElementsByName()方法也会返回一个 HTMLCollection 对象。

文档写入

有一个 document 对象的功能已经存在很对年了，那就是将输出流写入到网页中的功能。这个能力体现在下列 4 个方法中：write()、writeln()、open()、close()。其中 write()和 writeln()方法都接受一个字符串参数，即要写入到输出流中的文本。write()会原样写入，而 writeln()则会在末尾进行换行。页面在被加载的过程中，可以使用这两个方法向页面中动态的加入内容。方法 open()和 close()分别用于打开和关闭网页的输出流。如果是在页面加载期间使用 write()或 writeln()方法，则不需要使用者两个方法。

Element 类型

除了 Document 类型之外，Element 类型要算 Web 编程中最常用的类型了。Element 类型用于表现 XML 或 HTML 元素，提供了对元素标签名、子节点及特性的访问。

var div = document.getElementById('someElement');
div.getAttribute('id');//获取div的id属性值
div.getAttribute('class');//获取div的class属性值

#####
//与getAttribute()对应的是setAtrribute()，这个方法接收两个参数：设置的属性名和值。如果之前存在值则会代替值，否则会创建该值。
div.setAtrribute('id', 'someElementId');//设置element的id值

#####
div.removeAttribute("id");//删除element的id属性

#####
var div = document.createElement('div');//创建一个div
div.id = 'elementId';//设置div的id属性值
document.body.appendChild(div);//将div添加到body使其生效

Text 类型

文本节点由 Text 类型表示，包含的是可以按照字面解释的纯文本内容。纯文本内容可以是包含转义后的 HTML 字符，但不能包含 HTML 代码。在默认情况下，每个可以包含内容的元素最多只能有一个文本节点，而且必须确实有内容存在。

<div></div>没有内容，没有文本节点
<div> </div>有一个空格因而有一个文本节点
<div>Hello world</div>有一个文本节点

以上为本人学习 js 过程中的一些记录，大部分内容源于对《Professional Javascript for Web Developers》以及 W3school 的整理，不做参考！