—— 此篇开始 ——
1. 操作元素内容
1. innerText
读取：
语法：元素.innerText
得到：该元素内所有文本内容
写入：
语法：元素.innerText = '值'
作用：完全覆盖式的书写该元素内的文本内容
注意：如果你设置一个html格式的字符串，那么不会被解析出来
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>hello world</div>
<script>
var div = document.querySelector('div')
console.log (div.innerText); //读取
div.innerText = "我是设置的内容" //写入
console.log (div);
</script>
</body>
</html>结果：
2. innerHTML
读取：
语法：元素.innerHTML
得到：该元素下所有内容，以字符串的形式给你
写入：
语法：元素.innerHTML = '值'
作用：完全覆盖式的书写该元素内的超文本内容
注意：如果你设置的是一个html格式的字符串，那么会把标签内容解析出来
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>hello world</div>
<script>
var div = document.querySelector('div')
console.log (div.innerHTML); //读取
div.innerHTML = "<p>我是<i>后来</i>的内容</p>" //写入
console.log(div);
</script>
</body>
</html>结果：
3. value
读取：
语法：表单元素.value
得到：该表单元素的value值
写入：
语法：表单元素.value = '值'
作用：完全覆盖式的书写该表单元素的value值
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" value="123" />
<script>
var inp = document.querySelector('input')
console.log (inp.value) //读取
inp.value = "你好" //写入
console.log (inp.value);
</script>
</body>
</html>结果：
2. 操作元素属性
1. 原生属性，html规范内有的属性
比如id，class，style，type...对于标签有特殊意义的，直接使用 元素.属性名 的形式操作
读取：
语法：元素.属性名
得到：该元素，该属性名对应的属性值
写入：
语法：元素.属性名 = 属性值
作用：修改该元素的该属性的值
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">你好世界</div>
<input type="text">
<script>
var div = document.querySelector('div')
var inp = document.querySelector('input')
div.id = "zs" //写入
console.log (div.id); //读取
console.log (inp.type); //读取
</script>
</body>
</html>结果：
2. 自定义属性，在html规范内没有的属性
我们随便书写一个属性名，对于标签没有特殊意义，只为了标注一些内容在标签上
获取自定义属性的值：
语法：元素.getAttribute('属性名')
返回值：该元素内该属性名对应的属性值
设置自定义属性的值：
语法：元素.setAttribute('属性名','属性值')
作用：给元素设置一个自定义属性
删除自定义属性：
语法：元素.removeAttribute('属性名')
作用：删除该元素的某一个属性
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div hello="world" zs="nihao">你好世界</div>
<script>
var div = document.querySelector('div')
var res = div.getAttribute('zs') //获取自定义属性
console.log (res);
div.setAttribute('abc','哈哈哈哈') //设置自定义属性
console.log (div);
div.removeAttribute('hello') //删除自定义属性
</script>
</body>
</html>结果：
3. H5自定义属性
在H5标准下，提出的一个自定义属性的书写方式，书写规则：data-开头，例子：data-a="100"，属性名：a，属性值：100
在元素身上有一个叫dataset的成员，是一个类似对象的数据类型，里面存储着所有的元素身上以data-开头的H5自定义属性，对于H5自定义属性的操作，就是对这个类似对象的数据类型进行操作
代码：
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div data-a="100">你好世界</div>
<script>
var div = document.querySelector('div')
console.log(div.dataset); //获取
console.log(div.dataset.a); //获取
div.dataset.a = 200 //修改
div.dataset.b = 300 //增加
delete div.dataset.a //删除
console.log (div);
</script>
</body>
</html>结果：
