Web-Api-----DOM操作自定义属性

  • 随笔:解决方法很简单,只是两个方法的调用.
  • 但是本文注重于区分两个易混淆的知识点.

自定义属性

自定义属性:

  • 标签自定义属性------>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是一门动态类型的语言。
一个对象两个重要的特征:

  1. 属性
  2. 方法
而js说:想要吗?自己写去吧! 所以创建一个js对象后,相当于一个空对象,其本身是什么也没有的。我们通过“.”的方式为其添加属性和方法,称之为“点语法”。记住哦,“.”了就相当于创造了一个新的属性,如果只是创造了它,而没有给它赋值,打印的结果就是“undefined”。

标签的自定义属性

<input type="text" value="nn" name="name"><br/>
其中的type、value、name都是标签的属性
一般我们通过js改变标签属性都是怎么做的呢?
  1. 取出对象
  2. 直接“.”去改变属性值

所以啊,惯性思维导致我们对待自定义属性也之这么做的。

真相只有一个

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>
综上所述,今日随笔完美收工!
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值