JS基本功系列-DOM记录02

DOM结构树

  function Document() {

}

Document.prototype = {
  getElementById: function () {
  },
  ...
}

var document = new Document();//其实document 构造函数 -> HTMLDocument

document 构造函数 -> HTMLDocument HTMLDocument 构造函数 -> Document HTMLDocument 构造出来的对象里面有 proto .Document.prototype

document.proto = HTMLDocument.prototype HTMLDocument.proto = Document.prototype

最终：document 》HTMLDocument 》Document 》Node

 HTMLDocument.prototype.say = function () {
  console.log("我在说话")
}

Document.prototype.eat = function () {
  console.log("我在吃")
}

document.say();//我在说话
document.eat()//我在吃
document.getElementsByClassName()//以get开头的这些函数都是继承Document的
//写框架，库，插件，工具,模块化编程基本都需要 在原型上编程

再看一个例子:

<div>123</div>
<p>234</p>

Text.prototype.aaa = 'aaa';
CharacterData.prototype.bbb = 'bbb';
var div = document.getElementsByTagName('div')[0];
var text = div.childNodes[0];
console.log(text.aaa)///aaa
console.log(text.bbb)//bbb

HtmlElement所构造出来的所有对象都继承Element.prototype里面的方法和属性!

  Element.prototype.aaa = 'aaa';
HTMLElement.prototype.bbb = 'bbb';
HTMLDivElement.prototype.ccc = 'ccc';
var div = document.getElementsByTagName('div')[0];
typeof document.getElementsByTagName('div')[0]//object类型
document.getElementsByTagName('div')[0].constructor === HTMLDivElement//true
//就是说div的构造就是HTMLDivElement

var p = document.getElementsByTagName('p')[0];//而p的构造是HTMLParagraphElement

console.log(div.aaa)//aaa
console.log(div.bbb)//bbb
console.log(div.ccc)//ccc

console.log(p.aaa);//aaa
console.log("p.bbb: " + p.bbb)//bbb
console.log(p.ccc)//没有任何结果，因为HTMLDivElement与HTMLParagraphElement是同一级的
//HTMLDivElement与HTMLParagraphElement的父级为HTMLElement

//判断对象类型,这里可以判断是什么类型的标签
Object.prototype.toString.call(div)
//"[object HTMLDivElement]"

DOM操作深入

1.getElementById,getElementsByName只有Document.prototype才有!!!!!!
2.getElementsByTagName ,getElementsByClassName ,querySelector(),querySelectorAll() 这四个函数在Document.prototype和 Element.prototype里面都有！！！！！！

<div>
  <p class="text" name="p">111</p>
  <input type="text" name="username">
</div>

//getElementById,getElementsByName只有Document.prototype才有!!!!!!
// var div = document.getElementsByName('div')[0];
// div.getElementById()//会报错


document.__proto__ //---》HTMLDocument
//HTMLDocument，这说明document是HTMLDocument实例化之后构造出来的
//一切的原型链是以原型来连接的

// Document.prototype.querySelectorAll()
//getElementsByTagName
//getElementsByClassName
//querySelector(),querySelectorAll()
//上面这四个函数在Document.prototype和  Element.prototype里面都有！！！！！！

//*  --->获取标签用的,只能配getElementsByTagName
var all = document.getElementsByTagName('*')
console.log(all)

var body = document.body;//这里的body是通过document.body来使用的，这个属性是系统内置的,只能使用，不能访问
//HTMLDocument.prototype.body  //会报错
var head = document.head;