DOM
- MDN
-
阮一峰
什么是DOM，DOM最重要的就是要明白它的概念，否则遇到问题也不知道如何下手
大家都说DOM树，这是一个比喻，易于理解，
D就是文档，想象它是一个树状的结构（就像之前数据结构里的二叉树那样），树上有着节点（node）
O就是对象，
M也就是模型，把D和O做一个一一对应的映射，就是这个模型
所以DOM就是把文档变成一个对象
映射
上图红字
DOM转化来的js对象里面到底存放什么由DOM标准规定
比如：
上图的 head、body、meta、link、h1、p 都是Element的实例
（中间存在其它函数，F12调试可见，比如document.body就是document.body.proto->HTMLBodyElement.prototype.proto->HTMLElement.prototype.proto->Element.prototype）
根节点html比较特殊，是由document构造的（DOucment->HTMLDocument,简写）
至于文本节点则是由
Node Api
Node 属性
记住以下单词；
- child / children / parent
- node
- first / last
- next / previous
- sibling / siblings
- type
- value / text / content
- inner / outer
- element
然后相互组合
一部分：childNodes,firstChild,innerText,lastChild,nextSibling,nodeName,nodeType,nodeValue,outerText,ownerDocument,parentElement,parentNode,previousSibling,textContent
<html>
<head></head>
<body></body>
</html>
document.body.previousSibling // #text
document.body.previousSibling.previousSibling // <head></head>
docuemnt.body.previousElementSibling // <head></head>
// 为什么previousSibling返回的是文本节点呢，这是因为本来dom是配对xml的，后来强行配对html
// previousSibling是 Node 的属性，previousElementSibling是 Element 的属性
// previousSibling 是本来就有的，previousElementSibling是后来加的
// 类似的还有 nextSibling / nextElementSibling, firstChild / firstElementChild 等等
// 可以在F12中尝试，控制台会显示提示以及该属性属于哪个对象
几个要注意的 Node Api
-
nodeName
注意这个api很奇葩
document.body.nodeName // 'BODY
document.documentElement.nodeName // 'HTML
document.nodeName不行，必须像上面那样写
它对所有标签返回名称都是大写
但是！唯有svg，它返回小写
document.getElementsByTagName('svg')[0] // 'svg'
这是因为svg是‘外来的’标签，它是后来新加的，然后就这么小写了…… -
nodeType-MDN
只读属性 Node.nodeType 表示的是该节点的类型。其所有可能的值请参考节点类型常量.
它返回一个整数来表示节点的类型
(之所以这样是因为当年的计算机还没这么发达，而1比element的字节小多了)
以下几个需知：
1 元素节点， Eg：<div>、<p>
3 文本节点， 元素或者属性中实际的文字，比如<p>段落</p>中的段落二字
9 Document节点，
11 DocumentFragment节点 // 很特殊的一个节点（暂时我还不清楚，google DocumentFragment优化）document.body.nodeType // 1 document.nodeType // 9 document.documentElement.nodetype // 1 document.documentElement.nodeName // 'HTML' // 所以document.documentElement才是html，document不是？ -
innerText与textContent-MDN
区别:- textContent 会获取所有元素的内容，包括
<script> 和 <style>元素，然而 innerText 不会。 - innerText意识到样式，并且不会返回隐藏元素的文本(设置display:none的元素)，而textContent会。
- 由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会。
- 与 textContent 不同的是, 在 Internet Explorer (对于小于等于 IE11 的版本) 中对 innerText 进行修改， 不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）。
- textContent 会获取所有元素的内容，包括
-
childNodes-MDN
Node.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。var parent = document.getElementById('parent'); parent.childNodes.length // 2 parent.appendChild(document.createElement('div')); parent.childNodes.length // 请问现在 length 是多少 // 3 // 与之相反的是 querySelectorAll() ,它返回的是一个静态的 NodeList var allDiv = document.querySelectorAll('div> allDiv.length // 假设是 2 document.body.appendChild( document.createElement('div') ) allDiv.length // 请问现在 length 的值是多少？？？ // 2 // querySelectorAll方法不属于 node，是document 和 element 的 - HTMLCollection与NodeList的区别有
- HTMLCollection实例对象的成员只能是Element节点，NodeList实例对象的成员可以包含其他节点。
- HTMLCollection实例对象可以用id属性或name属性引用节点元素，NodeList只能使用数字索引引用。
- HTML DOM 中的 HTMLCollection 是即时更新的（live）；
当其所包含的文档结构发生改变时，它会自动更新。
NodeList 对象大多数情况下是个实时集合。
意思是说，如果文档中的节点树发生变化，则已经存在的 NodeList 对象也可能会变化。例如，Node.childNodes 是实时的。
在另一些情况下，NodeList 是一个静态集合，也就意味着随后对文档对象模型的任何改动都不会影响集合的内容。document.querySelectorAll 返回一个静态的 NodeList。
Node 方法 （如果一个属性是函数，那么这个属性就也叫做方法；换言之，方法是函数属性）
appendChild()cloneNode() // 分深、浅拷贝contains()hasChildNodes()insertBefore()isEqualNode() // 看起来相等isSameNode() // 完全相等，可以用 === 来代替removeChild()replaceChild()-
normalize() // 常规化
基本看见名字就知道作用，不清楚也可以查MDN。
Document Api -MDN
Document 属性
- body
- characterSet
- childElementCount
- children
- doctype
- documentElement
- domain
- fullscreen
- head
- hidden
- images
- links
- location
- onxxxxxxxxx
- origin
- plugins
- readyState
- referrer
- scripts
- scrollingElement
- styleSheets
- title
- visibilityState
Document 方法：
- close()
- createDocumentFragment()
- createElement()
- createTextNode()
- execCommand()
- exitFullscreen()
- getElementById()
- getElementsByClassName()
- getElementsByName()
- getElementsByTagName()
- getSelection()
- hasFocus()
- open()
- querySelector()
- querySelectorAll()
- registerElement()
- write()
- writeln()
Element Api -MDN
关于 DOM API 更多见之后写的常用 API。（待续）
网友评论