前端入门篇（四十一）JS基础8动态修改网页内容(DOM操作)
基本概念：
1.DOM操作：JS动态修改网页内容
2.DOM树：
将html文件转换为机器能看得懂的数据结构；
包含document节点、标签节点、文本节点；
document里面包含相应的方法，一个html文件里有且只有一个；
标签节点包含其属性，可用于修改页面样式；
文本节点挂靠在标签节点下面；
3.注意js时间线
查找标签节点
1.通过id查找
var div1 = document.getElementById('div1');//返回节点
2.通过标签名查找
var ps = document.getElementsByTagName('p');//返回数组
3.通过class查找
var txt = document.getElementsByClassName('txt');//返回数组
区别：
1.访问方式：
通过id查找时，只能通过document对象查找；
在js中，id唯一，如果html出现两个相同的id，后者会被忽略；
通过标签名或class查找时，可以在任意标签节点上使用；
2.返回数据的类型：
通过id查找时，直接返回节点
通过标签名或class查找时，即使结果只有一个，也是保存在数组中；
可以通过方括号来访问数组内容(txt[0]标签节点)，也能使用length属性；
另注：
即使一个标签有多个class，
也能通过document.getElementsByClassName()找到；
4.先按id找到div1，再用class找到.txt:
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>DOM操作title>
head>
<body>
<div id="div1" class="txt1">
div1
<p id='p1'>p1p>
<p id='p2' class="txt txt1">p2p>
div1
div>
<script src="7.js">script>
body>
html>
js文件：
var div1 = document.getElementById('div1');
var p_txt = div1.getElementsByClassName('txt');
由找到的已知节点或document节点向下层寻找，目的是找到某节点，如果已经用id找到了p2，就不能再从p2找txt，因为不是下层
查找结果只有一个：p#p1.txt.txt1
创建节点，添加到DOM树
html文件：
<body>
<div id='div1' >
div>
<script src="7.js">script>
body>
js文件：
//添加节点
var div1 = document.getElementById('div1');//获取节点
var p = document.createElement('p');//创建p标签
var ptxt = document.createTextNode('p1');//创建文本节点
p.appendChild(ptxt);//文本节点关联到标签节点
div1.appendChild(p);//添加标签节点至DOM树
结果：
删除节点
先在html文件中添加一个div2：
<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>DOM操作title>
head>
<body>
<div id='div1' >
<div id="div2">div2div>
div>
<script src="7.js">script>
body>
html>
js文件：
//删除节点
var div2 = document.getElementById('div2');//获取div2
//方法一：通过父节点div1删除子节点div2
div1.removeChild(div2);
//方法二：通过树的关系，找到div2的父节点，再删除自己，不用直接查找父节点
div2.parentNode.removeChild(div2);
操作节点的属性、内容
1.对于html定义好的属性：
可以使用`对象.属性`来获取；
如果需要修改class名，要用`对象.className`来修改，因为class也是js的关键字(类)；
`对象.style.属性`可以针对css样式进行修改
html文件：
<body>
<div id='div1' >
<img id='img1' src="img1.png" alt="">
div>
<script src="7.js">script>
body>
js文件：
var img1 = document.getElementById('img1');
img1.src = 'img.png' //修改图片
img1.style.width = '50px';//img1.style针对css样式进行修改
结果：换了张图片，并调整了宽度
2.对于自定义的属性：
html文件：
<body>
<div id='div1' dat="1">
<img id='img1' src="img1.png" alt="">
div>
<script src="7.js">script>
body>
js文件：
//获取属性
var div1 = document.getElementById('div1');
var dat = div1.getAttribute('dat');//获取自定义属性
//设置自定义属性
img1.setAttribute('dat','11');
//删除自定义属性
// img1.removeAttribute('dat');
3.修改标签内容
innerHtml()既修改文本，也能支持html格式
textContent()纯文本
html文件：
<body>
<div id='div1' dat="1">
<img id='img1' src="img1.png" alt="">
div>
<p id="p1">p1p>
<script src="7.js">script>
body>
js文件：
//修改内容
var p1 = document.getElementById('p1');
//innerHTML
p1.innerHTML = "this is innerHTML, this is a tag";
//标签中换成纯文本
p1.textContent = "this is innerHTML, this is a tag";
innerHtml：
纯文本：
