- 随笔:解决方法很简单,只是两个方法的调用.
- 但是本文注重于区分两个易混淆的知识点.
自定义属性
自定义属性:
- 标签自定义属性------>HTML中的标签
- 对象自定义属性------->js中的对象
回顾出乎意料的"坑"
请看下面一段代码:
小小的案例:实现点击出现弹窗显示成绩
<body>
<ul id="uu">
<li score="10">a</li>
<li score="20">b</li>
<li score="30">c</li>
<li score="40">d</li>
<li score="50">e</li>
</ul>
<script>
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].onclick = function () {
alert(this.score);
};
}
</script>
</body>
美好的理想:
残酷的现实:
哦好吧,先回顾一下两个自定义属性
对象的自定义属性
众所周知,js是一门动态类型的语言。
一个对象两个重要的特征：
- 属性
- 方法
| 而js说：想要吗？自己写去吧！ 所以创建一个ｊｓ对象后，相当于一个空对象，其本身是什么也没有的。我们通过“．”的方式为其添加属性和方法，称之为“点语法”。记住哦，“.”了就相当于创造了一个新的属性，如果只是创造了它，而没有给它赋值，打印的结果就是“undefined”。 |
标签的自定义属性
<input type="text" value="nn" name="name"><br/>
| 其中的type、value、name都是标签的属性 一般我们通过js改变标签属性都是怎么做的呢？ |
- 取出对象
- 直接“.”去改变属性值
所以啊，惯性思维导致我们对待自定义属性也之这么做的。
真相只有一个
document.getElementsByTagName("li")；
首先明确一下，我们通过id得到的对象是一个DOM对象
this是当前的DOM对象,在内存中形成了一个DOM树
ps:DOM树:由文档以及文档中所有元素(标签)组成的树状结构图,叫做树状图
上图可以看到"."出来的并没有把自定义属性加到标签上去
| 所以我们获得的this对象中只有一些基本的标签属性，并没有我们在标签上自定义的属性。 那此时直接“.”出来的是什么呢？ 记住刚才说的：“.”是干什么的？是添加属性的。 所以此时相当于是为对象添加了一个自定义属性，但是没有赋值。 so，结果就是undefined啦！ |
还不清楚的话可以看看下边：
/*
* 之所以得到的结果是undefined是因为DOM是一个动态的对象
* this是当前的DOM对象,在内存中形成了一个DOM树
* 标签中有这个属性,但通过DOM方式获得的这个对象,对象没有这个属性
*为什么是undefined?
* 因为本身this对象没有这个属性,但是可以"."添加属性
* 而添加后没有赋值所以是undefined
* 添加后的属性虽然与标签中的属性名字相同但是并不是一个属性,只是重名而已
* 一个是标签属性,一个是标签得到的DOM对象的属性
* 所以自定义属性不可以直接"."出来,需要使用getAttribute("自定义属性名")
*
* */
| 其实说白了也就是： 你家有个叫张三的，小苏家也有个叫张三的，你想叫小苏家的张三，但是却一直在自己家里喊，所以你家的张三出来了......... |
关于js中操作自定义属性的方法
- 设置自定义属性的值
setAttribute("自定义属性名",值);
- 获取自定义属性的值
getAttribute("自定义属性名");
- 移除自定义属性
removeAttribute("自定义属性名");
正确代码
下面是正确的写法:
<body>
<ul id="uu">
<li score="10">a</li>
<li score="20">b</li>
<li score="30">c</li>
<li score="40">d</li>
<li score="50">e</li>
</ul>
<script>
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].onclick = function () {
alert(this.getAttribute("score"));
};
}
</script>
</body>
391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
