JavaScript DOM操作详解（附带实例）

DOM（Document Object Model，文档对象模型）可以处理 XML、HTML、XHTML 等格式的文档模型，页面中主要使用 document 对象等资源进行操作。

JavaScript DOM获取元素

操作页面内容，首先需要获取相应的元素或节点对象，通过 document 对象中的一些方法和属性可以完成这些工作，如：

getElementById() 方法：通过元素的 id 属性值获取唯一的元素对象；
getElementsByClassName() 方法：通过元素的 class 属性值获取元素对象，返回相应的元素集合；
getElementsByName() 方法：通过元素的name属性值获取元素对象，返回相应的元素集合；
getElementsByTagName() 方法：通过元素类型获取元素对象，返回相应的元素集合，如 document.getElementsByTagName("p") 获取所有段落元素；
通过 document 中的元素集合属性，如 images 属性获取页面中所有 img 元素的集合、links 属性获取所有含有 href 属性的 a 元素集合等。

下面的代码演示了 document.getElementById() 方法的应用。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="e1">元素一</div>
<div id="e2">元素二</div>
</body>
</html>
<script>
    var e = document.getElementById("e1");
    window.alert(e.innerText);
</script>

代码中，首先使用 document.getElementById() 方法获取 id 为 e1 的元素，其次通过元素对象的 innerText 属性获取其中的文本内容，并由消息对话框显示，代码执行结果见下图。

页面中的多个元素可能使用相同的 class 属性值，获取这些元素时可以使用 document.getElementsByClassName() 方法，它会返回一个由这些元素组成的集合，下面的代码演示了相关的操作：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="ea">元素一</div>
<div class="ea">元素二</div>
<div class="ea">元素三</div>
</body>
</html>
<script>
    var arr = document.getElementsByClassName("ea");
    for (var i = 0; i < arr.length; i++)
        window.alert(arr[i].innerText);
</script>

执行代码后会显示三个消息对话框，分别显示了三个 div 元素中的文本内容。

页面中，多个元素也可能有相同名称，如 input 元素中的 checkbox、radio 等类型。下面的代码演示了如何使用 document.getElementsByName() 方法获取同名元素集合：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" method="get">
<label>性别</label>
<input type="radio" name="sex" value="0" checked="checked" /> 保密
<input type="radio" name="sex" value="1" /> 先生
<input type="radio" name="sex" value="2" /> 女士
</form>
</body>
</html>
<script>
    var arr = document.getElementsByName("sex");
    for (var i = 0; i < arr.length; i++)
        window.alert(arr[i].value);
</script>

页面会显示三个消息对话框，分别显示三个 radio 元素的 value 属性，即 0、1、2。需要获取已选择项的值，可以参考如下代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" method="get">
<p>
<label>性别</label>
<input type="radio" name="sex" value="0" checked="checked" /> 保密
<input type="radio" name="sex" value="1" /> 先生
<input type="radio" name="sex" value="2" /> 女士
</p>
<p>
<button type="button" onclick="btnTest();">测试</button>
</p>
</form>
</body>
</html>
<script>
    function btnTest() {
        var arr = document.getElementsByName("sex");
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].checked == true) {
                window.alert("选中的值：" + arr[i].value);
                return;
            }
        }
    }
</script>

代码的执行结果如下图所示：

通过 document.getElementsByTagName() 方法，可以获取指定类型的元素集合，即通过元素标签名获取一组元素，下面的代码演示了相关的操作：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
</body>
</html>
<script>
    var arr = document.getElementsByTagName("p");
    for (var i = 0; i < arr.length; i++)
        window.alert(arr[i].innerText);
</script>

执行代码后会通过三个消息对话框分别显示三个 p 元素中的文本内容。

document 对象中定义了一些属性，用于获取特殊元素的集合（如图片、链接等），常用的属性包括：

images：包含了页面中所有 img 元素的集合；
links：包含了页面中含有 href 属性的 a 元素的集合；
forms：包含了页面中所有表单（form 元素）的集合；
applets：包含了页面中所有 applet 应用集合；
embeds：包含了所有 embed 元素集合。

下面的代码演示了 images 属性的应用：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    #slide img {
        display:none;
    }
</style>
</head>
<body>
<div id="slide">
    <img id="img_earth" src="/img/earth.png" alt="地球" />
    <img id="img_mars" src="/img/mars.png" alt="火星" />
    <img id="img_jupiter" src="/img/jupiter.png" alt="木星" />
</div>
</body>
</html>
<script>
    var arrImage = document.images;
    var curSlide = -1;
    var maxIndex = arrImage.length - 1;
    // 切换下一张
    function nextSlide() {
        curSlide = curSlide + 1;
        if (curSlide > maxIndex) curSlide = 0;
        for (var i = 0; i <= maxIndex; i++) {
            if (i == curSlide)
                arrImage[i].style.display = "block";
            else
                arrImage[i].style.display = "none";
        }
        // 下一张
        setTimeout(nextSlide, 1000);
    }
    // 开始播放
    nextSlide();
</script>

本例实现了一个简单的幻灯播放效果，页面会循环显示地球、火星和木星图片。代码中，可以通过 setTimeout() 函数的第二个参数修改图片切换的间隔时间。

此外，如果 img 元素中定义了 name 属性，还可以在索引中使用这个名称来访问图片元素，如 document.images["img_earth"]。

JavaScript DOM节点对象

节点（node）和元素的概念比较容易混淆。在页面中，或者说 DOM 模型中，节点类型有多种，而元素（element）只是其中的一种，常用的节点类型如下：

1 (ELEMENT_NODE)
3 (TEXT_NODE)

常用的节点类型是 1 和 3，也就是使用标记定义的元素节点，以及单纯的文本节点。

获取一个节点对象后，可以使用下面的属性获取节点信息：

nodeName 属性：返回元素标记名称的大写形式，如 P、INPUT 等；
nodeValue 属性：返回元素的值，没有时返回 null 值；
nodeType 属性：返回节点类型，如元素节点（1）和文本节点（3）。

下面的代码演示了这几个属性的应用：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
    <p>
        <label>用户名</label>
        <input id="username" name="username" maxlength="15" size="15" />
    </p>
    <p>
        <button onclick="btnTest();">测试</button>
    </p>
</form>
</body>
</html>
<script>
    function btnTest() {
        var e = document.getElementById("username");
        document.write(" 节点名称： " + e.nodeName + "<br>");
        document.write(" 节点类型： " + e.nodeType + "<br>");
        document.write(" 节点的值： " + e.nodeValue + "<br>");
    }
</script>

页面初始效果见下图：

单击“测试”按钮后，页面显示效果见下图：

与元素操作不同，通过节点对象可以直接操作页面中的文本内容，如下面的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p id="p1">段落一</p>
</body>
</html>
<script>
    var e = document.getElementById("p1");
    var t = e.childNodes[0];
    document.write(" 节点名称： " + t.nodeName + "<br>");
    document.write(" 节点类型： " + t.nodeType + "<br>");
    document.write(" 节点的值： " + t.nodeValue + "<br>");
</script>

代码执行结果见下图：

本例中，文本节点的 nodeName 属性会返回 #text，数字 3 表示节点类型为文本节点，而文本节点的值就是文本内容。

关于文本节点，需要特别注意的是，在处理 DOM 模型时，很多浏览器会将元素之间的空白字符（如换行符、空格等）当作文本节点来处理，这样，在页面中就可能多出很多并不期望的节点对象。下面的代码演示了这一特性。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="article1">
    <h1 id="h1">标题一</h1>
    <p id="p1">段落一</p>
    <p id="p2">段落二</p>
    <p id="p3">段落三</p>
</div>
</body>
</html>
<script>
    var eDiv = document.getElementById("article1");
    var e = eDiv.firstChild;
    alert(e.nodeName);
</script>

消息对话框中会显示 #text。表面上看，article1 中的第一个节点应该是 h1，而本例中却显示为文本节点，它是从 <div id="article1"> 标记后的换行符。

处理一系列的节点对象时，应注意文本节点的问题，如果已明确处理的内容中没有多余的空白字符就没有问题，如果无法确认，需要根据实际情况选择正确的方式来处理页面中的节点。

获取一个节点对象后，还可以获取与当前节点相关的节点对象或集合，常用的成员包括：

node.parentNode 属性：获取 node 节点的上级节点（Node类型）；
node.hasChildNodes() 方法：判断 node 节点中是否有子节点（Boolean 类型）；
node.firstChild 属性：返回 node 节点中的第一个子节点（Node 类型），没有则返回 undefined 值；
node.lastChild 属性：返回 node 节点中的最后一个子节点（Node 类型），没有则返回 undefined 值；
node.childNodes 属性：返回 node 节点所有子节点的集合；
node.appendChild() 方法：在 node 节点中添加子节点；
node.insertBefore(x,y) 方法：node 节点中，在 y 节点前添加 x 节点。

操作节点时，还可以根据需要动态创建，如：

document.createElement() 方法：根据元素名称创建元素节点；
document.createTextNode() 方法：根据文本内容创建文本节点。

下面的代码演示了添加节点的方法，会在 div1 元素中的 p2 元素前添加一个 p 元素，并显示“段落三”：

<div id="div1">
    <p id="p1">段落一</p>
    <p id="p2">段落二</p>
</div>
<script>
    var div1 = document.getElementById("div1");
    var p2 = document.getElementById("p2");
    var p3 = document.createElement("p");
    p3.appendChild(document.createTextNode("段落三"));
    div1.insertBefore(p3, p2);
</script>

代码执行结果见下图：

innerHTML和innerText属性

虽然可以使用节点对象操作页面内容，但对于熟悉 HTML 元素的开发者来讲，有更加灵活的方法处理页面内容，如元素的 innerText 属性和 innerHTML 属性，这两个属性都定义为字符串类型，但它们对字符串内容的处理方式不同。

其中，innerText 属性将内容当作文本处理，而 innerHTML 属性则将内容解析为 HTML 代码，可以使用标签生成页面元素。

下面的代码演示了这两个属性的应用：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p id="p1">段落一</p>
<p id="p2">段落二</p>
</body>
</html>
<script>
    var p1 = document.getElementById("p1");
    var p2 = document.getElementById("p2");
    var s = "<b>加粗文本</b>";
    p1.innerText += s;
    p2.innerHTML += s;
</script>

代码中，使用 += 运算符将字符串内容分别追加到两个 p 元素中，代码执行结果见下图：

DOM操作元素属性与样式

接下来介绍如何通过元素对象操作元素的属性和样式。

首先，HTML 元素的属性会映射为元素对象的一系列属性，执行下面的代码会通过表单元素中的 value 属性读取或设置元素中显示的数据。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>
    <label for="username">用户名</label>
    <input id="username" name="username" maxlength="15" size="15" />
</p>
<p>
    <label for="sex">性别</label>
    <select id="sex" name="sex">
        <option value="0" selected>保密</option>
        <option value="1">男</option>
        <option value="2">女</option>
    </select>
</p>
<p>
    <button onclick="btnTest();">测试</button>
</p>
</body>
</html>
<script>
    function btnTest() {
        var username = document.getElementById("username");
        username.value = "Tom";
    }
</script>

页面显示时，用户名显示为空，单击“测试”按钮，用户名文本框中会显示 Tom，代码执行结果见下图：

需要获取用户名文本框中的数据，可以参考下面的代码：

<script>
    function btnTest() {
        var username = document.getElementById("username");
        alert(username.value);
    }
</script>

页面中的 select 和 option 元素定义了一个显示性别的下拉列表，此时，可以通过 select 对象的 value 属性来操作选项，如下面的代码可以设置选中的项目为“男”（值 1）：

<script>
    function btnTest() {
        var sex = document.getElementById("sex");
        sex.value = 1;
    }
</script>

除了使用元素对象的属性，还可以使用 setAttribute() 和 getAttribute() 方法设置和读取元素的属性值。其中，setAttribute() 方法包括两个参数，参数一为属性名，参数二为属性值，如下面的代码：

<script>
    function btnTest() {
        var username = document.getElementById("username");
        username.setAttribute("value", "Jerry");
    }
</script>

下面的代码演示了 getAttribute() 方法的使用：

<script>
    function btnTest() {
        var username = document.getElementById("username");
        alert(username.getAttribute("maxlength"));
    }
</script>

请注意，使用 getAttribute() 方法时，如果参数指定了元素中没有定义的属性，方法将返回 null 值。

如果需要通过编程改变元素的样式，可在元素的 style 属性中进一步调用样式属性名称。如下面的代码：

<script>
    function btnTest() {
        var username = document.getElementById("username");
        username.style.backgroundColor = "#eee";
    }
</script>

本例中，单击“测试”按钮后，用户名文本框的背景色会变成灰色。

大多数情况下，可能会直接使用属性，而不是使用 setAttribute() 和 getAttribute() 方法。不过，在一些情况下，setAttribute() 方法编写代码可能更加灵活，例如，同时设置多个 CSS 样式时，就可以直接设置元素的 style 属性，如下面的代码：

<script>
    function btnTest() {
        var username = document.getElementById("username");
        username.setAttribute("style",
            "font-weight:bold;background-color:steelblue;");
    }
</script>

单击“测试”按钮后，用户名文本框中的字体会加粗，颜色变为 steelblue 色，背景会变为浅灰色。

JavaScript DOM操作详解（附带实例）

JavaScript DOM获取元素

JavaScript DOM节点对象

innerHTML和innerText属性

DOM操作元素属性与样式

相关文章