本文详细介绍了DOM模型如何将HTML转换为树状结构，展示了Node类型、获取和操作节点的方法，以及Document、Element和不同类型的节点如Text和Comment。重点讲解了Document对象的特性、元素操作、DOM扩展如选择符API和自定义属性，以及HTML5新特性如元素遍历和滚动功能。
DOM
DOM基本
节点
DOM也就是Document Object Model，讲任何HTML描绘成一个由多个节点构成的树形结构。其中文档节点为根节点，其只有一个子节点，即元素，为文档元素（每个文档只有一个）。HTML转换DOM树：
<!DOCTYPE html>
<html lang="en">
<head>
<title>My title</title>
</head>
<body>
<a href="">My Link</a>
<h1>My header</h1>
</body>
</html>
-
Node类型
Node类型
JavaScript所有节点类型都继承自Node类型，每个节点都有一个nodeType属性，用来表明节点类型 nodeName保存元素标签名获取节点
每个节点都有个childNodes属性，保存一个列表对象NodeList，并且由length属性，但不是Array实例。通过该对象，可以反映DOM变化。可以通过childNodes[]获取该节点的所有子节点，并且在同一个childNodes列表中具有相同父节点parentNode。该列表中的兄弟节点可以用previousSibling和nextSibling属性访问前一个或者后一个兄弟节点兄弟关系：element.previousElementSibling / element.nextElementSibling
操作节点
-
appendChild
向childNodes列表末尾添加一个节点 -
insertBefore()
接受要插入的节点和参照节点，并且把要插入节点插入到参照节点前面 -
replaceChild()
-
接受要插入的节点和要替换的节点
-
removeChild() 接受要移除的节点
-
-
Document类型
通过Document类型表示文档，document对象是HTMLDocument对象一个实例，也是window对象一个属性文档的子节点
可能是DocumentType、Element、ProcessingInstruction或Comment
通过documentElement属性，指向元素
通过childNodes访问文档元素
body属性指向元素
文档信息
- tittle 属性包含< title >的文本
- url 属性包含完整的URL
- domain 属性只包含域名
- referrer 属性保存链接到当前页面的那个页面的url
查找元素
- getElementById()
接受元素的ID，返回相应的第一个出现的元素或null
- getElementByTagName()
接受标签名，返回一个HTMLCollection对象
- getElementByName()
返回带有给定name特性的所有元素
-
Element类型
HTML元素，由HTMLElement类型表示，继承Element
特性有id，title、className、lang
获取特性
- getAttribute(),
传入要获取的特性名，IE可以获取自定义的特性。
利用该方法访问style，返回CSS文本，而用属性访问，返回的是对象
利用该方法访问onclick，返回字符串，而已属性访问，返回js函数。因为onclick及其他事件处理程序属性本身就应该被赋予函数值。
- setAttribute(),
接受要设置的特性名和值，如果存在就替换。
- removeAttribute
彻底删除元素特性
attributes属性
存在一个NamedNodeMap集合，每个元素的每一个特性作为节点保存在其中
- getNamedItem()
- removeNamdItem()
- setNamedItem() item()
创建元素
document.createElement()，接受创建元素的标签名，并且也可以传入完整元素标签，并包括属性。创建完之后使用appendChild()、insertBefore()、或replaceChild()、追加到父元素上面。
-
其他类型
-
Text类型
使用createTextNode()创建新文本节点，接受要插入节点中的文本
使用normalize()规范化文本
使用splitText()分割文本 -
Comment类型
-
CDATASection类型
-
DocumentType类型
-
DocumentFragment类型
-
Attr类型
-
DOM操作
-
动态样式
使用< link >元素包含来自外部的文件 使用< style >指定嵌入的样式 -
操作表格
创建<table> 创建tbody，并追加到table中 创建tr，追加到tbody中 创建td， 最后把table追加到body中 -
NodeList
每当文档结构发生变化，NodeList都会发生更习惯，保存着最新最准确的信息， 该对象在访问DOM文档时实时运行的查询。 所有为了代码运行更轻松，资源消耗更小，应减少访问NodeList次数（该访问都会运行一次基于文档的查询）
DOM扩展
选择符API
在上面的获取元素的方法中，并不存在根据CSS选择符来获取的方法。实现浏览器元素支持CSS查询，
需要一个基础的CSS解析器，然后用已有的DOM方法查询文档并找到匹配的节点。
并且选择符API，可以把解析和树查询在浏览器内部编译后完成，提高了性能。
- querySelector()，接受一个CSS选择符，返回匹配的第一个元素或null
- querySelectorAll()，返回一个NodeList实例
元素遍历
对节点的访问，解决了元素间的空格问题添加了新属性：
- childElementCount，返回子元素个数
- firstElementChild，返回第一个子元素
- previousElementSibling，指向前一个同辈元素
- nextElementSibling，指向后一个同辈元素
对于HTML5的扩充
- 与类相关
getElementsByClassName
获取指定元素中具有指定 class 的所有节点（一个Node List）。
多个 class 可的选择可使用空格分隔，与顺序无关。只有位于元素子树中的元素才会返回。
-
焦点相关
元素获得焦点的方式：页面加载、用户输入和使用focus()方法，
使用document.activeElement可以获得document.body的引用，
而且文档加载期间，返回null。
使用hasFocus(()可以检测是否获得焦点 -
HTMLDocument中的扩展
使用readyState属性，检测文档是否已经加载完成：会返回loading或complete
兼容模式：IE提供document.compatMode获取标准模式CSS1Compat，或混杂模式BackCompat
- 自定义属性
为原始添加非标准的属性，但是要添加前缀data-。添加之后，可以通过元素的dataset属性访问自定义属性的值，返回一个DOMStringMap实例
-
插入标记
减少了插入标记带来的创建节点和连接节点的麻烦，直接插入HTML字符串更方便更快。
- innerHTML
获取或设置指定节点之中所有的 HTML
内容。替换之前内部所有的内容并创建全新的一批节点（去除之前添加的事件和样式）。innerHTML 不检查内容，直接运行并替换原先的内容。 - outerHTML
返回调用它的元素及所有子节点的HTML标签（读模式下）
根据指定的HTML字符串创建新的DOM字数，用这个DOM字数完全替换调用元素
因为上面的方法在使用过程中，某个元素有个事件处理程序，在使用上述属性将该元素从文档树中删除后，元素与实际处理程序之间的绑定关系在内存中并没有一并删除。所有最后先手动删除要被替换的元素的所有事件处理程序和对象属性。
- innerHTML
专有扩展
-
children属性
只返回包含元素中同样还是元素的子节点
-
插入文本
- innerText
操作元素中包含的所有内容 可以按照由浅入深顺融，将子文档书中的文本拼接起来返回
写入值时，会删除所有子节点，插入包含相应文本值得文本节点 - outerText
可以按照由浅入深顺融，将子文档书中的文本拼接起来返回 写入值时，替换整个元素
- innerText
-
滚动
-
scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视口中不可见得情况下，才滚动浏览器窗口或容器元素，最终让它可见。
-
scrollByLines(lineCount)：将元素得内容滚动指定得行高
-
scrollByPages(pageCount)：将元素内容滚动指定的页面高度。
-
scrollIntoView（）
-
扫一扫
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
