Skip to content

DOM

DOM(文档对象模型)

document 对象是 HTMLDocument(继承自 Document类型) 的一个实例，表示整个 HTML 页面

获取元素节点

  • 通过 ID 来查找
    var div1 = document.getElementById("div1"); id 有多个只会获取第一个 -> id的唯一性
    只能通过 document 使用

  • 通过标签名字来查找
    var ps = document.getElementsByTagName("p"); // 返回数组

  • 通过 class 来查找
    var ps = document.getElementsByClassName("txt"); // 返回数组

1
2
var div1 = document.getElementById("div1");
var ps = div1.getElementsByClassName("txt1");

创建添加和删除节点

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var div1 = document.getElementById("div1");
// 创建
var p = document.createElement("p");
// 创建文本节点
var p1txt = document.createTextNode("p1");
p.appendChild(p1txt);
// 添加
div1.appendChild(p);
// 删除 div2
var div2 = document.getElementById("div2");
// div1.removeChild(div2);
// 自己删除自己
div2.parentNode.removeChild(div2);

修改节点属性和内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
var img1 = document.getElementById("img1");
img1.src = "cai.jpg";
// class 是 js 的关键词
img1.className = "box1";
img1.style.width = "100px";
// 获取属性
img1.getAttribute("dat");
// 设置
img1.setAttribute("dat1", "11");
img1.removeAttribute("dat1");
img1.removeAttribute("src");
img1.removeAttribute("src", "logo.png");
var p1 = document.getElementById("p1");
p1.innerHTML = "这是innerhtml <a href='www.baidu.com'>this is a</a>";
p1.textContent = "这是innerhtml <a href='www.baidu.com'>this is a</a>"; // 纯文本