DOM和H5中常用属性操作

目录   

DOM常用属性操作

获取属性值

设置属性值

移除属性值

H5中属性操作

自定义属性值

获取自定义属性值


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更多元素属性和方法:

 HTML DOM 元素对象 | 菜鸟教程

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值