DOM基础知识（三）

DOM继承树

• 先回想一下原型的知识

• Document是一个系统内置的只读构造函数

• 但我们可以在Document.prototype上挂载各种属性和方法

• document对象就可以顺着原型链访问调用这些自定义的属性和方法

• 但document的构造函数是HTMLDocument

• DOM继承树

  

---

DOM基本操作

  Document.prototype = {
    documentElement, // 文档的根元素
    getElementById: fn,
    getElementsByTagName: fn,
    getElementsByClassName: fn,
    querySelector: fn,
    querySelectorAll: fn,
    ...
  }

  HTMLDocument.prototype = {
    head,
    body,
    getElementsByName: fn,
    ...
  }

  Element.prototype = {
    getElemetsByTagName: fn,
    getElementsByClassName: fn,
    querySelector: fn,
    querySelectorAll: fn,
  }

• 因为getElementsByTagName具有良好的兼容性( 在Document.prototype和Element.prototype上均有定义 )，所以综合考虑代码可读性和兼容性，JS选中元素的更好方式如下

  // html
  <div>
    <span></span>
  </div>
  <span></span>

  // js
  var oDiv = document.getElementsByTagName('div')[0];
  var oSpan = oDiv.getElementsByTagName('span')[0];