一、DOM简介
1. 什么是DOM？
DOM（Document Object Model）是针对HTML和XML文档的一个API。DOM是载入到浏览器中的文档模型，描绘的是一个层次化的节点树，树的每个分支的终点都是一个节点（node），允许开发人员添加、移除和修改页面的某部分内容。概括来说，它将web页面和脚本或程序语言连接起来（通常是JavaScript）。
一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。 DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。——MDN文档《DOM概述》
2. DOM与JavaScript的关系？
- 文档中的每个元素都是文档所属的DOM的一部分。
- DOM并不是一个编程语言，但JavaScript通过DOM访问/处理文档和其中的文档元素。
- JavaScript可以访问和操作存储在DOM中的内容，因此可以近似写成： API (web 或 XML 页面) = DOM + JS (脚本语言)
3. 如何访问DOM？
可以通过window元素和document元素的API来操作和访问文档中的信息。
二、不同层次节点的DOM
文档节点是每个文档的根节点，在通常的网页中，文档节点只有一个子节点<html>元素，称其为文档元素。在HTML页面中，文档元素始终都是<html>元素，在XML页面中，任何元素都可能成为文档元素。
文档中的每一段标记都可以通过树中的一个节点来表示，如元素节点，特性节点，文档类型节点，注释节点等等，总共有12种类型的节点。
1.Node类型
所有节点共有12种类型，所有这些类型都继承自一个基类型：Node类型。
Node是一个接口，有许多接口从Node继承方法和属性。
(1) nodeType属性
每一个节点都有一个nodeType属性，用于表明节点的类型。该属性返回一个与该节点对应的类型的数值常量。
目前仍在使用和仍在DOM4规范中的有：
- Node.ELEMENT_NODE(1):一个元素节点，例如<p>和<div>。
- Node.TEXT_NODE(3):Element或者Attr(属性)中实际的文字文字。
- Node.PROCESSING_INSTRUCTION_NODE(7):一个用于XML文档的 ProcessingInstruction，例如 <?xml-stylesheet … ?> 声明。
- Node.COMMENT_NODE(8):一个Comment节点(注释)。
- Node.DOCUMENT_NODE(9):一个Document节点。
- Node.DOCUMENT_TYPE_NODE(10):描述文档类型的 DocumentType节点。例如<!DOCTYPE html>就是用于 HTML5 的。
- Node.DOCUMENT_FRAGMENT_NODE(11)：一个DocumentFragment节点。
例子：
if(someNode.nodeType == Node.ELEMENT_NODE){
alert("Node is an element.")
if(someNode.nodeType == 1){
alert("Node is an element.")
(2) nodeName和nodeValue属性
Node.nodeName返回当前节点的节点名称（Element的nodeName属性的值等同于与Element.tagName属性的值）
Node.nodeValue返回或设置当前节点的值（Element的nodeValue属性的值为null，Comment的nodeValue属性的值为注释的文本内容）
(3) childNodes属性
每个节点都有一个childNodes属性，其中保存着一个NodeList对象，这个对象保存着一组有序的节点。
注意：该NodeList对象不是Array的实例，它是动态的，能随DOM结构的变化而变化。
类似的有，parentNode属性、previousSibling属性、nextSibling属性、firstChild属性、lastChild属性…
(4) 操作节点：appendChild()方法、insertBefore()方法、replaceChild()方法
- appendChild()：用于向childNodes列表的末尾添加一个节点，返回新节点。
- insertBefore()：用于向参照节点前添加一个节点，返回新节点。
var returnNode = someNode.insertBefore(newNode, someNode.firstChild)
- replaceChild()
- removeChild()
(5) 创建副本cloneNode()
Node.cloneNode()方法返回调用该方法的节点的一个副本.
var dupNode = node.cloneNode(deep);
deep为布尔值。false浅克隆，true深克隆。
2. Document类型
(1) 文档子节点
取得对<html>的引用
var html = document.documentElement;
取得对<body>的引用
var body = document.body;
(2) 文档信息
取得文档标题，即<title>元素的文本。但是修改title属性的值不会改变<title>元素的文本内容。
var title = document.title;
取得页面完整的URL。
var url = document.URL;
取得只包含页面的域名。
var domain = document.domain;
取得来源页面的URL
var urlReferrer = document.Referrer;
(3) 查找元素
两个重要方法：
- getElementById()
var div = document.getElementById("myDiv");
- getElementsByTagName()
var images = document.getElementsByTagName("img");
- getElementsByName()注意：HTMLDocument类型特有。
(4) 文档写入
document.open();
document.write(markup);
document.writeln(markup);//会添加一个换行符
document.close();
2. Element类型
(1) 取得和设置特性的方法
- getAttribute(name)
- setAttribute(name, value)
- removeAttribute(name)
(2) 创建元素
document.createElement(tagname)方法用于创建元素，但未添加到DOM树中。添加时用appendChild()方法。
var div = document.createElement("div");
3. Text类型
常用的方法：
- appendData(text)
- deleteData(offset, count)
- insertData(offset, count)
- replaceData(offset, count, text)
- splitText(offset)
(1) 创建文本节点
document.creatTextNode(text)方法用于创建文本节点，但未添加到DOM树中。添加时用appendChild()方法。
(2) 合并相邻文本节点(规范化文本节点)
element.normalize()
(3) 分割文本节点
var newNode = element.splitText(index)
4. Attr类型
并不建议直接访问特性节点，使用getAttribute(),setAttribute()和removeAttribute()方法更为方便。
三、DOM拓展
1. 选择符API（CSS选择）
两大方法：
- querySelector()方法，返回与模式匹配的第一个元素。
- querySelectorAll()方法，返回与模式匹配的一个NodeList的实例。
- matchSelector()方法（实验性质），返回一个布尔值来判断是否匹配。
2. 元素遍历(属性)
- childElementCount：返回子元素的个数（不包括文本节点和注释）
- firstElementChild：指向第一个子元素（firstChild的元素版）
- lastElementChild
- previousElementSibling
- nextElementSibling
3. HTML5
- getElementsByClassName()方法
- classList属性
- focus()方法：获取焦点。
- document.readyState：表面文档是否加载完毕的指示器。有loading和complete两个值可用。
- innerHTML属性：属性值用来设置要插入的文本字符串（会覆盖掉原有的文本内容）。
- outerHTML属性：用于替换局部的DOM树。
- insertAdjacentHTML()方法：插入HTML文本。
- scrollIntoView()方法:
document.form[0].scrollIntoView()//让表单元素可见
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
