1-2 Document对象

Document对象非常的重要，没个页面都会有。Document又称文档对象。

Document文档对象

1、它是一个构造函数，可以用new生成实例；

console.log(
    document,
    new Document(),
    new Document() instanceof Document, //true
    document instanceof Document,   //true
    window.document===document,     //true
    document.doctype.ownerDocument===document,  //true
);

我们平常所用的document可以称为Document对象的实例，
2、它提供了DOM树以及关于页面的全局共享属性与方法；
注意：
1、文档类型包含HTML、XML、SVG等。也就是说这个Document对象并不是HTML页面专属的
2、这里的全局是相对于这些类型的文档来说的
3、对于HTML文档，又定义了一个专属的HTMLDocument对象，这个对象继承Document对象

Document对象的继承关系

EventTarget <= Node <= Document

HTMLDocument对象的继承关系

EventTarget <= Node <= Document <= HTMLDocument

document节点（实例）继承关系

EventTarget <= Node <= Document <= HTMLDocument <= document

注意：
我们所说的document是页面里的顶层节点，所有元素都属于它。指的Document对象创建了DOM树，document是个顶层节点，其它的节点都属于document节点。而并不是说页面里的所有元素都是Document对象的实例。只有document节点才是Document的实例，继承它的共享属性与方法，其它节点并不继承。

document节点

1、小写开始的document代表的是一个实例（节点），是Document或者HTMLDocument构造函数的实例；
2、window.document指向这个节点；
3、其它节点的ownerDocument属性指向这个节点；
4、它并不是Document函数的直接实例，document节点的继承关系为
EventTarget <= Node <= Document <= HTMLDocument <= document

原因
1、一个页面的类型可以为html、xml等，每种类型的页面都会有一个对应的构造函数HTMLDocument、XMLDocument；
2、HTMLDocument对象提供了html文件里的属性与方法，它的属性与方法还是Document对象身上的属性与方法；

Document对象共享属性（实例属性）

1、document.doctype 文档类型节点（只读）
2、document.documentElement 返回html（只读）
3、document.styleSheets 返回当前文档的所有style（只读）
4、document.characterSet 返回当前文档的编码（只读）

HTMLDocument对象共享属性（实例属性）

1、document.defaultView 返回window（只读）
2、document.body
3、document.head
4、document.title
5、document.links
6、document.forms
7、document.images
8、document.scripts
9、document.anchors
10、document.URL
11、document.location
12、document.domain
13、document.referrer
14、document.lastModified
15、document.readyState
16、document.cookie

HTMLDocument对象共享方法（实例方法）

1、document.write()
2、document.writeln()
3、document.getElementsByName

Document对象共享方法（实例方法）

1、document.querySelector()
2、document.querySelectorAll()
3、document.getElementById()
4、document.getElementsByTagName
5、document.getElementsByClassName
6、document.createElement() 创建标签节点
7、document.createTextNode() 创建文本节点
8、document.createAttribute() 创建属性节点
9、document.createComment() 创建注释节点
10、document.createDocumentFragment 创建文档片段
11、document.addEventListener
12、document.removeEventListener
13、document.dispatchEvent

参考连接

https://developer.mozilla.org/en-US/docs/Web/API/Document

//document.createTextNode() 
            const box=document.getElementById("box");
            const text=document.createTextNode('kaivon');
            box.appendChild(text);
            
            //document.createAttribute()    创建属性节点
            const cl=document.createAttribute('class');
            cl.value='box';
            box.setAttributeNode(cl);
            
            //document.createComment()      创建注释节点
            const comment=document.createComment('这是一个注释');
            box.appendChild(comment);
            
            //document.createDocumentFragment   创建文档片段
            const fg=document.createDocumentFragment();
            const span=document.createElement("span");
            const strong=document.createElement("strong");
            span.innerHTML='这是一个文档片段';
            strong.innerHTML='这又是一个文档片段';
            fg.appendChild(span);
            fg.appendChild(strong);
            
            box.appendChild(fg);