DOM和H5中常用属性操作

最新推荐文章于 2023-10-22 19:35:41 发布

张0x0

最新推荐文章于 2023-10-22 19:35:41 发布

阅读量193

点赞数 2

分类专栏： web前端基础学习 html学习 JavaScript学习文章标签：前端 javascript dom html

本文链接：https://blog.csdn.net/zxn200125/article/details/121452097

版权

web前端基础学习同时被 3 个专栏收录

80 篇文章 3 订阅

订阅专栏

JavaScript学习

37 篇文章 0 订阅

订阅专栏

html学习

12 篇文章 0 订阅

订阅专栏

DOM常用属性操作

获取属性值

1.获取元素固有属性(固有属性就是浏览器给默认html标签绑定的属性)

(1)元素名.固有属性

(2)元素名.getAttribute('固有属性')

2.获取用户自定义属性(自定义属性就是用户自己定义的属性)

元素名.getAttributer('固有属性')

    <div id="test" class="cName" try="tryName"></div>
    <script>
        //获取属性值
        var box = document.querySelector('div');
        //获取固有属性
        console.log(box.id);  //test
        console.log(box.getAttribute('id'));   //test
        //获取自定义属性
        console.log(box.getAttribute('try'));  //tryName
    </script>

需要注意的一点是，class不是固有属性，要获取class属性值需要使用className

        console.log(box.class);                     //undefined
        console.log(box.getAttribute('class'));     //cName
        console.log(box.className);                 //cName
        console.log(box.getAttribute('className')); //null

设置属性值

1.设置固有属性

(1)element.属性名='值'

(2)element.setAttribute('属性','值')

2.设置自定义属性

element.setAttribute('属性','值')

    <div></div>
    <script>
        var box = document.querySelector('div');
        //设置固有属性
        box.id = "test";
        box.className = "cName";
        //设置自定义属性
        box.setAttribute("try","tryName");
    </script>

打开开发者工具可以发现属性已经成功设置到div块中

移除属性值

element.removeAttribute('属性')

该方法通用，可以移除固有和自定义属性

    <div></div>
    <script>
        var box = document.querySelector('div');
        //设置固有属性
        box.id = "test";
        box.className = "cName";
        //设置自定义属性
        box.setAttribute("try","tryName");

        //移除属性值
        box.removeAttribute('id');
        box.removeAttribute('try');
    </script>

H5中属性操作

自定义属性值

1.在html标签中定义

语法：data-属性名='值'

在这里data表示前缀，通过'-'连接自定义属性名

2.在JavaScript中定义

语法：element.dataset.属性名='值'

在上面我们有提到过，JavaScript中自定义属性值的方法有 element.setAttribute('属性','值')，故这两种都是js中自定义属性值的方法，但是element.dataset.属性名='值'这种方式只能设置“data-”开头的自定义属性

注：h5关于属性值中dataset 是一个集合，内部存放有以'data-'开头的所有自定义属性

    <!-- //h5中自定义属性 -->
    <!-- html中定义 -->
    <div data-try="tryName">文本内容</div>
    <script>
        //JavaScript中定义
        var box = document.querySelector('div');
        box.dataset.class = 'test';
    </script>

获取自定义属性值

(1)element.dataset.属性名

(2)element.dataset['属性名']

获取属性值注意点：若自定义属性名含有多个'-'，在获取属性值时，需要去掉'-'，采用驼峰命名法，第二个及之后的单词首字母大写，例如：

    <!-- //h5中自定义属性 -->
    <!-- html中定义 -->
    <div data-try-it="tryName">文本内容</div>
    <script>
        //JavaScript中定义
        var box = document.querySelector('div');
        box.dataset.class = 'test';

        //获取属性值
        console.log(box.dataset.tryIt);     //tryName
        console.log(box.dataset['tryIt']);  //tryName
    </script>

DOM更多元素属性和方法：