前端知识——关于JavaScript的标签属性的修改
关于获取节点对象属性值的方法
有接触过JavaScript这门语言的朋友们都知道，在我们的JavaScript中存在着各种各样的节点属性。对于刚接触JavaScript的小白朋友们也许对节点属性的概念有点不太理解，花时间查阅一些专业资料，基本上99%的解释都是千篇一律，如：在文档对象模型中，每个节点都是一个对象。
看完了，你或许觉得太专业的，能不能有个通俗易懂的解释呀，有呀！我给出的解释是：
大家都知道JavaScript是由document（文档）+ Object（对象）+ Model（模型）这三大部分组成。
奇丑无比的示意图
在我画的这张图片中，不难可以看出最大的蓝色椭圆（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。如下图：
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" 就可以了，最终效果为：
同理：修改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,，但是还没变？”如下图：
问题就是出在 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>最终效果如下：
修改，设置，删除自定义行内便签属性的分别是
.setAttribute（ ）
.getAttribute（ ）
.removeAttribute（ ）
由于时间和篇幅有限，下次继续和大家分享关于css样式修改方式，敬请期待！！
有疑问请在评论中给我留言，我会在百忙中尽量抽出时间回答大家的疑问
作者：道杨
链接：https://www.jianshu.com/p/4bb6299a08ca
共同学习，写下你的评论
评论加载中...
作者其他优质文章
