HTML DOM

HTML DOM 常用方法

方法	描述
getElementById()	返回带有指定 ID 的元素
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表
appendChild()	把新的子节点添加到指定节点
removeChild()	删除子节点
replaceChild()	替换子节点
insertBefore()	在指定的子节点前面插入新的子节点
createAttribute()	创建属性节点
createElement()	创建元素节点
createTextNode()	创建文本节点
getAttribute()	返回指定的属性值
setAttribute()	把指定属性设置或修改为指定的值

var element=document.getElementById("intro");

HTML DOM 常用属性

属性	描述
innerHTML	节点（元素）的文本值
parentNode	节点（元素）的父节点
firstChild	节点（元素）的首个子元素
lastChild	节点（元素）的最后一个子元素
childNodes	节点（元素）的子节点
nodeName	节点的名称
nodeValue	节点的值

var txt=document.getElementById("intro").innerHTML;
document.write(txt);

HTML DOM 修改

• 改变 HTML 内容

document.getElementById("p").innerHTML="New text!";

• 改变 CSS 样式

document.getElementById("p").style.color="blue";

• 改变 HTML 属性

document.getElementById("image").src = "new.jpg";

• 创建新的 HTML 元素

appendChild()将新元素作为父元素的最后一个子元素进行添加

// 创建新元素
var para = document.createElement("p");
// 创建文本节点
var node = document.createTextNode("This is a new paragraph");
// 向新元素追加文本节点
para.appendChild(node);
// 追加到已有的元素上
var element = document.getElementById("div");
element.appendChild(para);

insertBefore()指定的已有子节点之前插入新的子节点

var para=document.createElement("p");
var node=document.createTextNode("This is a new paragraph");
para.appendChild(node);

var element=document.getElementById("div");
var child=document.getElementById("p1");
element.insertBefore(para,child);

• 删除已有的 HTML 元素

//从父元素中删除子元素
var parent=document.getElementById("div");
var child=document.getElementById("p");
parent.removeChild(child);

// 在不引用父元素的情况下删除某个元素
var child=document.getElementById("p");
child.parentNode.removeChild(child);

• 替换 HTML 元素

var para=document.createElement("p");
var node=document.createTextNode("This is a new paragraph");
para.appendChild(node);

var parent=document.getElementById("div");
var child=document.getElementById("p1");
parent.replaceChild(para,child);