一、DOM节点的获取
①.getElementsByTagName 通过标签名来获取元素节点 （若有多个相同标签，返回含有多个节点的类数组对象）

②.getElementsByClassName 通过class名来获取元素节点（若有多个相同class，返回含有多个节点的类数组对象）

③.getElementById 通过id名来获取元素节点（直接返回可操控的节点，而不是由节点构成的数组对象）

④.querySelectorAll 通过CSS选择器获取节点，返回NodeList对象（包含所有匹配给定选择器的节点）

⑤.querySelector 通过CSS选择器获取节点，返回第一个匹配上的节点

二、DOM节点的创建与插入
①创建节点：
1 . document.createElement(); 创建一个元素节点；

2 . document.createTextNode(); 创建一个文本节点；

3.document.createAttribute();创建一个属性节点……

②插入节点：
1.将创建文本节点作为子节点，加入新建的元素节点下面：div.appendChild(XX); （div为元素节点，XX为文本节点）

2.将属性节点插入新建的元素节点: div.setAttributeNode(XX);（div为元素节点，XX为属性节点）

3.将已经配置完毕的元素节点，以子节点的身份插入其上一层的元素节点中:

const body_node = document.getElementsByTagName(“body”)[0];

body_node.appendChild(div);

删除节点：

body_node.removeChild(div);

这是直接插入到body的代码：document.body.appendChild(div);

三、DOM节点的属性修改

下面通过代码展示一些DOM节点的属性修改：

测试练习：通过上述内容，我们可以进行以下操作

要求：