DOM节点操作--属性节点

最新推荐文章于 2023-01-08 00:12:58 发布

beibei_niao

最新推荐文章于 2023-01-08 00:12:58 发布

阅读量102

点赞数

文章标签： dom属性节点操作

本文链接：https://blog.csdn.net/beibei_niao/article/details/103646628

版权

<body>
    <div id="div1" class="box1" align="center">
        jmdckjlkjasoiajedkjkhnbdjsahdkljal
    </div>
    <div>
        <button type="button" onclick="_getAttributes()">获取所有的属性</button>
        <button type="button" onclick="_getAttributeValue()">获取align属性</button>
        <button type="button" onclick="_modifyAttributeValue()">修改align属性</button>
        <button type="button" onclick="_deleteAttributeValue()">删除align属性</button>
    </div>
   <script>
       function _getAttributes(){
           //1.找元素节点对象
           var oDiv1 = document.getElementById('div1');
           //2.获取所有的属性
           var attrList = oDiv1.attributes;  //返回元素上所有属性的集合
           console.log(attrList); //映射所有属性集合的一个对象
           console.log(attrList[0]);//通过下标方式获取到某一个属性节点对象 id="div1"
       }
       function _getAttributeValue(){
           var oDiv1 = document.getElementById('div1');
           var a = oDiv1.getAttributeValue('align');
           console.log(a)  //center;
       }
       function _modifyAttributeValue(){
           var oDiv1 = document.getElementById('div1');
           //如果属性存在就实现修改，不存在就实现添加功能
           oDiv1.setAttribute('align','right');
           //等同于 oDiv1.getAttributeNode('align').nodeValue='right';
       }
       function _deleteAttributeValue(){
           //1.找到元素节点
           var oDiv1 = document.getElementById('div1');
           //2.删除align属性
           oDiv1.removeAttribute('align');
       }
   </script>

beibei_niao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM节点操作--属性节点

<body> <div id="div1" class="box1" align="center"> jmdckjlkjasoiajedkjkhnbdjsahdkljal </div> <div> <button type="button" onclick="_getAttributes...
复制链接

扫一扫