A27-DOM API

2018-01-25 本文已影响0人半斋

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 进行修改，不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）。

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。（待续）

A27-DOM API

DOM

Node Api

Node 属性

几个要注意的 Node Api

Node 方法（如果一个属性是函数，那么这个属性就也叫做方法；换言之，方法是函数属性）

Document Api -MDN

Document 属性

Document 方法：

Element Api -MDN

猜你喜欢

热点阅读

A27-DOM API

DOM

Node Api

Node 属性

几个要注意的 Node Api

Node 方法 （如果一个属性是函数，那么这个属性就也叫做方法；换言之，方法是函数属性）

Document Api -MDN

Document 属性

Document 方法：

Element Api -MDN

猜你喜欢

热点阅读

Node 方法（如果一个属性是函数，那么这个属性就也叫做方法；换言之，方法是函数属性）