JavaScript（1）

最新推荐文章于 2024-04-18 20:01:43 发布

晨识草

最新推荐文章于 2024-04-18 20:01:43 发布

阅读量246

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/lichen_yun/article/details/69566977

版权

web 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

1.getElementById

DOM是一棵树，节点树。元素节点、文本节点、属性节点。
例子：

<p id="text">This is text<p>

其中p是元素节点，id是属性节点，”This is text”是文本节点。文本节点总是被包含在元素节点的内部，但并非所有的元素节点都包含有文本节点。属性节点总是被包含在元素节点当中，因为常常被放在起始标签中。

js区别字母的大小写，所以需要注意getElementById不能够携程GetElementById或者是其他错误的形式。
测试实例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="recipe.css" type="text/css" rel="stylesheet" media="screen"/>
        <script type="text/javascript" src="test.js"></script>
        <link href="pictures/favicon.ico" type="image/gif" rel="shortcut icon" />
    </head>
    <body>
        <h1>What to buy</h1>
        <p title="a gentle reminder">Don't forget to buy this stuff</p>
        <ul id="purchases">
            <li>A tin of beans</li>
            <li>Cheeese</li>
            <li>Milk</li>
        </ul>
    </body>
</html>

alert(typeof document.getElementById("purchases"));

2.getElementsByTagName

getElementById返回的是一个对象。getElementByTagName返回的是一个对象数组

注：当直接在js文件中打代码如下：

alert(document.getElementsByTagName("li").length);

输出的结果是0！而不是3
但是当代码为：

 window.onload=function() {
    alert(document.getElementsByTagName("li").length);
}

输出的结果为3！

window.onload=function() {
    alert(document.getElementsByTagName("li").length);
    var items = document.getElementsByTagName("li");
    for (var i = 0; i < items.length; ++i) {
        alert(typeof items[i]);
    }
}

alert(document.getElementsByTagName("*").length);
//通配符得到所有的元素节点的数目

3.getAttribute()

window.onload=function() {
    var items = document.getElementsByTagName("p");
    for (var i = 0; i < items.length; ++i) {
        alert(items[i].getAttribute("title"));
    }
}

注：getAttribute()方法不能够通过document对象进行调用，只能够通过一个元素节点对象进行调用。可以与前面学习的getElementByTagName结合使用，注意如果属性值为空值的话，返回的结果是null。

window.onload=function() {
    var items = document.getElementsByTagName("p");
    for (var i = 0; i < items.length; ++i) {
        var title_text = items[i].getAttribute("title");
        if (title_text) alert(title_text);
    }
}

4.setAttribute()方法

object.setAttribute(name, value);

window.onload=function() {
    var shopping = document.getElementById("purchases");
    alert(shopping.getAttribute("title"));
    shopping.setAttribute("title", "a list of goods");
    alert(shopping.getAttribute("title"));
}

注意如果是使用getElementsByTagName的话，即使只有一个元素节点，但是因为返回的是一个对象数组，所以也需要使用items[0].getAttribute(name);而不能直接使用items.getAttribute(name).

另外需要注意的是虽然我们看到的alert的title的结果已经改变，但是实际文档中的title并没有改变
“`

总结：

（1）DOM是一棵节点树
（2）getElementById返回的是一个对象。该对象对应着文档里一个特定的元素节点
（3）getElementsByTagName返回的是一个对象数组。
（4）每个节点都是一个对象。
（5）getAttribute()方法和setAttribute()方法使用元素节点进行调用。

晨识草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（1）

1.getElementByIdDOM是一棵树，节点树。元素节点、文本节点、属性节点。例子：<p id="text">This is text<p>其中p是元素节点，id是属性节点，”This is text”是文本节点。文本节点总是被包含在元素节点的内部，但并非所有的元素节点都包含有文本节点。属性节点总是被包含在元素节点当中，因为常常被放在起始标签中。js区别字母的大小写，所以需要注意getE
复制链接

扫一扫

专栏目录