DOM操作元素
DOM操作元素
js的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
1. 改变元素内容
-
element.innerText
从起始位置到终止位置的内容，但它去除HTML标签，同时空格和换行也会去掉（非标准）
-
element.innerHTML
起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行（W3C标准）
注：这两个属性是可读写的，可以获取元素里面的内容。
<div>
<span>我是一个例子</span>
</div>
<script>
var eg = document.querySelector('div');
console.log(eg.innerText); // <span>我是一个例子</span>
console.log(eg.innerHTML); // 我是一个例子
</script>
2. 修改元素属性
element.src // 修改元素属性
<img src="banana.jpg">
<script>
var eg1 = document.querySelector('a');
eg1.src = 'apple.jpg'; // 修改图片变为另一张图片
</script>
3. 样式属性操作
可以通过js修改元素的大小、颜色、位置等样式。
// 1.行内样式操作
element.style
// 2.类名样式操作
element.className
注：
- js里面的样式采用驼峰命名法。eg. fontSize、textAlign
- js修改style样式操作时，产生的是行内样式，css权重比较高
- 如果样式修改较多，可以采取操作类名方式更改元素样式
- className会直接更改元素的类名，会覆盖原先的类名
4. 自定义属性的操作
4.1 获取属性值
- element.属性 获取属性值
- element.getAttribute('属性');
区别：
- element.属性 获取内置属性值（元素本身自带的属性）
- element.getAttribute('属性'); 主要获得由程序员自定义的属性（标准）
4.2 设置属性值
- element.属性 = '值' 设置内置属性值
- element.setAttribute('属性', '值');
区别：
- element.属性 设置内置属性值（元素本身自带的属性）
- element.setAttribute('属性','值'); 主要设置由程序员自定义的属性（标准）
4.3 移除属性
- element.removeAttribute('属性');
5. H5自定义属性
自定义属性目的：为了保存并使用数据，有些数据可以保存到网页中而不用存储到数据库中。
自定义属性获取是通过getAttribute('属性')获取，但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性，而H5给我们新增了自定义属性。
5.1 设置H5自定义属性
H5规定自定义属性用data-开头作为属性名并赋值。
// 1.在标签里设置
<div data-index="6">
</div>
// 2.使用js设置
element.setAttribute('data-index', 6);
5.2 获取H5自定义属性
- 兼容性获取：element.getAttribute('data-index');
- H5新增（IE11才开始支持）：element.dataset.index 或 element.dataset['index']
