关于获取节点对象属性值的方法
有接触过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>
分析:
同理:修改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样式修改方式,敬请期待!!
有疑问请在评论中给我留言,我会在百忙中尽量抽出时间回答大家的疑问
网友评论