js操作元素

改变元素内容

 

element.innerText

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.innerText = '<strong>今天是:</strong>2021';
    </script>
</body>

 输出为:<strong>今天是:</strong>2021

不识别HTML标签,从起始位置到终止位置的内容,但他去除html标签,空格和换行也会去掉

 

element.innerHTML

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.innerHTML = '<strong>今天是:</strong>2021';
    </script>
</body>

输出为: 今天是:2021

识别HTML标签,从起始位置到终止位置的全部内容,包括HTML标签,保留空格和换行

 

常用元素的属性操作

  1. innerText,innerHTML
  2. src,href
  3. id,alt,title

表单元素的属性操作

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        var btn = document.queruSelector('button');
        var input = document.queruSelector('input');

        btn.onclick = function() {
            /*通过value来改变表单中的文字*/
            input.value = '被点击了';
            /*禁用按钮*/
            this.disabled = true;
        }
    </script>
</body>

通过element.value = '';来修改表单元素中的文字,将this指向的btn按钮改变为不可点击的

利用DOM可以操作一下表单元素的属性:

type,value,checked,selected,disabled

 

样式属性操作

通过js修改元素大小,颜色,位置等样式

  1. elemen.style                行内样式操作
  2. elemen.className      类名样式操作

注意:

  • js的样式采取驼峰命名法,例:fontSize, backgroundColor
  • js修改style样式操作产生的是行内样式,css权重更高
  • 如果样式修改较多,可以采取操作类名方式更改元素样式
  • class是个保留字,因此使用className操作元素类名属性

总结

watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbTBfNjM0MDA2MTE=,size_20,color_FFFFFF,t_70,g_se,x_16

 获取自定义属性值

 

获取属性值

  • element.属性
  • element.getAttribute('属性');
<body>
    <div id="demo" index="1"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.id);
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
    </script>
</body>

区别

  • element.元素.属性(div.属性);        获取内置属性值(元素本身自带属性)
  • element.getAttribute('属性');         主要获得自定义的属性

 

设置属性值

  • element.属性 = ' ';                设置内置属性值
  • element.setAttribute('属性'); 主要针对自定义属性值
<body>
    <div id="demo" index="1"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.id);
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        
        div.id = 'test';
        div.className = 'navs';
        div.getAttribute('index',2)/*将index属性值更改为2*/
        div.getAttribute('class','footer');/*将class属性值更改为footer*/
    </script>
</body>

 

移除属性值

  • div.removeAttribute('index');
<body>
    <div id="demo" index="1"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.id);
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        
        div.id = 'test';
        div.className = 'navs';
        div.getAttribute('index',2)/*将index属性值更改为2*/
        div.getAttribute('class','footer');/*将class属性值更改为footer*/
        div.removeAttribute('index');/*移除属性index*/
    </script>
</body>

 

 H5自定义属性

自定义属性目的:为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中

自定义属性获取是通过getAttribute('属性')获取

有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性

设置H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值

例如<div data-index = "1"></div>

或者使用js设置

element.setAttribute('data-index',2);

获取H5自定义属性

兼容性获取 element/getAttribute('data-index');

element.dataset.index 或者 element.dataset['index'] (ie11才支持)

dataset 是一个集合里面存放了所有以data开头的自定义属性

<body>
    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        console.log(div.div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
</body>

输出结果为:

DOMStringMap{index: "2", time: "20"}

2

2

andy

andy

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值