getElementById,getElementsByName,getElementsByTagName,getElementsByClassName四者之间的区别

最新推荐文章于 2024-05-01 21:03:53 发布

PHP__廊外诗鸽

最新推荐文章于 2024-05-01 21:03:53 发布

阅读量6.2k

点赞数 2

分类专栏： javascript 文章标签： javascript 函数 dom

本文链接：https://blog.csdn.net/tashanhongye/article/details/72794484

版权

javascript 专栏收录该内容

29 篇文章 3 订阅

订阅专栏

在《Javascript DOM 编程艺术》与 W3school 中是这样定义的：

getElementById():这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。

下面这个案例我是想通过触发test()函数后，给一个id为“div1”的div层添加背景色为黄颜色。

<!DOCTYPE html>
<html>
<head>
    <title>shopping list</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/css.css" rel="stylesheet" type="text/css">
</head>
    <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 class="sale">Cheese</li>
        <li class="sale important">milk</li>
    </ul>
    <div id="div1">helloworld</div>
    <input type="button" value="按钮" onclick="test()"/>
    <script>
        function test(){
            document.getElementById("div1").style.backgroundColor="yellow";
        }
    </script>
</body>
</html>

输出结果：

这里写图片描述

getElementsByName():方法可返回带有指定名称的对象的集合。

这个案例是为获取无序列表中名字name叫“t”的li 的长度。

<!DOCTYPE html>
<html>
<head>
    <title>shopping list</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/css.css" rel="stylesheet" type="text/css">
</head>
    <h1>what to buy</h1>
    <P title="a gentle reminder">Don't forget to buy this stuff.</P>
    <ul id="purchases">
        <li name="t">A tin of beans</li>
        <li name="t" class="sale">Cheese</li>
        <li name="t" class="sale important">milk</li>
    </ul>
    <div id="div1">helloworld</div>
    <input type="button" value="按钮" onclick="test()"/>
    <script>
        function test(){
            alert(document.getElementsByName("t").length);
        }
    </script>
</body>
</html>

输出结果：

这里写图片描述

getElementsByTagName():方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。这个理解起来有点拗口。
W3school中是这样定义的：此方法可返回带有指定标签名的对象的集合。

下面这个我是要获得script标签的长度

<!DOCTYPE html>
<html>
<head>
    <title>shopping list</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/css.css" rel="stylesheet" type="text/css">
</head>
    <h1>what to buy</h1>
    <P title="a gentle reminder">Don't forget to buy this stuff.</P>
    <ul id="purchases">
        <li name="t" class="sale">A tin of beans</li>
        <li name="t" class="sale">Cheese</li>
        <li name="t" class="sale important">milk</li>
    </ul>
    <div id="div1">helloworld</div>
    <input type="button" value="按钮" onclick="test()"/>
    <script>
        function test(){
            alert(document.getElementsByTagName("script").length);
        }
    </script>
</body>
</html>

输出结果：

这里写图片描述

getElementsByClassName():方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

下面这个是要设置class=”sale”且数组下标为：1的li的背景色为：red

<!DOCTYPE html>
<html>
<head>
    <title>shopping list</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/css.css" rel="stylesheet" type="text/css">
</head>
    <h1>what to buy</h1>
    <P title="a gentle reminder">Don't forget to buy this stuff.</P>
    <ul id="purchases">
        <li name="t" class="sale">A tin of beans</li>
        <li name="t" class="sale">Cheese</li>
        <li name="t" class="sale important">milk</li>
    </ul>
    <div id="div1">helloworld</div>
    <input type="button" value="按钮" onclick="test()"/>
    <script>
        function test(){
            var x=document.getElementsByClassName("sale");
            x[1].style.backgroundColor="red";
        }
    </script>
</body>
</html>

输出结果：

这里写图片描述

PHP__廊外诗鸽

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
getElementById,getElementsByName,getElementsByTagName,getElementsByClassName四者之间的区别

在《Javascript DOM 编程艺术》与 W3school 中是这样定义的： getElementById():这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。下面这个案例我是想通过触发test()函数后，给一个id为“div1”的div层添加背景色为黄颜色。<!DOCTYPE html><html><head> <title>shopping list</t
复制链接

扫一扫