一、DOM树
DOM树有两种，分别为节点树和元素树。
节点树：把文档中所有的内容都看成树上的节点；
元素树：仅把文档中的所有标签看成树上的节点。
二、DOM常用操作
2.1 查找节点
document.getElementById(id属性值);
返回拥有指定id的第一个对象的引用
document/element.getElementsByClassName(class属性值);
返回拥有指定class的对象集合
document/element.getElementsByTagName(标签名);
返回拥有指定标签名的对象集合
document.getElementsByName( ame属性值);
返回拥有指定名称的对象结合
document/element.querySelector(CSS选择器);
仅返回第一个匹配的元素
document/element.querySelectorAll(CSS选择器);
返回所有匹配的元素
document.documentElement
获取页面中的HTML标签
document.body
获取页面中的BODY标签
document.all[\]
获取页面中的所有元素节点的对象集合型
2.2 新建节点
document.createElement(元素名);
创建新的元素节点
document.createAttribute(属性名);
创建新的属性节点
document.createTextNode(文本内容);
创建新的文本节点
document.createComment(注释节点);
创建新的注释节点
document.createDocumentFragment( );
创建文档片段节点
2.3 添加新节点
parent.appendChild( element/txt/comment/fragment );
向父节点的最后一个子节点后追加新节点
parent.insertBefore( newChild, existingChild );
向父节点的某个特定子节点之前插入新节点
element.setAttributeNode( attributeName );
给元素增加属性节点
element.setAttribute( attributeName, attributeValue );
给元素增加指定属性，并设定属性值
@ vscode怎么连接外部css？
vscode连接外部css方法：
1：打开vscode软件。
2：首先点击文件选择新建文件。
3：然后就建立了一个临时的文件。
4：接着看底部的文档类型是纯文本，点击纯文本。
5：在弹出的界面中选择css。
6：然后按ctrl+S保存文档。
7：最后就得到一个CSS文件了。
@ css调试工具？
css说是调试工具其实只是一段 Javascript 代码，但非常实用，它会给页面里所有的 DOM 元素添加一个 1px 的描边（outline），方便大家在调试 CSS 过程中分析、排查问题。
先来看看代码，它有两个版本，一个是使用的$$选择器，代码量更少（浏览器控制台支持 $$ 选择器）；另一种就是传统的document.querySelectorAll选择器：
@ html中before怎么使用？
（1）在CSS3中使用before选择器在元素的前面插入内容，使用after在元素后面插入内容，在选择器content属性中定义要插入的内容；（2）使用方法：标签:before{content:"插入的内容";},可以修改插入内容的样式；
（3）排除一些不需要插入内容的元素：使用content属性的追加一个none属性值。使用方法：标签:before{content:none;}
