黑马程序员技术交流社区

标题: 关于javascript中属性值的获取 [打印本页]

作者: Lincain 时间: 2019-6-4 10:51
标题: 关于javascript中属性值的获取
在学习JavaScript的过程中，我们经常需要获取节点的属性值内容，而js中获取属性值有两种方式。通过下面的案例来展示：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

        <head>

                <meta charset="UTF-8">

                <title>04_getAttribute方法的使用</title>

        </head>

        <body>

                <a href="#" id="url"/>        

                </script>

        </body>

</html>

以上面的代码为例，如果我们需要获取<a>标签中的href属性值，第一种方式如下：

[HTML] 纯文本查看 复制代码

<script type="text/javascript">

                        var url = document.getElementById("url");

                        var href = url.href;

document.write(href);

                </script>

我们将获取的字符串在浏览器显示出来，结果如下：

[HTML] 纯文本查看 复制代码

http://127.0.0.1:8020/Day024/html/%E8%87%AA%E4%B9%A0/04_getAttribute%E6%96%B9%E6%B3%95%E7%9A%84%E4%BD%BF%E7%94%A8.html?__hbt=1559616231501#

另一种方式如下：

[HTML] 纯文本查看 复制代码

<script type="text/javascript">

var url = document.getElementById("url");

var href = url.getAttribute("href");

document.write(href);

</script>

将其结果显示在浏览器页面，结果如下：

[HTML] 纯文本查看 复制代码

可以看出通过上面两种方式获得的属性值差异还是很大的，第一种方式将超出了我们的预期，添加了很多附加信息，但这些可能并不是我们想要的。更多的时候，我们只需要属性值引号范围内的内容，所以在以后的应用中，我们最好是使用getAttribute()方法获取节点的属性值内容，这样获得的结果更方便我们后续的操作。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2