A27-DOM API

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

  
  


document.body.previousSibling // #text
document.body.previousSibling.previousSibling // 
docuemnt.body.previousElementSibling // 
// 为什么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：
  、

  
  3 文本节点， 元素或者属性中实际的文字，比如

  段落

  中的段落二字
  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 会获取所有元素的内容，包括