JavaScript DOM节点方法与属性

方法

获取

getElementById

返回带有指定 ID 的元素

getElementsByTagName

返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

getElementsByClassName

返回包含带有指定类名的所有元素的节点列表

创建

createElement

新的标签(元素节点) = document.createElement("标签名");

插入

appendChild

父节点.appendChild(新的子节点);
用于添加新元素到父元素尾部

insertBefore

父节点.insertBefore(新的子节点,作为参考的子节点)

• 在参考节点前插入一个新的节点。
• 如果参考节点为null，那么他将在父节点里面的最后插入一个子节点。

删除

removeChild

父节点.removeChild(子节点);
删除自己：node1.parentNode.removeChild(node1);

复制

cloneNode

要复制的节点.cloneNode();
要复制的节点.cloneNode(true);

• 不带参数/带参数false：只复制节点本身，不复制子节点。
• 带参数true：既复制节点本身，也复制其所有的子节点。

替换

replaceChild

要被替换的父元素.replaceChild(要替换的元素，要被替换的子元素)

其他

方法	描述
createAttribute()	创建属性节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。
元素节点.setAttribute("属性名", "新的属性值");
removeAttribute()	删除节点属性
元素节点.removeAttribute(属性名);

• 元素节点.属性和元素节点[属性]：绑定的属性值不会出现在标签上。
• get/set/removeAttribute：绑定的属性值会出现在标签上。
• 两种形式不能混用

属性

value

innerHTML

双闭合标签里面的内容（包含标签）。

innerText

双闭合标签里面的内容（不包含标签）。（老版本的火狐用textContent）
修改内容不会改变标签本身

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有：

元素类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9

nodeName属性

nodeName 属性规定节点的名称。

• nodeName 是只读的
• 元素节点的 nodeName 与标签名相同
• 属性节点的 nodeName 与属性名相同
• 文本节点的 nodeName 始终是 #text
• 文档节点的 nodeName 始终是 #document

注意： nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性

nodeValue 属性规定节点的值。

• 元素节点的 nodeValue 是 undefined 或 null
• 文本节点的 nodeValue 是文本本身
• 属性节点的 nodeValue 是属性值

classlist

dom.classList.add("hide");