DOM是 Document Object Model 的间歇，文档对象模型
DOM是HTML的编程接口

获取DOM节点

通过执行document上的成员函数来获取DOM节点

document.getElementById
根据ID名来查找
若有多个ID相同的节点，则只返回第一个
document.getElementsByTagName
根据标签名来查找，返回NodeList类数组对象
document.getElementsByClassName
根据class名来查找，返回NodeList类数组对象

通过传入的CSS选择器，查找匹配的DOM节点

document.querySetector("标签名")
只返回第一个匹配到的DOM节点
document.querySetectorAll("标签名")
返回的是DOM节点的集合
document.querySetectorAll(".detail")
查找class属性为detail的元素
document.querySetectorAll("ul > li")
匹配嵌套在ul元素中的所有li元素
document.querySetectorAll("main > *")
匹配main下的所有子元素
document.querySetectorAll("main *")
匹配main下的所有子孙元素
document.querySetectorAll("main a")
匹配任意位于main元素内的a元素
document.querySetectorAll("img+h3")
匹配所有紧邻在img元素后的h3元素
document.querySetectorAll("img+h3")

根据已经获得的元素，获得与其相关的父、子、兄弟元素

let btn = document.getELementById("name");
btn.parentNode;        //获取当前节点的父元素节点
    btn.childNodes;                    //获取当前节点的所有子节点（包括空白节点）
    btn.clildren;                        //获取当前元素的所有子元素
    btn.first/lastChild;        //获取当前元素的第一个/最后一个子节点（包括空白文本）
    btn.firstElementChild;    //获取第一个字元素
btn.nextElementSibling;        //获取当前元素兄弟节点

DOM的增删改查

let btn = document.getELementById("name");

改：

btn.innerHTML = "<p>这是一个刚增加的p节点</p>"
使用innerHTML，输入内容可被识别为HTML格式来进行解析
输出 这是一个刚增加的p节点
btn.textContent = "<p>这是一个刚增加的p节点</p>"
使用textContent，输入内容会直接输出为文本
输出

这是一个刚增加的p节点

增：

text = document.creatElement("p");        //创建一个元素节点对象p
text.createTextNode = ("这是一段待添加的文本");        //在text中的p中添加内容
body.appendChild(text);        //在父节点body里添加子节点text的内容

三步：创建一个元素节点—>将元素节点赋值—>将元素节点添加到制定列表的末尾处

删：

父元素.removeChild(子节点);
一般来说，使用子节点.parentNode.removeChild(子节点);更方便，不需要再找这个子节点的父元素即可删除此节点
Element.remove();
删除此element节点