美文网首页程序猿阵线联盟-汇总各类技术干货程序猿之家
前端知识——关于JavaScript的标签属性的修改

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

作者: 道杨 | 来源:发表于2018-09-12 16:56 被阅读97次

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

    有接触过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样式修改方式,敬请期待!!
    有疑问请在评论中给我留言,我会在百忙中尽量抽出时间回答大家的疑问

    相关文章

      网友评论

        本文标题:前端知识——关于JavaScript的标签属性的修改

        本文链接:https://www.haomeiwen.com/subject/obpvgftx.html