DOM操作
在学习了JavaScript之后，我们会想，如何使用JavaScript来操纵HTML呢。
其实HTML中的每一个对象都是一个DOM对象，其以一种树状图形式表现
如图
1.树根是 DOCUMENT，也可以称为整个页面文档
2. 每个 HTML 标签我们称之为 DOM 节点，英文为Node或者ELement
3. 每个 HTML 标签包裹的子标签，在树上体现为分支，称为儿子节点。比如上图，P和H1都是DIV的儿子节点。DIV同样也是BODY的儿子节点。
4. 儿子节点类推可以得知P,H1是BODY的孙子节点。
5. 所有P,H1的长辈，我们称为P和H1的祖先节点。
6. H1,P是亲兄弟，我们称为兄弟节点。
那么我们知道了HTML的DOM间的关系，接下来我们需要的是去获取HTML的DOM来方便我们使用JavaScript进行修改
使用如下代码，获取main下的.core之后的.subtitle标签的DOM
document.querySelector('main .core .subtitle');其中我们要记住的就是.querySelector 来获取节点，其方法和CSS中的选取类似。
除此之外我们.querySelectorAll('')来全量查询，并按顺序返回一个类数组。
getElementById(): 根据 id 查询某个节点 getElementsByClassName(): 根据 class 查询多个节点getElementsByTagName(): 根据 标签名 查询多个节点
这些也是选取方式
document.createElement(tagName)创建标签(节点)
document.createTextNode(string)创建纯文本
标签dom等等.appendChild(newNode) 将newNode节点插入（在所有儿子节点之后）
标签dom等等.inserBefore(新节点，位置节点) 在指定位置插入节点
img.setAttribute(‘style’, ‘width: 100%; height: 100%;’);属性修改（可以修改class id 等等）
dom.style.color = ‘xxxx’;具体属性修改
标签dom等等.innerHTML(内容）直接添加内容如果为‘’则为清除内容
