定义
DOM全称为“文档对象模型”（Document Object Model），DOM是针对HTML和XML文档的一个API（Application programming interfaces–应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。
• 文档
– 文档表示的就是整个的HTML网页文档
• 对象
– 对象表示将网页中的每一个部分都转换为了一个对象。
• 模型
– 使用模型来表示对象之间的关系，这样方便我们获取对象
节点层级
任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构。
DOM的最小组成单位叫做节点（node）。
节点的类型有七种：Document、DocumentType、Element、Text、Comment、DocumentFragment。
文档节点（document）——整个HTML文档document对象作为window对象的属性存在的，我们不用获取可以直接使用。
元素节点（Element）——HTML文档中的HTML标签。
属性节点（Attribute) ——元素的属性，表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。
文本节点（Text）——HTML标签中的文本内容。
DocumentType——doctype标签节点（比如<!DOCTYPE html>）。
Comment——注释节点
DocumentFragment——文档的片段节点
Node类型
DOM1级定义为一个Node接口，该接口将由DOM中的所有节点类型实现。javascript中所有的节点类型都继承自Node类型，所有节点类型都共享着相同的基本属性和方法。
Node 类型的属性和方法
属性
nodeType：nodeType属性返回一个整数值，表示节点的类型。文档节点（document）——9，元素节点（element）——1，属性节点（attr）——2，文本节点（text）——3，文档类型节点（DocumentType）——10，注释节点（Comment）——8，文档片断节点（DocumentFragment）——11。
nodeName：nodeName属性返回节点的名称。
nodeValue：nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值。
textContent：textContent属性返回当前节点和它的所有后代节点的文本内容。
nextSibling：nextSibling属性返回紧跟在当前节点后面的第一个同级节点。 当前节点后面没有同级节点，则返回null。
previousSibling：previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null。
parentNode：parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点(element)、文档节点(document)和文档片段节点(documentfragment)。
parentElement：parentElement属性返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null。
firstChild：firstChild属性返回当前节点的第一个子节点。
lastChild：lastChild属性返回当前节点的最后一个子节点。
childNodes：childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点。
方法
appendChild()：appendChild方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。
insertBefore()：insertBefore方法用于将某个节点插入父节点内部的指定位置。第一个参数要插入的节点，第二个参数参照节点
removeChild()：removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。
replaceChild()：replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。第一个参数：要插入的节点；第二个参数：要替换的节点；第二个节点被删除。
cloneNode() ：cloneNode() 方法用于复制节点无参数代表浅复制，有参数true代表深复制。浅复制只复制节点，不复制内容。深复制复制节点和内容。
innerHTML()： innerHTML()方法用于设别HTML代码片段。
innerText()：innerText()方法用于只识别文本 去除空格和回车。
textContent()：textContent()方法用于只识别文本，不去除空格和回车。
Document类型
Javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。HTMLDocument继承自Document。
属性
documentElement：始终指向HTML页面中的元素。
body：直接指向元素。
doctype ：访问<!DOCTYPE>, 浏览器支持不一致，很少使用。
title：获取文档的标题。
URL：取得完整的URL。
domain：取得域名，并且可以进行设置，在跨域访问中经常会用到。
referrer：取得链接到当前页面的那个页面的URL，即来源页面的URL。
images：获取所有的img对象，返回HTMLCollection类数组对象。
forms：获取所有的form对象，返回HTMLCollection类数组对象。
links：获取文档中所有带href属性的<a>元素。
方法
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素 id 来查找元素 |
| document.getElementsByTagName(name) | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
| document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |
| document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表 |
| document.createElement(element) | 创建一个新的HTML元素，要与appendChild() 或 insertBefore()方法联合使用。 |
| document.write() | 向文档写如文本或 HTML 表达式 或 JavaScript 代码。 |
Element类型
属性
| 属性 | 描述 |
|---|---|
| attributes | 返回一个与该元素相关的所有属性的集合。 |
| classList | 返回该元素包含的 class 属性的集合。 |
| className | 获取或设置指定元素的 class 属性的值。 |
| clientHeight | 获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。 |
| clientTop | 返回该元素距离它上边界的高度。 |
| clientLeft | 返回该元素距离它左边界的宽度。 |
| clientWidth | 返回该元素它内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。 |
| innerHTML | 设置或获取 HTML 语法表示的元素的后代。 |
| tagName | 返回当前元素的标签名。 |
方法
| 方法 | 描述 |
|---|---|
| element.innerHTML = new html content | 改变元素的 innerHTML |
| element.attribute = value | 修改属性的值 |
| element.getAttribute() | 返回元素节点的指定属性值。 |
| element.setAttribute(attribute, value) | 设置或改变 HTML 元素的属性值 |
| element.style.property = new style | 改变 HTML 元素的样式 |
Text类型
属性及方法
| 属性或方法 | 描述 |
|---|---|
| length | 文本长度 |
| appendData(text) | 追加文本，text要追加的文本 |
| deleteData(beginIndex,count) | 删除文本，beginIndex开始的位置,count要删除的字符数量 |
| insertData(beginIndex,text) | 插入文本，beginIndex开始的位置,count要插入的字符数量 |
| replaceData(beginIndex,count,text) | 替换文本，beginIndex开始的位置,count要替换的字符数量,text要替换的文本 |
| splitText(beginIndex) | 从beginIndex位置将当前文本节点分成两个文本节点 |
| document.createTextNode(text) | 创建文本节点，参数为要插入节点中的文本 |
| substringData(beginIndex,count) | 从beginIndex开始提取count个子字符串 |
1024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
