前端知识——关于JavaScript的标签属性的修改

2019年5月14日 126次阅读 来源: 道杨

关于获取节点对象属性值的方法

有接触过JavaScript这门语言的朋友们都知道，在我们的JavaScript中存在着各种各样的节点属性。对于刚接触JavaScript的小白朋友们也许对节点属性的概念有点不太理解，花时间查阅一些专业资料，基本上99%的解释都是千篇一律，如：在文档对象模型中，每个节点都是一个对象。
看完了，你或许觉得太专业的，能不能有个通俗易懂的解释呀，有呀！我给出的解释是：
大家都知道JavaScript是由document（文档）+ Object（对象）+ Model（模型）这三大部分组成。

《前端知识——关于JavaScript的标签属性的修改》 奇丑无比的示意图

在我画的这张图片中，不难可以看出最大的蓝色椭圆（JavaScript）由3个红色圆（文档，对象，模型）构成，而3个红色圆又是由属于他们各自的黑色小圆（节点）构成的，并且黑色小圆又是由灰色的小圆（属性）构成。

或者你也可以把JavaScript理解为中国；文档，对象，模型理解为福建省，广东省，浙江省；节点理解成每个人；节点属性理解为每个人身上各自的特性：性格，教育程度，高矮胖瘦，恐龙或者是青蛙！

这样说，你总该明白了吧！

那么我们要获取他们每个人身上的特性，该如何获取呀，请看下面的代码：

  var a = {
    name: "guodan",
    age: 18,
  }
  console.log(a.age);
</script>

分析：
在上面的代码中节点对象a的属性有2个，分别是name 和 age ,他们各自的属性值是guodan和18，我需要获取
他们的属性值，就需要写：节点属性+点+属性名，例如a.age最终获取的是age的属性值为18。如下图：

《前端知识——关于JavaScript的标签属性的修改》 age的属性值为18

除了用点来获取属性以外，我们还可以用[ ]来代替点进行操作。例如：a[age]

关于获取标签属性的两种方法

在这里我所说的标签属性，主要是针对于行内标签（内联标签）的属性的获取方式，大家都知道所谓的行内标签是指对标签，很自然对标签内包含的属性就是行内标签属性，例如

<body>
    <div id="box" class="box2"></div>
<script>
     var box = document.getElementById("box");
     box.id = "goudan"
     console.log(box);
</script>

分析：

我们需要修改行内标签<div></div>里面的属性id值的时候，正确的写法为：对象+点+属性名id = “新的属性值”，如上面的代码所示：需要将<div></div>里的属性名id的属性值box，改成guodan，那么我们要在script里面设置成 box.id = “goudan” 就可以了，最终效果为：
《前端知识——关于JavaScript的标签属性的修改》

同理：修改class的属性值也是一样的。举一反三即可，由于时间和篇幅有限就例举了

上面我所说的是正常的行内便签属性获取和修改的方式，但是还有一种情况比较特殊，特殊就特殊在，有些时候，我们不想要他自带的属性，或者说不想要用他自带的 id，或者是class，或者title等属性名来修改行内标签的属性名。而是要我们自己自定义一种新的名称来作为这个行内便签的属性名
比如说我们要在行内便签里面把goudan这个原本不属于行内便签规定的属性名称作为新的行内便签属性名，代码如下：

<body>
    <div id="box"   class="box2"   goudan=“我不是狗蛋”></div>
<script>
     var box = document.getElementById("box");
     box.goudan = "123456"
     console.log(box);
</script>

这时候，浏览器一定会给你泼盆凉水，浇你个透心凉，你一定会问：“why？为什么我要改成123456,，但是还没变？”如下图：

《前端知识——关于JavaScript的标签属性的修改》

问题就是出在 box.goudan = “123456” 这行代码上
因为我们的属性名获取都是通过点+属性名来获取，从而进行值得修改（对于行内便签所规定的属性名或者是默认的属性名来说，这样做是可以获取并修改的，也就是合法的属性名可以通过点+属性名来操作）。
但是对于非法的，或者是在默认的行内便签属性名之外的，我们自己自定义的属性名，就不能通过点+属性名进行修改的，而是要通过attribute来进行修改，例如代码如下

<body>
    <div id="box"   class="box2"   goudan=“我不是狗蛋”></div>
<script>
     var box = document.getElementById("box");
     box.setAttribute("goudan","123456")
     console.log(box);
</script>

最终效果如下：
《前端知识——关于JavaScript的标签属性的修改》

修改，设置，删除自定义行内便签属性的分别是
.setAttribute（ ）
.getAttribute（ ）
.removeAttribute（ ）

由于时间和篇幅有限，下次继续和大家分享关于css样式修改方式，敬请期待！！
有疑问请在评论中给我留言，我会在百忙中尽量抽出时间回答大家的疑问

    原文作者：道杨
    原文地址: https://www.jianshu.com/p/4bb6299a08ca
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞