JavaScript DOM对象

JavaScript DOM对象

了解更多请访问https://www.runoob.com/jsref/dom-obj-document.html

一、HTML DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

二、Document 对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

Document 常用对象属性和方法

属性 / 方法	描述
document.activeElement	返回当前获取焦点元素
document.adoptNode(node)	从另外一个文档返回 adapded 节点到当前文档。
document.body	返回文档的body元素
document.createAttribute()	创建一个属性节点
document.createElement()	创建元素节点。
document.createTextNode()	创建文本节点。
document.forms	返回对文档中所有 Form 对象引用。
document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

二、元素对象

在 HTML DOM 中, 元素对象代表着一个 HTML 元素。
元素对象 的 子节点可以是, 可以是元素节点，文本节点，注释节点。
NodeList 对象 代表了节点列表，类似于 HTML元素的子节点集合。

元素对象常用属性和方法

属性 / 方法	描述
element.appendChild()	为元素添加一个新的子元素
element.childNodes	返回元素的一个子节点的数组
element.children	返回元素的子元素的集合
element.classList	返回元素的类名，作为 DOMTokenList 对象。
element.firstChild	返回元素的第一个子节点
element.focus()	设置文档或元素获取焦点
element.getAttribute()	返回指定元素的属性值
element.getAttributeNode()	返回指定属性节点
element.getElementsByTagName()	返回指定标签名的所有子元素集合。
element. getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
element.id	设置或者返回元素的 id。
element.innerHTML	设置或者返回元素的内容。
element.insertBefore()	现有的子元素之前插入一个新的子元素
element.lastChild	返回的最后一个子节点
element.parentNode	返回元素的父节点
element.removeAttribute()	从元素中删除指定的属性
element.removeAttributeNode()	删除指定属性节点并返回移除后的节点。
element.removeChild()	删除一个子元素