JavaScript中DOM详解

DOM（Document Object Model）是指用于处理HTML或XML文档的编程接口。我们可以使用JavaScript来操纵和更新HTML文档，这就需要用到DOM。本篇攻略将介绍如何用JavaScript来操作DOM。

DOM是什么？

DOM是HTML文档的对象表示。浏览器将HTML文档解析成对象树，由此可以让我们使用JavaScript来操纵和更新这些对象。DOM树由节点组成，节点可以是元素、属性、文本等等。节点可以有父子关系、兄弟关系等，整个文档形成一个树状的结构。

获取元素

要操作DOM，我们需要先获取到文档中的元素。可以通过以下几种方式获取元素：

getElementById

getElementById方法可以通过ID属性获取元素。

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

getElementsByTagName

getElementsByTagName方法可以通过标签名获取元素，返回一个数组。我们可以通过下标来获取具体的元素。

var elements = document.getElementsByTagName("tagName");
var element = elements[0];

getElementsByClassName

getElementsByClassName方法可以通过类名获取元素，返回一个数组。

var elements = document.getElementsByClassName("className");
var element = elements[0];

querySelector

querySelector方法可以通过CSS选择器获取元素。

var element = document.querySelector("selector");

操作元素

获取元素之后，我们就可以对元素进行操作了。

内容操作

我们可以通过innerHTML属性来获取或者设置元素的内容。

var element = document.getElementById("idName");
var content = element.innerHTML;   // 获取元素内容
element.innerHTML = "Hello World"; // 设置元素内容

样式操作

我们可以通过style属性来获取或者设置元素的样式。

var element = document.getElementById("idName");
var style = element.style;      // 获取元素样式
element.style.color = "red";   // 设置元素样式

属性操作

我们可以通过getAttribute和setAttribute方法来获取或者设置元素的属性。

var element = document.getElementById("idName");
var attr = element.getAttribute("attributeName");  // 获取元素属性
element.setAttribute("attributeName", "value");     // 设置元素属性

示例说明

示例一

下面的示例演示了如何通过querySelector获取元素。

<div id="test">Hello World</div>

var element = document.querySelector("#test");
console.log(element.innerHTML);  // 输出 "Hello World"

在上面的代码中，我们使用了CSS选择器“#test”来获取元素，这里的“#”表示ID选择器。

示例二

下面的示例演示了如何通过innerHTML修改元素的内容：

<div id="test">Hello World</div>

var element = document.getElementById("test");
element.innerHTML = "Hello DOM";
console.log(element.innerHTML);  // 输出 "Hello DOM"

在上面的代码中，我们使用innerHTML属性将元素的内容修改为“Hello DOM”。