Doucment对象 - Githubissues

nicoleJT914 commented 7 years ago

Document的属性

// 返回 document 的直属后代<html>元素
documnet.documentElement
document.URL

Document接口是ParentNode接口的扩展

// 返回子elements 的 HTMLCollection
// 注意兼容性
ParentNode.children
Element.firstElementChild
ParentNode.childElementCount

HTML文档的 Document 接口继承自 HTMLDocument 接口

// 返回当前页面中获得焦点的元素
// 返回<input>或者<textarea>元素,如果用户在文本输入框中选中了一些文本,使用selectionStart和selectionEnd属性获得选中文本内容.
document.activeElement
document.body
document.cookie
document.domain
// 返回表单 HTMLCollection集合
document.forms
document.images
// 返回一个 Location 对象，包含有文档的 URL 相关的信息
document.location
// 描述了文档的加载状态
// loading, interactive(文档已被解析完成加载，但诸如图像，样式表和框架之类的子资源仍在加载), complete
document.readyState
// 事件
document.onreadyStatechange

nicoleJT914 commented 7 years ago

Document的方法

// 创建文档片段，但其不是DOM树的一部分。子元素插入到文档片段中不会引起页面reflow。
// DocumentFragment节点本身不能被插入当前文档。一旦DocumentFragment节点被添加进当前文档，它自身就变成了空节点，可以被再次使用。
document.createDocumentFragment()
document.createElement()

操作DOM

document.getElementById()
docuemnt.querySelector()
// 返回HTMLCollection
document.getElementsByClassName()
document.getElementsByTagName()
// 返回NodeLists
document.querySelectorAll()
// 继承自 HTMLDocument 接口的方法
document.getElementsByName()
// 当前文档是否获得焦点
document.hasFocus()

nicoleJT914 commented 7 years ago

NodeList对象，HTMLCollection对象

1.NodeList和HTMLCollection的相同点：

NodeList和HTMLCollection都是构造函数，DOM的一些属性和方法返回的是他们俩的实例：
```
tyoeof NodeList   // "function"
tyoeof HTMLCollection  // "function"
```
两者的实例对象都是一个类似数组的对象

2.NodeList和HTMLCollection的区别：

HTMLCollection实例对象的成员只能是Element节点，NodeList实例对象的成员可以包含其他节点
HTMLCollection实例对象都是动态集合，Nodelist可以是静态集合或者动态集合
对于Node.childNodes，返回实时集合；对于document.querySelectorAll()，返回静态集合！！

HTMLCollection可以用id属性或name属性引用节点元素，NodeList只能用数字索引引用

// NodeList
nodeItem = NodeList[item]
// HTMLCollection
var img = imgs[1]   //数字索引
var elem = forms['myFrom']  //ID索引
var item = radio['sex'] //name索引

nicoleJT914 / blog

Doucment对象 #20

Document的属性

Document的方法

NodeList对象，HTMLCollection对象