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>
```