HTML DOM Attribute 对象属性方法小结

最新推荐文章于 2023-07-10 21:34:57 发布

Claire_TJ

最新推荐文章于 2023-07-10 21:34:57 发布

阅读量568

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

虽然写这个博客主要目的是为了给我自己做一个思路记忆录，但是如果你恰好点了进来，那么先对你说一声欢迎。我并不是什么大触，只是一个菜菜的学生，如果您发现了什么错误或者您对于某些地方有更好的意见，非常欢迎您的斧正！

学习来源：http://www.w3school.com.cn/jsref/dom_obj_attributes.asp

HTML DOM 节点

在 HTML DOM （文档对象模型）中，每个部分都是节点：

文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点

Attr 对象

在 HTML DOM 中，Attr 对象表示 HTML 属性。

HTML 属性始终属于 HTML 元素。

NamedNodeMap 对象

在 HTML DOM 中，NamedNodeMap 对象表示元素属性节点的无序集合。

NamedNodeMap 中的节点可通过名称或索引（数字）来访问。

属性和方法

属性 / 方法	描述
attr.isId	如果属性是 id 类型，则返回 true，否则返回 false。
attr.name	返回属性的名称。
attr.value	设置或返回属性的值。
attr.specified	如果已指定属性，则返回 true，否则返回 false。
nodemap.getNamedItem()	从 NamedNodeMap 返回指定的属性节点。
nodemap.item()	返回 NamedNodeMap 中位于指定下标的节点。
nodemap.length	返回 NamedNodeMap 中的节点数。
nodemap.removeNamedItem()	移除指定的属性节点。
nodemap.setNamedItem()	设置指定的属性节点（通过名称）。

测试

我的测试结果：每一个按钮点击后就可以出现相应的函数效果。

以下是源代码（有哪里需要我加注释的，欢迎在评论区与我交流）：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML DOM Attribute 对象</title>
    <style media="screen" type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        input {
            margin-left: 50px;
            margin-top: 10px;
            display: block;
            font-size: 20px;
        }

        p {
            margin-left: 50px;
            font-size: 20px;
        }

        .set {
            color: #FF6699;
        }
    </style>
    <script type="text/javascript">
        function IsID() {
            var p = document.getElementById('isid');
            p.innerHTML = p.attributes[0].isId + "<br />注释：Internet Explorer 或 Opera 不支持 isId 属性。";
        }

        function NAme() {
            var p = document.getElementById('name');
            p.innerHTML = "p标签的第一个属性的名称： " + p.attributes[0].name;
        }

        function VAlue() {
            var p = document.getElementById('value');
            p.innerHTML = "p标签的id值：  " + p.attributes[0].value;
        }

        function Specified() {
            var p = document.getElementById('specified');
            p.innerHTML = "查看p标签是否指定id属性：  " + p.attributes[0].specified;
        }

        function GetNamedItem() {
            var p = document.getElementById('getnameditem');
            p.innerHTML = "返回这个p标签的style属性：  " + p.attributes.getNamedItem("style").textContent;
        }

        function Length() {
            var p = document.getElementById('length');
            var inputs = document.getElementsByTagName('input')[5];
            p.innerHTML = "查看这个按钮有多少个属性 ： " + inputs.attributes.length;
        }

        function RemoveNamedItem() {
            var p = document.getElementById('remove');
            p.attributes.removeNamedItem("style");
        }

        function SET() {
            var p = document.getElementById('set');
            var set = document.createAttribute('class');
            set.nodeValue = 'set';
            p.attributes.setNamedItem(set);
        }
    </script>
</head>
<body>
<input type="button" value="attr.isId如果属性是 id 类型，则返回 true，否则返回 false。" onclick="IsID()">
<p id="isid"></p>
<input type="button" value="attr.name返回属性的名称。" onclick="NAme()">
<p id="name"></p>
<input type="button" value="attr.value设置或返回属性的值。" onclick="VAlue()">
<p id="value"></p>
<input type="button" value="attr.specified如果已指定属性，则返回 true，否则返回 false。" onclick="Specified()">
<p id="specified"></p>
<input type="button" value="nodemap.getNamedItem()从 NamedNodeMap 返回指定的属性节点。" onclick="GetNamedItem()">
<p id="getnameditem" style="color: #FF6699"></p>
<input type="button" value="nodemap.length返回 NamedNodeMap 中的节点数。" onclick="Length()">
<p id="length"></p>
<input type="button" value="nodemap.removeNamedItem()移除指定的属性节点。" onclick="RemoveNamedItem()">
<p id="remove" style="color: #FF6699">移除这个p标签的style属性：可以看到颜色变化。</p>
<input type="button" value="nodemap.setNamedItem()设置指定的属性节点（通过名称）。" onclick="SET()">
<p id="set">点击可以看到这个p标签的颜色变化。</p>
</body>
</html>

Claire_TJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML DOM Attribute 对象属性方法小结

虽然写这个博客主要目的是为了给我自己做一个思路记忆录，但是如果你恰好点了进来，那么先对你说一声欢迎。我并不是什么大触，只是一个菜菜的学生，如果您发现了什么错误或者您对于某些地方有更好的意见，非常欢迎您的斧正！学习来源：http://www.w3school.com.cn/jsref/dom_obj_attributes.aspHTML DOM 节点在 HTML DOM （...
复制链接

扫一扫