js的DOM操作可以改变页面内容、结构和样式，我们可以使用DOM操作元素来改变元素里面的内容、属性等

1、改变元素内容

改变标签的内容其实就是先获取标签里面的内容，再替换掉原先的内容

而获取标签内容有两种方式：

innerText：它会去除包含的html标签、空格、换行，非标准，IE6+支持
innerHTML：获取包含的html标签，空格、换行，W3C标准
textContent：去除html标签，保留文本结构（空格、换行等）

栗子：

<div></div>
<p>
    我们会不会成为最好的我们
    <span>会的</span>
</p>
复制代码

let div = document.querySelector('div')
let p = document.querySelector('p')

console.log(p.innerText); // 我们会不会成为最好的我们 会的
console.log(p.innerHTML); 
/* 
我们会不会成为 最好的我们
<span>会的</span> 
*/
console.log(p.textContent);  
/* 
我们会不会成为 最好的我们
会的
*/

div.innerText = '<strong>这份爱</strong> 会不会 会不会'  // 不会加粗，而且<strong>还会被当成文本渲染上去
div.innerHTML = '<strong>这份爱</strong> 会不会 会不会'  // 加粗
复制代码

总结：

innerText：浏览器显示什么，怎么显示，我就获取什么，包括格式（有没有空格啊、需不需要换行啊等等）
innerHTML：我会获取标签中所有的内容，包括内嵌的标签（<script>和<style>除外）
textContent：获取标签的文本，与innerText很相似，但是它会获取 <script> 和 <style>标签中的内容
innerHTML用得比较多

2、常用元素的属性操作

属性操作一般有：src、href、id、alt、title，既然是属性，那就跟给对象添加属性一样

element.属性 = ''
复制代码

栗子：点击按钮，显示不同的图片

<button id="zhou">周深</button>
<button id="wang">汪苏泷</button>
<div>
    <img src="" alt="" title="">
</div>
复制代码

let zhou = document.querySelector('#zhou')
let wang = document.querySelector('#wang')
let img = document.querySelector('img')

zhou.onclick = function() {
    // 添加属性
    img.src = "/周深.jpg"
    img.title = '周深'
}

wang.onclick = function() {
    img.src = "/汪苏泷.jpg";
    img.title = '汪苏泷'
}
复制代码

3、表单元素的属性操作

使用DOM操作表单属性：type、value、checked、selected、disable

栗子：

<div class="box">
    <button>点击</button>
    <input type="text">
    <img src="image/images/open.png" alt="">
</div>
复制代码

let btn = document.querySelector('button')
let img = document.querySelector('img')
let input = document.querySelector('input')
let flag = true

btn.onclick = function() {
    input.value = '日益努力而后风生水起'
}
// 点击显示/隐藏文本
img.onclick = function() {
    if (flag === true) {
		// 隐藏文本：把表单类型修改为password
        img.src = "image/images/close.png";
        input.type = 'password'
        flag = false
    } else {
        img.src = "image/images/open.png";
        input.type = 'text'
        flag = true
    }
}
复制代码

点击按钮：

隐藏文本：

4、样式属性操作

我们可以通过DOM操作来修改元素的大小、颜色、位置等，这就涉及到了样式操作

4.1 行内样式操作

适用于少数样式的修改

element.stytle.样式属性 = 属性值
复制代码

注意：

在行内样式中，采用的是驼峰命名法，如：fontSize、backgroundColor、backgroundPosition
js 修改 style 样式修改，产生的是行内样式， CSS 权重比较高

栗子一：点击按钮，显示/隐藏图片

<button class="open">显示</button>
<button class="hidden">隐藏</button>
<img src="./image/images2/zs.jfif" alt="">
复制代码

let open = document.querySelector('.open')
let hidden = document.querySelector('.hidden')
let img = document.querySelector('img')
// 点击显示
open.onclick = function() {
    img.style.display = 'block'
}
// 点击隐藏
hidden.onclick = function() {
    img.style.display = 'none'
}
复制代码

栗子二：遍历精灵图

准备好li结构和精灵图
将精灵图位置属性添加给每一个li

html结构

<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
复制代码

CSS样式

.box {
    width: 180px;
    height: 130px;
    margin: 100px auto;
}

.box ul li {
    float: left;
    list-style: none;
    width: 24px;
    height: 24px;
    background-color: pink;
    margin: 10px;
    /* 精灵图，放图片，但不设置位置 */
    background: url(image/images/sprite.png);
}
复制代码

javaScript 行为

// 1、获取元素
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
    var index = i * 44;
    lis[i].style.backgroundPosition = '0 - ' + index + 'px';   // 修改图片位置
}
复制代码

4.2 类名样式操作

element.className  --  适合大量修改
复制代码

注意：

如果样式修改较多，可以采取操作类名方式更改元素样式
className 会直接更改元素的类名，会覆盖原先的类名 ，所以我们要把原先的类名加上

栗子：

<div class='first'>文本</div>
复制代码

.first {
    width: 100px;
    height: 100px;
    background-color: pink;
}

.change {
    width: 150px;
    height: 150px;
    background-color: skyblue;
    color: orange;
    margin: 100px auto;
}
复制代码

var text = document.querySelector('div');

text.onclick = function() {
    this.className = 'first change';  // 类名样式操作，调用change样式
}
复制代码

因为className会覆盖原先的类，所以当还需要原先的样式时，要加上该类名

排他思想

有一组元素，我们只想要某一个元素实现某个样式，就需要用到循环的排他思想算法

所谓排他思想，就是将其他人排除，留下自己

第一步：清除所有元素的样式
第二步：给当前元素设置样式

注意顺序不能颠倒，首先先干掉所有人，再设置自己

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
复制代码

let btns = document.querySelectorAll('button');
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        // 干掉所有人
        for (let i = 0; i < btns.length; i++) {
            btns[i].style.backgroundColor = ''
        }
        // 再给自己设置样式
        this.style.backgroundColor = 'skyblue'
    }
}
复制代码

5、自定义属性的操作

5.1 获取属性值

有两种方式：

element.属性名 获取属性值
element.getAttribute('属性名');

区别：

element.属性名 —— 获取内置属性值（元素本身自带的属性）
element.getAttribute('属性名'); —— 主要获取自定义的属性，标准（我们自己定义的属性）

<div id="demo"></div>
复制代码

var div = document.querySelector('div');
console.log(div.id);  // demo
console.log(div.getAttribute('id'));  // demo
复制代码

5.2 设置属性值

element.属性值 = '值' —— 设置内置属性
element.setArrtribute('属性', '值'); —— 设置自定义的属性

<div id="demo" index="2" class="nav"></div>
复制代码

let div = document.querySelector('div');
div.id = 'test';
div.className = 'navs';   // 修改class用className 属性

div.setAttribute('index', 1)
div.setAttribute('class', 'test2');   // 直接用class属性修改

console.log(div);  // <div id="test" index="1" class="test2"></div>
复制代码

5.3 移除属性

div.removeAttribute('属性名')

div.removeAttribute('index');  // 移除index属性

console.log(div); // <div id="test" class="test2"></div>
复制代码

6、H5自定义属性

自定义属性目的：是为了保存并使用数据；有些数据可以保存到页面中而不用保存到数据中

自定义属性是通过 getArrribute('属性') 获取

H5给我们新增了自定义属性：

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

<div data-index='0'></div>
复制代码

1、获取H5自定义属性

兼容性获取 element.getAttribute('data-index');
H5新增 element.dataset.index 或者 elemrnt.dataset['index'] —- ie11 才开始支持

<div class="nav" data-gettime='10' data-index='1' data-list-name='andy'></div>
复制代码

var div = document.querySelector('div');

// 1、dataset 是一个集合，里面存放了所有以data开头的自定义属性
console.log(div.dataset); // DOMStringMap {gettime: "10", index: "1"}
console.log(div.dataset.index); //  1
console.log(div.dataset['gettime']); // 10

// 2、如果自定义属性里面有多个-连接的单词，我们采用驼峰命名法
console.log(div.dataset.listName); // andy
console.log(div.dataset['listName']); // andy

// 3、getAttribute 就不必尊循驼峰命名法，直接原来的属性
console.log(div.getAttribute('data-list-name'));  // andy
复制代码