JavaScript学习笔记

最新推荐文章于 2021-03-04 09:24:03 发布

crazyyin

最新推荐文章于 2021-03-04 09:24:03 发布

阅读量474

点赞数

分类专栏： JavaScript 学习笔记文章标签： javascript 学习笔记

本文链接：https://blog.csdn.net/qq_34881462/article/details/52344759

版权

JavaScript 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

学习笔记

1 篇文章 0 订阅

订阅专栏

关于getAttribute setAttribute属性的记录

    今天学习打码过程中发现getAttribute 和setAttribute属性值得注意的一个问题，代码如下：

<body>
        <h2 title="清单" id="one">购物清单</h2>
        <ul>
            <li>欧星</li>
            <li>苹果</li>
            <li>香蕉</li>
            <li>荔枝</li>
        </ul>
    <script type="text/javascript">


            var shopping=document.getElementsByTagName("h2");
            var attr=shopping.getAttribute("title");
        alert(attr);

    </script>
</body>

在运行时发现报错如下：

 Uncaught TypeError: shopping.getAttribute is not a function

    在更改方法为：

var shopping=document.getElementsById("one");

    后方法正常运行。
    查阅《JavaScript DOM 编程艺术》发现getElementById返回的是一个object，而getElementByTagName和getElementByClassName的返回值是一个对象数组。
    查阅MDN

element.setAttribute(name, value);
element.getAttribute(attributeName);

element属于object，故出现以上现象。由此延伸：

<body>
    <!--<button id="btn" onclick="btnClick()">点我</button>-->
        <h2 title="清单" id="one">购物清单</h2>
        <ul>
            <li>欧星</li>
            <li>苹果</li>
            <li>香蕉</li>
            <li>荔枝</li>
        </ul>
    <script type="text/javascript">


            var shopping=document.getElementsByTagName("h2");
            var attr=shopping[0].getAttribute("title");
        alert(attr);

    </script>
</body>

运行正常，也证明了上诉观点。

crazyyin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记

关于getAttribute setAttribute属性的记录今天学习打码过程中发现getAttribute 和setAttribute属性值得注意的一个问题，代码如下：<body> <h2 title="清单" id="one">购物清单</h2> <ul> <li>欧星</li> <li>苹果</li>
复制链接

扫一扫