美文网首页前端碎碎念
JS-设置/获取元素&节点相关

JS-设置/获取元素&节点相关

作者: const_express | 来源:发表于2021-04-07 21:53 被阅读0次

    写在2021.这篇文章貌似是18年还是19年写的 无比唏嘘。。

    好记性不如烂笔头 还是要把自己还没遗忘的东西那出来拿出来写写

    写在开头: 路过的大神看看就好 ~~毕竟我只是一个小菜鸡 。。自娱自乐那种 如果文章内有错误或者您有什么建议的话 肥肠欢迎您的批评指正~

    那么就从现在开始吧~~没法从头开始写 想到啥写啥吧 嘻嘻~

    -----------------------------------------------我是严肃的分割线-------------------------------------------

    先提一嘴获取和设置元素属性吧 感觉和动态添加元素关系还挺大的.....

    获取和设置元素属性

    先了解一下标签内能操作的属性 目前我知道的 a标签的href ,img的title、src ,input的placeholder这种 能通过元素直接调用 元素.属性的 属性 (听起来很拗口。。语死早系列)
    然后就是自定义标属性 举个栗子 : aaa 我直接写进元素里面 aaa=“ ” 这种自己设置(自定义)的属性 不能直接在js里通过 元素.aaa的方式调用
    那么问题来了 我都能在标签上设置元素了 那肯定也能用啊 不然岂不是然并卵= =
    所以就有下面这东西为我们排忧解难:

    获取元素

    语法:元素.getAttribute(‘name’); name就是属性的名字

    设置元素

    语法 :元素.setAttribute('name','value');

    移除元素

    语法 :元素.removeAttribute(‘name’);

    举栗:
    比如说我在 input标签上来了个aaa属性

    <input type="text" aaa="hahaha">
    

    那么我在js里 要这样去操作他:

    <script>
     var  input = document.querySelector('input');
     var a =input.getAttribute('aaa'); //获取
     input.setAttribute('aaa','hahah');//设置
     input.removeAttribute('aaa');//移除
    </script>
    

    当然 这几个标签还可以操作系统自带标签属性 :

    <script>
    var  input = document.querySelector('input');
    var b = input.getAttribute('type');
    input.setAttribute('type','button');
    </script>
    

    注意:上面这几个只能用于元素节点!

    既然上面提到了节点 下面就写写节点相关的东西

    节点的层级

    根据节点的关系来获取元素
    • 节点的关系
      1.父子关系
      2.兄弟关系
    • 根据子节点获取父节点
    语法 : 子节点.parentNode

    相关文章

      网友评论

        本文标题:JS-设置/获取元素&节点相关

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