DOM操作元素

js的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性

1. 改变元素内容

1. element.innerText

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

2. 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" alt="DOM操作元素"> <script>     var eg1 = document.querySelector('a');     eg1.src = 'apple.jpg';    // 修改图片变为另一张图片 </script> 

3. 样式属性操作

可以通过js修改元素的大小、颜色、位置等样式。

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

注：

1. js里面的样式采用驼峰命名法。eg. fontSize、textAlign
2. js修改style样式操作时，产生的是行内样式，css权重比较高
3. 如果样式修改较多，可以采取操作类名方式更改元素样式
4. 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']