这一章通过JavaScript图片库案例，学习了一些DOM属性。

HTML代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>图片库</title>
    <link rel="stylesheet" href="styles/layout.css" media="screen" />
</head>
<script type="text/javascript" src="scripts/showPic.js"></script>

<body>
    <h1>Snapshots</h1>
    <ul>
        <li>
            <a href='images/1.jpg' title="黄昏海边" onclick="showPic(this);
            return false;">黄昏海边</a>
        </li>
        <li>
            <a href='images/2.jpg' title="大漠孤烟直" onclick="showPic(this);
            return false;">沙漠</a>
        </li>
        <li>
            <a href='images/3.jpg' title="湖泊" onclick="showPic(this);
            return false;">湖泊</a>
        </li>
        <li>
            <a href='images/4.jpg' title="可爱熊熊" onclick="showPic(this);
            return false;">可爱壁纸</a>
        </li>
        <li>
            <a href='images/5.jpg' title="哆啦A梦" onclick="showPic(this);
            return false;">哆啦A梦</a>
        </li>
    </ul>
    <img id="placeholder" src="images/gallery.png" alt="my image gallery" />
    <p id="description">Choose an image.</p>
</body>

</html>

几个DOM属性

1. childNodes属性

  • 用来获取任何一个元素的所有子元素
  • 使用方式：element.childNodes
  • 返回值：这个元素的所有子元素数组。包含所有类型的节点：元素节点、文本节点和属性节点。（实际上，文档里几乎每个东西都是一个节点，甚至连空格和换行符都是节点）

— 示例：输出body元素的全体子元素

function countBodyChildren() {
	let body_element = document.getElementsByTagName('body')[0];
	console.log(body_element.childNodes);
}

— 输出：
image

如图可见，body元素的子元素有9个，除了h1元素、ul元素、p元素、img元素四个外，还包括5个文本节点。

— 文本节点示例：
image

2. nodeType属性

  • 获取每个节点的type（元素节点、文本节点还是属性节点）
    • 元素节点的nodeType属性值：1
    • 属性节点的nodeType属性值：2
    • 文本节点的nodeType属性值：3
  • 使用方式：node.nodeType

— 示例：

let body_element = document.getElementsByTagName('body')[0];
alert(body_element.nodeType);

— 输出：1

3. nodeValue属性

  • 获取 or 设置节点的值
  • 获取节点的值使用方式：node.nodeValue
  • 设置节点的值使用方式：node.nodeValue = xxx
  • 注意，元素节点的nodeValue值是null。如果想获取p元素所包含的文本值，则需要获取元素所包含的文本值，则需要获取p元素的第一个子节点。

— 示例：输出 p元素的nodeValue 和 p的childNodes 以及 第一个子节点的nodeValue

function countBodyChildren() {
    let description = document.getElementsById('description');
    console.log(description.nodeValue);
    console.log(description.childNodes);
    console.log(description.childNodes[0].nodeValue);
}

— 输出：
image

— 示例：将p元素nodeValue值设置为’hello world’

function countBodyChildren() {
    let description = document.getElementById('description');
    description.childNodes[0].nodeValue = 'hello world';
    console.log(description.childNodes[0].nodeValue);
}

— 输出：
image

4. firstChild和lastChild属性

  • 指childNodes的第一个元素和最后一个元素，相当于简写，如下：

    • node.firstChild ——> node.childNodes[0]

    • node.lastChild ——> node.childNodes[node.childNodes.length - 1]

完整代码

1. HTML见上

2. JavaScript

function showPic(whichPic) {
    let source = whichPic.getAttribute('href');
    let placeholder = document.getElementById('placeholder');
    placeholder.setAttribute('src', source);
    let title = whichPic.getAttribute('title');
    let description = document.getElementById('description');
    description.firstChild.nodeValue = title;
}

3. CSS

body {
    font-family: 'Helvetica', 'Arial', serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
}

h1 {
    color: #333;
    background-color: transparent;
}

a {
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}

ul {
    padding: 0;
}

li {
    float: left;
    padding: 1em;
    list-style: none;
}

img {
    width: 80%;
    display: block;
    clear: both;
}

效果：
image

本章其它知识点

改变属性的方法除了setAttribute外，还可以使用非DOM的方法，比如改变某个input的value属性，

  • 使用setAttribute：element.setAttribute(‘value’, ‘the new value’)
  • 使用非DOM解决方案：element.value = ‘the new value’

非DOM解决方案是在DOM出现之前使用的方式，并非所有的属性都可以用这种方式设置属性，因此建议使用setAttribute，setAttribute可以修改文档中的任何一个元素的任何一个属性。

版权声明：本文为Ersonnnn原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Ersonnnn/p/14893957.html