DOM——Document Object Model
document 对象
document
对象是文档的根节点。
常用方法
方法 | 描述 |
---|---|
document.open() | 清除当前文档所有内容,使得文档处于可写状态 |
document.write() | 向当前文档写入内容。 |
document.querySelector() | 接受一个 CSS 选择器作为参数,返回匹配该选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null。 |
document.querySelectorAll() | 返回所有匹配给定选择器的节点。 |
document.getElementById() | 返回带有指定 ID 的元素。 |
document.getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。注意:里面的标签名称要大写 |
document.getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
document.createElement() | 创建元素节点,并返回该节点。 |
Node 接口
常用属性
浏览器提供一个原生的节点对象Node
,所有 DOM 节点都继承了 Node 接口,拥有一些共同的属性和方法。
- Node.nodeType
返回一个整数值,表示节点的类型。
元素类型 | NodeType |
---|---|
元素 | 1 |
属性 | 2 |
文本 | 3 |
注释 | 8 |
文档 | 9 |
Node.nodeValue
nodeValue属性返回一个字符串,表示当前节点本身的文本值,该属性可读写。
只有文本节点(text)和注释节点(comment)有文本值,其他类型的节点一律返回null。
常用方法
- Node.appendChild()
接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点。
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
- Node.insertBefore()
在某个元素之前插入元素。
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
- Node.removeChild()
接受一个子节点作为参数,用于从当前节点移除该子节点。
var divA = document.getElementById('A');
divA.parentNode.removeChild(divA);
- Node.replaceChild()
replaceChild()接受两个参数:要插入的元素和要替换的元素
parentNode.replaceChild(newChild, oldChild);
- Node.cloneNode()
接受一个布尔值作为参数,表示是否同时克隆子节点。它的返回值是一个克隆出来的新节点。
var cloneUL = document.querySelector('ul').cloneNode(true);
Element对象
常用属性
- Element.innerHTML
- Element.scrollHeight,Element.scrollWidth,Element.scrollLeft,Element.scrollTop
- Element.style
常用方法
- Element.getAttribute()
或许当前节点的属性的属性值
node.getAttribute('id');
- Element.setAttribute()
设置元素属性
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");
- Element.removeAttribute()
删除元素属性
node.removeAttribute('id');
- Element.querySelector()
接受 CSS 选择器作为参数,返回父元素的第一个匹配的子元素。如果没有找到匹配的子元素,就返回null。
var content = document.getElementById('content');
var el = content.querySelector('p');
// 返回content节点的第一个p元素。
- Element.querySelectorAll()
- Element.getElementsByClassName()
- Element.getElementsByTagName()