学习笔记11_操作元素

最新推荐文章于 2022-07-14 16:37:43 发布

ankh_w

最新推荐文章于 2022-07-14 16:37:43 发布

阅读量830

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/j____f/article/details/124126139

版权

1.修改元素内容

1.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。

2.innerHTML（用得更多）

起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行

区别

在赋值的时候，如果在引号内有html标签，innerText会把标签也一起显示出来，innerHTML则会将其渲染出来
```
 <body>
	<div></div>
    <div></div>
	<script>
        var div = document.querySelectorAll('div');
        div[0].innerText = '<strong>今天是：</strong> 2019';
        div[1].innerHTML = '<strong>今天是：</strong> 2019';
	</script>
</body>
```
结果[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ThUtETza-1649749923378)(…/…/…/Users/18326/AppData/Roaming/Typora/typora-user-images/image-20220407170248032.png)]

这两个属性是可读写的可以获取元素里面的内容，innerText会去掉换行和空格，innerHTML不会

 <body>
 	<p>
		文字1
		<span>文字2</span>
	</p>
	<script>
        var p1 = document.querySelector('p');
        console.log(p1.innerText);
        console.log(p1.innerHTML);
	</script>
</body>

控制台输出

2.修改元素属性

1.普通元素

用img举例

// img.属性
img.src = "xxx";
input.value = "xxx";
input.type = "xxx";
input.checked = "xxx";
input.selected = true / false;
input.disabled = true / false;

案例

<button>w</button>
<button>joker</button>
<br>
<img src="../../../资源/1图片/下载/w.jpg" alt="w" title="w">
<script>
    //获取两个button对象
    var jm = document.querySelectorAll('button');
    var img = document.querySelector('img');
	//绑定事件
    jm[0].onclick = function() {
        img.src = '../../../资源/1图片/下载/w.jpg';
        img.title = 'w';
    }
    jm[1].onclick = function() {
        img.src = '../../../资源/1图片/下载/joker.webp';
        img.title = 'joker';
    }
</script>

2.表单元素

type、value、checked、selected、disabled等属性

比如

//普通元素修改内容用innerHTML
btn.innerHTML='xxx';
//表单元素修改内容用value
input.value

3.修改元素属性

1.行内样式操作

// element.style.样式
div.style.backgroundColor = 'pink';
div.style.width = '250px';

2.类名样式操作

当元素有多个样式需要改变时，可以用element.className直接改变元素的类名

<style>
    //更改前的样式
    .box1 {
        width: 100px;
        height: 100px;
        background-color: #bfa;
    }
    //更改后的样式
    .box2 {
        width: 150px;
        height: 150px;
        background-color: pink;
    }
</style>
<div class="box1"></div>
<script>
    var d = document.querySelector('.box1');
    d.onclick = function() {
        
        //第一种：把类名换成box2，样式也跟着换
        //this.className = 'box2';
        
        //第二种，在原先的类名基础加上修改之后的类名，即变成多个类名
        //不过要把修更改后的样式写在下面，因为下面的样式会覆盖上面的
        this.className = 'box1 box2';
    }
</script>

4.排他思想

如果有同一组元素，我们相要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
    // 1. 获取所有按钮元素
    var btns = document.getElementsByTagName('button');
    // btns得到的是伪数组  里面的每一个元素 btns[i]
    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function() {
            // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
            for (var i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = '';
            }
            // (2) 然后才让当前的元素背景颜色为pink 留下我自己
            this.style.backgroundColor = 'pink';

        }
    }
    //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
</script>

5.自定义属性

1.获取属性值

获取内置属性值(元素本身自带的属性)

var box1 = document.querySelector('div')
element.属性;//例 div.id

获取自定义的属性

var box1 = document.querySelector('div')
element.getAttribute('属性');//例 div.getAttribute('data-index')

下面这个element.getAttribute('属性')，内置属性和自定义属性都可以用，但主要是用于自定义属性

2.设置属性值

设置内置属性值

element.属性 = '值';//例 div.id=box2

设置自定义的属性

element.setAttribute('属性','值');//例 div.setAttribute('data-index','2')

下面这个element.setAttribute('属性')，内置属性和自定义属性都可以用，但主要是用于自定义属性

3.移除属性

element.removeAttribute('属性');//例 div.removeAttribute('id');

6.H5自定义属性

目的：

保存并保存数据，有些数据可以保存到页面中而不用保存到数据库中
有些自定义属性很容易引起歧义，不容易判断到底是内置属性还是自定义的，所以H5有了规定

1.设置H5自定义属性

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

<div data-index = "1"></>
// 或者使用JavaScript设置
div.setAttribute('data-index',1);

2.获取H5自定义属性

兼容性获取 element.getAttribute('data-index')
H5新增的：element.dataset.index 或element.dataset['index'] IE11才开始支持

<body>
    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
		//getAttribute获取自定义属性
        console.log(div.getAttribute('getTime'));
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));

        // h5新增的获取自定义属性的方法 它只能获取data-开头的
        // dataset是一个集合，里面存放了所有以data开头的自定义属性
        console.log(div.dataset);

		//element.dataset.index 或element.dataset['index']则是获取的单个属性
        console.log(div.dataset.index);
        console.log(div.dataset['index']);

        // 如果自定义属性里面有多个-链接的单词，获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
</body>

则是获取的单个属性
console.log(div.dataset.index);
console.log(div.dataset[‘index’]);

    // 如果自定义属性里面有多个-链接的单词，获取的时候采取 驼峰命名法
    console.log(div.dataset.listName);
    console.log(div.dataset['listName']);
</script>

```