DOM的概述：DOM（document object model）是一个文档对象模型，是用于操作对应的html文档的，DOM会遵循文档流，属于同步的操作。DOM是W3C（万维网联盟）的标准。它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
DOM的分类：
1、document dom操作中最大的对象（表示当前操作的html文档）
2、element 元素对象 （表示的是对应的标签元素）
3、attribute 属性对象 （表示的所有的html标签里面的属性）
4、text 文本对象 （表示在html代码里面写的所有的文本）
document (文档对象)（*）
相关的方法：
1、获取（通过对应的标识来获取element元素）
document.getElementById 通过id获取对应的元素（Element）
//通过对应的id获取相关元素对象 返回的是一个element对象
var box=document.getElementById('box')
document.getElementsByClassName 通过className获取 （HTMLCollection）
//通过对应的class获取相关元素对象数组 (HTMLCollection (伪数组 具备下标 具备length))
var contents=document.getElementsByClassName('content')
console.log(contents);//获取HTMLCollection
console.log(contents[0]);//获取第一个匹配的元素
document.getElementsByTagName 通过标签名获取（HTMLCollection）
//通过标签名获取对应的元素对象数组
var div=document.getElementsByTagName('div')
console.log(div);//HTMLCollection
console.log(div[0]);//获取第一个匹配的元素
document.getElementsByName 通过name属性获取 （NodeList）
//根据name属性名来获取对应的元素（表单标签）NodeList
console.log(document.getElementsByName('sex'));
document.querySelector 通过选择器获取第一个 （Element）
//根据对应的选择器获取 id # class . 标签 标签名 返回的都是元素对象
//querySeletor 获取匹配选择器的第一个元素
console.log(document.querySelector('#box'));//返回匹配的元素对象
console.log(document.querySelector('.content'));//返回第一个找到的元素
console.log(document.querySelector('div'));//返回第一个找到的元素
document.querySelectorAll 通过选择器获取所有（NodeList）
//根据对应的选择器获取所有匹配的 NodeList的伪数组
console.log(document.querySelectorAll('#box'));
console.log(document.querySelectorAll('.content'));
console.log(document.querySelectorAll('div'));
document.getRootNode 获取根节点（Node）
//根节点
console.log(document.getRootNode());
2、创建的相关方法 创建对应的节点对象
document.createElement 创建元素节点
//创建一个元素 传递对应的标签名
var element=document.createElement('div')
document.createAttribute 创建属性节点
//创建属性 id = 'box' 传递属性名
//创建一个id属性 默认值伪空字符串
var attr=document.createAttribute('id')
//给当前属性对象指定对应的属性值
attr.value='hello world'
document.createTextNode 创建文本节点
//创建文本节点 传递的参数是显示的文本
var text=document.createTextNode('hello')
扩展：NodeList和HTMLCollection的区别：
1、NodeList里面的存储以键值对存储。
2、Nodelist是返回节点的集合，而nodelist里面也有数组，因此元素也是节点的一种，也就是元素节点。
3、HTMLCollection是html元素的集合，是一个元素，是节点的一种，并且元素节点可以包含很多的节点， 因此我们可以理解为HTMLCollection是Nodelist集合的一种。
相关的属性：
获取属于文档的相关内容
1、document.body 获取body
2、document.head 获取head
3、document.froms 获取froms (返回一个HTMLCollection)
Element 元素对象（*）
相关的方法：
1、获取的方法（在元素里面获取元素）（跟对应的document的获取元素方法一致）
element.getElementById()
element.getElementsByClassName()
element.getElementsByName() 等等....
注：链式调用
//获取对应的element元素对象
varbox=document.getElementById('box')
//形成链式调用
varb=document.getElementById('box').getElementsByClassName('link')[0].getElementsByTagName('b')[0]
2、添加的方法 （在元素里面添加元素或者是添加text到对应的元素中去）
append （追加多个，支持里面传入字符串（字符串会被识别为文本））（追加到末尾的方法）
appendChild （追加一个，只支持node对象）（追加到末尾的方法）
insertBefore 插入元素到某个子元素之前 （参数1需要传入的元素、参数2子元素），不能对孙子元素进行操作
insertAdjacentElement 插入element
insertAdjacentHTML 插入HTML代码
insertAdjacentText 插入文本
3、删除方法
remove 删除自身
//删除自己 里面内容都删除
box.remove()
removeChild 删除子元素
//删除子元素 传递对应的子元素
box.removeChild(link)
4、修改方法 （既可以替换元素 也可以替换文本）
replaceChild 一对一替换（第一个新的节点，第二个对应的子节点）
var btn = document.createElement('button')
var text = document.createTextNode('我是文字')
//第一个新的节点 第二个对应的子节点
box.replaceChild(btn,link)
replaceChildren 替换所有 （可以传递多个参数 支持字符串）
//替换里面所有的 变成你传入的
box.replaceChildren('你好','hello')
5、克隆的方法
cloneNode 克隆对应的元素（传递的参数是一个布尔类型的值，为true表示深度克隆，为false表示浅克隆（false））
var box = document.querySelector('div')
var element = box.cloneNode()//只克隆对应的第一次 默认为false
console.log(element);//<div></div>
var element = box.cloneNode(true)//只克隆所有的内容包含对应的里面文本和元素及相关事件
6、属性操作的相关方法 (对于所有的属性都可以进行操作)
获取 getAttribute(attrName)
//获取属性 通过属性名来获取属性值 后面带NS 表示namespace 命令空间
//传递的是属性名
var attrVal = box.getAttribute('hello')
console.log(attrVal);//hi
设置 setAttribute(attrName,attrValue)
//设置属性
//第一个参数属性名 第二个参数为属性值(自动发生隐式转换)
box.setAttribute('age',18)//添加
box.setAttribute('age','20')//修改
删除 removeAttribute(attrName)
//移除属性 根据属性名来移除对应的属性 对于本身带的和后续添加的都可以进行操作
box.removeAttribute('hello')
box.removeAttribute('age')
相关的属性：
1、基础属性（元素对象的相关属性，不赋值就是获取，赋值就是设置）
id 属性 （获取/设置 id值）
var div = document.querySelector('div')
console.log(div.id); //获取对应的id属性值
div.id = 'hi'
className 属性 （获取/设置 class值）
console.log(div.className); //获取对应的class名字
div.className = 'box'
style 属性 （获取对应的一个样式对象 / 设置相关样式）
console.log(div.style); //获取一个样式对象 里面相关属性就是对应的css的样式名
console.log(div.style.backgroundColor); //获取对应的背景颜色的值
div.style.backgroundColor = 'red' //设置当前的背景颜色为红色
title 属性 （获取/设置 title属性）
console.log(div.title); //获取对应的title属性值
div.title = '你好'
tagName 属性 （只读属性）
//不能进行赋值操作
console.log(div.tagName); //获取对应的标签名 大写的标签名（全大小） （只读）
innerHTML 属性 （显示的html内容 编译对应的html代码）
console.log(div.innerHTML); //获取里面显示的html代码 (可以识别html代码)
div.innerHTML = '<a>改变的内容</a>'
innerText 属性 (显示的文本 不能编译html代码)
console.log(div.innerText); //获取对应显示的文本 （全部当作文本）
div.innerText = '<a>改变的内容</a>'
2、节点相关属性（只读属性）
previousElementSibling 前面的元素
//前面的元素
console.log(div.previousElementSibling);
nextElementSibling 后面的元素
//后面的元素
console.log(div.nextElementSibling);
parentElement 父元素
//获取父元素 parentElement 子元素 children
console.log(div.parentElement);//获取到是一个元素
children 子元素集合 （HTMLCollection）
//获取子元素 children
console.log(div.children);//获取到的是一个元素数组 伪数组 HTMLCollection
3、相关获取元素内属性节点集合的属性（只读属性）
attributes 获取元素内所有的属性节点的属性，返回的是一个伪数组 nameNodeMap (伪数组 map他是存储键值对)
Node
DOM中的节点分类
1、元素节点 element
2、属性节点 attributeNode
3、文本节点 textNode
节点相关的属性
1、节点划分的属性 （*）
nodeName 节点名
nodeType 节点类型
nodeValue 节点值
2、节点关系的属性 （*）
父子关系：
parentElement 父元素
parentNode 父节点
childNodes 所有的子节点（包含元素节点和文本节点）
children 所有的元素节点
兄弟关系：
previousElementSibling 上一个元素节点
previousSibling 上一个节点
nextElementSibling 下一个元素节点
nextSibling 下一个节点
第一个子节点和最后一个子节点：
firstChild 第一个子节点
firstElementChild 第一个子元素节点
lastChild 最后一个子节点
lastElementChild 最后一个子元素节点
节点相关的方法 （*）：
replaceChild 替换子节点
appendChild 添加子节点
removeChild 删除子节点
insertBefore 插入节点到子节点前面
cloneNode 克隆节点
replaceChildren 替换所有子节点
append 添加多个子节点
remove 移除自己及所有的子节点
操作属性节点的方法：
setAttributeNode （属性节点 Attribute对象）
getAttributeNode （返回的是一个属性节点 Attribute）
removeAttributeNode （根据对应的属性节点删除）
删除空文本节点的相关方法：
