js操作元素

m0_63400611

已于 2022-05-18 15:55:36 修改

阅读量380

点赞数

分类专栏： js 文章标签： javascript 前端 css3

于 2021-11-25 17:01:30 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/121540004

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

改变元素内容

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标签,保留空格和换行

常用元素的属性操作

innerText,innerHTML
src,href
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修改元素大小,颜色,位置等样式

elemen.style 行内样式操作
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"}

andy

m0_63400611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js操作元素

改变元素内容element.innerText<body> <div></div> <script> var div = document.querySelector('div'); div.innerText = '<strong>今天是:</strong>2021'; </script></body>输出为:<strong>.
复制链接

扫一扫