首页 > 编程笔记 > JavaScript笔记 阅读:41

JavaScript DOM操作详解(附带实例)

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

JavaScript DOM获取元素

操作页面内容,首先需要获取相应的元素或节点对象,通过 document 对象中的一些方法和属性可以完成这些工作,如:
下面的代码演示了 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 属性的应用:
<!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 和 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"> 标记后的换行符。

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

获取一个节点对象后,还可以获取与当前节点相关的节点对象或集合,常用的成员包括:
操作节点时,还可以根据需要动态创建,如:
下面的代码演示了添加节点的方法,会在 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 色,背景会变为浅灰色。

相关文章