DOM文档对象模型
1.DOM基本介绍
节点类型与节点名称
全称：Document Object Model，DOM就是节点
nodeName：获取节点名称
nodeValue：获取元素节点的文本值
getElementById():快速查找节点的方法，同时也是js引用html标签的方法
nodeName：获取节点名称
nodeValue：获取元素节点的文本值
getElementById():快速查找节点的方法，同时也是js引用html标签的方法
getElementsByTagName()：快速查找标签名称，返回的是节点列表
getElementsByClassName()：查找body中class选择器声明的元素
document.getElementsByName()：访问body中对应的name值
document.querySelector()：等同于在括号内用CSS描写声明的类选择器
document.querySelectorAll()：可以找到所有的类选择器声明的标签
childNodes：它是一个类数组对象，它包含了该节点下所有子节点，它是会自动变化的
children：它会忽略所有的文本节点和空白节点，它是固定的
firstChild：访问第一个节点
lastChild：访问最后一个节点
parentNode：获取父级节点属性
previousSibling：返回的是同意父元素下前一个相邻节点，也就是它的前一个兄弟元素
nextSibling：返回下一个兄弟元素
previousElementSibling：上面的会把换行算上，所以需要它或下面一个属性，直接用于查询某个节点的上一元素节点
nextElementSibling：直接用于查找某一元素的下一节点
createElement()：创建一个元素节点
父节点.appendChild(子节点)：添加内容҅
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a href="" class="abc">链接1</a>
<ul id="test3">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script>
//创建一个新的p元素
let newP = document.createElement("p");
//创建一个文本节点
let newContent = document.createTextNode("这是一个测试");
//将文本节点添加给P元素节点作为子节点
newP.appendChild(newContent);
</script>
</body>
父节点.remove（子节点）：删除节点
父节点.replaceChild（新节点，旧节点）：替换节点
节点.clone(布尔值)：克隆节点
false：浅克隆 只复制其最外层的标签，不会复制内部内容
true：深克隆 复制选中元素的所有
createComment()：在这里面的内容会是一个注释，不会显示在页面上，但是检查的时候会有显示
实时集合
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2" name="qwe">Lorem ipsum dolor sit amet.</p> <a href="" class="abc">链接1</a>
<ul id="test3">
<li>item1</li>
<li name="qwe">item2</li>
<li>item3</li>
</ul>
<script>
let ul = document.getElementById("test3");
console.log(ul.childNodes.length);//7
let newLi = document.createElement("li");
newLi.innerText = "新的li元素";
ul.appendChild(newLi);
console.log(ul.childNodes.length);//ݒ8 长度已经实时的发生了改变
</script>
</body>
innerHTML：获取节点内部信息，它的显示和在页面上的没有区别
innerText：它的显示和在html代码中没有区别
属性和类的操作
元素属性操作相关方法
获取和设置元素属性
getAtt ribute()
setAttribute()
删除元素属性
removeAtt ribute()
元素的类的相关操作
classList
来获取一个元素节点所有的类
添加类
add()方法来给一个元素节点快速添加类
删除类
通过remove()方法来移除一个元素节点的类
切换类
toggle()方法是一个非常有用的方法，可以用来对类进行切换。如果元素节点没有给出的类， 就添加该类，如果有该类，就删除该类。如果类被添加了，就返回true,如果是被删除了，就返 回false。
自定义属性
使用data -作为前缀，比如给＜p＞元素添加 —个自定义属性power，应该设置为data-power
操作CSS
test1.style.color = "red"
操作表格
获取表格的行和列