js高程笔记10-12章
第10章 DOM
1.文档节点是每个文档的根节点。<html>为文档元素，为文档最外层元素。HTML元素——元素节点，特性——特性节点，文档类型——文档类型节点，注释——注释节点
2.Node类型：所有节点类型都继承自Node类型，共享基本的属性和方法。
基本属性：nodeType，nodeName，nodeValue
节点关系：childNodes，parentNode，previousSibling，nextSibling，firstChild，lastChild，hasChildNodes()，ownerDocument
操作节点：appendChild()，insertBefore()，replaceChild()，removeChild()，cloneNode(深复制/浅复制)，normalize()
3.Document类型：document对象是HTMLDocument(继承自Document类型)的一个实例，而且还是window对象的一个属性。
子节点：Document节点（文档节点）的子节点可能有DocumentType、Element、ProcessingInstruction、Comment。
document.documentElement，始终指向<html>元素
document.body，指向<body>元素
document.doctype，取得对<!DOCTYPE>的引用
文档信息：document.title、document.URL、document.referrer、document.domain
查找元素：getElementById()、getElementsByTagName()、namedItem()、getElementsByName()、
特殊集合：document.anchors、document.forms、document.images、document.links
一致性检测：document.implementation.hasFeature()
文档写入：write()、writeln()、open()、close()
4.Element类型：表现HTML元素，提供对元素标签名、子节点、特性的访问。
标签名：nodeName/tagName
html元素：由HTMLElement的子类型来表示，每个html元素都有的属性：id、title、lang、dir、className（特性为class）。
所有标签的公认特性都有相应属性。并且可读可写。
取得特性：getAttribute()，setAttribute()，removeAttribute()
自定义特性可以通过getAttribute()取得，但是不能通过访问属性取得。
两个特殊特性：style和onclick。它们用getAttribute()和属性访问返回的值不同。
attribute属性：在DOM层面上针对元素节点里的特性节点来访问和操作。
方法：getNamedItem()，removeNamedItem()，setNamedItem()，item(pos)。这些方法不如getAttribute()等方便。
可以使用这些遍历元素特性。P267
创建元素：document.createElement()。
元素子节点：有的浏览器使用childNodes属性会将文本节点注释节点算进去，所以遍历的时候要检测nodeType属性。
取得某元素节点的某标签名的所有后代节点：元素节点.getElementsByTagName()。
5.Text类型：由Text类型表示
使用div.firstNode.(nodeValue/data)访问和修改文本节点内容
创造文本节点：document.createTextNode()
合并相邻文本节点：normalize()
分割文本节点：splitText()
6.comment类型：表示注释
创建注释节点：document.createComment()
7.CDATASection类型：针对XML文档的CDATA区域。
8.DocumentType类型：包含与文档的doctype有关的所有信息。
9.DocumentFragment类型：作为仓库保存将来可能添加到文档的节点。
创建文档片段：document.createDocumentFragment()。
文档片段是将里面的所有子节点转移到文档指定位置上，文档片段本身不会成为文档树的一部分。
10.创建动态脚本：指在本身不存在于HTML文档中，但通过js动态创建<script>标签加进HTML文档中。
11.动态样式：通过js动态创建<link>和<style>标签加进HTML文档中
12.操作表格：提供专门的一些方法来创建表格的标签。P282
13.动态集合：文档结构发生变化时动态集合都会更新。
NodeList：保存节点的集合——使用childNodes返回P249
NamedNodeMap：保存特性的集合——使用attribute属性P266
HTMLCollection：保存节点集合——使用getElementsByTagName()返回P257
第11章 DOM拓展
1.选择符API：(level 1)querySelector()和querySelectorAll()
(level 2)element.matchesSelector()
2.元素遍历：previousElementSibling，nextElementSibling，firstElementChild，lastElementChild，childElementCount返回的都是元素节点，避免了文本、注释等混淆
3.HTML5：
类拓展：getElementsByClassName()，classList属性
焦点管理：document.activeElement，document.hasFocus()
HTMLDocument拓展：document.readyState属性，document.compatMode属性，document.head属性
字符集属性：document.charset和document.defaultCharset
自定义数据属性：element.dataset属性，通过属性访问自定义特性，自定义特性前要加“data-”。
插入标记：innerHTML属性，outerHTML属性，insertAdjacentHTML()
在使用上述属性和方法前最好先手动解除被替换节点和事件的关系，否则容易造成性能问题。
不要频繁使用innerHTML和outerHTML
scrollIntoView()调用的时候让调用元素出现在视口中。
第12章 DOM2和DOM3
1.DOM2级样式：
访问特性样式：style对象的属性对应着style特性中的css属性（css的float对应着style.cssFloat）
一些属性和方法：style.cssText，getPropertyValue()，removePropery()，document.defaultView.getComputedStyle()（只读）
操作样式表：document.stylesheets返回样式表集合，cssRules返回规则列表，insertRule()创建规则，deleteRule()删除规则
元素大小：offsetHeight，offsetWidth，offsetLeft，offsetTop
clientWidth，clientHeight
scrollHeight，scrollWidth，scrollLeft，scrollTop
2.遍历：document.createNodeIterator()，document.createTreeWalker()
3.范围：
设置：createRange()，selectNode()，selectNodeContents()，setStart()，setEnd()
操作：deleteContents()，extractContents()，cloneContents()
在范围里插入：。。。
折叠：。。。
比较：。。。
复制：。。。
清理：。。。
