1、节点的属性（nodeName、nodeType、nodeValue）：
文档节点：
nodeType = 9nodeValue = nullnodeName= #document
元素节点：
nodeType = 1nodeValue = nullnodeName= 标签名
属性节点：
nodeType = 2nodeValue = 属性值nodeName= 属性名
文本节点：
nodeType = 3nodeValue = 文本内容nodeName= #text
2、Dom的获取：
① 获取body标签：document.getElementsByTagName("body")[0] 或 document.body
② 获取html根标签：document.documentElement
③ 获取页面中所有的元素：document.all 或 document.getElementsByTagName("*")
④ 获取标签元素的属性：元素.属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script></script>
</head>
<body><div id="app"><button class="btn">我是一个按钮</button><input type="text" value="请输入" class="input0"/></div><script>let inputDom = document.getElementsByClassName("input0")[0]console.log('inputDom',inputDom.value) </script>
</body>
</html>
⑤ 获取当前元素下面的所有子节点(IE8以上包含换行和空格)：元素.childNodes
⑥ 获取当前元素下面的所有子元素(不包含空格)：元素.children
⑦ 获取当前元素下面的第一个子节点(IE8以上包含换行和空格)：元素.firstChild
⑧ 获取当前元素下面的第一个子元素(不包含空格，适用IE8以上)：元素.firstElementChild
⑨ 获取当前元素的父节点：元素.parentNode
⑩ 获取当前元素的前兄弟节点(可能或获取到空白)：元素.previousSibling
⑪ 获取当前元素的前一个兄弟元素(不会获取到空白) ：元素.previousElementSibling
⑫ 获取当前元素的后一个兄弟节点(可能或获取到空白)：元素.nextSibling
3、Dom的增删改：
① 新建元素节点：document.createElement("标签名")
② 向父节点中添加子节点：父节点.appendChild(子节点)
③ 在指定的子节点前面插入新的子节点：父节点.insertBefore(newChild, oldChild)
④ 指定子节点替换已有的子节点：父节点.replaceChild(newChild, oldChild)
⑤ 删除子节点：
-
1、父节点.removeChild(要删除的子节点)
-
⑥ 新增文本节点 ： document.createTextNode("文本")
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><div>第1个div</div><div>第2个div</div><ul><li>1、哈哈哈</li><li>2、嘻嘻嘻</li></ul></div><script>/*** 给指定的父元素新增一个子节点*/// 方法一：// 新建元素节点let liDom = document.createElement("li")// 给指定元素添加文本// liDom.innerText = '3、嘿嘿嘿'// 同理：给指定元素添加文本方法2（需要两步，①新增文本节点 ②将文本节点放在元素节点内容）let liText = document.createTextNode("3、嘿嘿嘿")// 向父节点中添加子节点 -- 父节点.appendChild(子节点)liDom.appendChild(liText)// 最后将构造完成的子节点，放在父元素的里边let ulDom = document.getElementsByTagName("ul")[0]ulDom.appendChild(liDom)// 方法二：直接使用innetHTML进行父元素内容的重写（如果有绑定的函数，则会失效），不推荐直接使用// let ulDom = document.getElementsByTagName("ul")[0]// ulDom.innerHTML += '<li>3、嘿嘿嘿</li>'/*** 在指定的子节点前面插入新的子节点* -- 父节点.insertBefore(newChild, oldChild)*/let oldChildDom = document.getElementsByTagName("li")let newChildDom = document.createElement("H1")newChildDom.innerText = '放在 3、嘿嘿嘿 之前'ulDom.insertBefore(newChildDom, oldChildDom[oldChildDom.length - 1])/*** 指定子节点替换已有的子节点* -- 父节点.replaceChild(newChild, oldChild)*/let replaceChildDom = document.createElement("p")let pText = document.createTextNode("使用 p 标签替换 H1")replaceChildDom.appendChild(pText)ulDom.replaceChild(replaceChildDom, newChildDom)/*** 删除子节点* -- 1、父节点.removeChild(要删除的子节点)* -- 2、子节点.parentNode.removeChild(要删除的子节点)*/// ulDom.removeChild(replaceChildDom)// replaceChildDom.parentNode.removeChild(replaceChildDom)</script>
</body>
</html>
4、元素的样式：
① 获取行内样式：元素.style.样式名称
② 获取当前正在显示的样式（只能读，不能修改，想要修改要使用style）：
-
1、 只有ie支持：元素.currentStyle.样式名称
-
-
参数一：需要获取样式的元素
-
-
返回值：key是样式名，值是样式名的对象
③ 获取元素可见区的宽度和高度（不带px）：
-
1、 clientWidth - 包含width+padding
-
④ 获取元素整个的宽度和高度（不带px）：
-
1、 offsetWidth - 包含width+padding+border
-
⑤ 获取当前元素的定位父元素（获取到离当前元素最近的祖先定位，如果没有开启定位的祖先元素，则返回body）：
-
offsetParent - 包含width+padding+border
⑥ 获取当前元素相对于其定位父元素的水平偏移量：offsetLeft
⑦ 获取当前元素相对于其定位父元素的垂直偏移量：offsetTop
⑧ 获取滚动区域的宽度：scrollWidth
⑨ 获取滚动区域的高度：scrollHeight
⑩ 获取水平滚动条滚动的距离：scrollLeft
⑪ 获取垂直滚动条滚动的距离：scrollTop
当满足 scrollHeight - scrollTop == clientHeight ，说明垂直滚动条滚动到底
当满足 scrollWidth - scrollLeft == clientWidth， 说明水平滚动条滚动到底
onscroll事件：会在滚动条滚动的时候触发
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;padding: 0;}#app {/* position: relative; */}#box1 {width: 100px;height: 100px;background-color: pink;padding: 10px;margin: 5px;}</style>
</head>
<body><div id="app"><div id="box1" style="border: 6px solid blue;"></div></div><script>window.onload = function() {let box1Dom = document.getElementById("box1")// 获取行内样式：元素.style.样式名称let borderWidth = box1Dom.style.borderWidthconsole.log('borderWidth',borderWidth) // 6px// 设置（可以增加，也可以修改）样式box1Dom.style.borderColor = 'purple'console.log('行内样式Width',box1Dom.style.width) // 获取不到/*** 获取当前正在显示的样式（只能读，不能修改，想要修改要使用style）：* - 只有ie支持：元素.currentStyle.样式名称* - 其他浏览器：使用windows对象上的 getComputedStyle() 方法，此方法接收两个参数：* - 参数一：需要获取样式的元素* - 参数二：传递一个伪元素，一般传null* - 返回值：key是样式名，值是样式名的对象*/let box1DomCurrentStyle = getComputedStyle(box1Dom, null)console.log('当前正在显示的样式Width',box1DomCurrentStyle.width) // 100px/*** 获取元素可见区的宽度和高度（不带px）：* clientWidth - 包含width+padding* clientHeight - 包含width+padding*/let box1DomClientWidth = box1Dom.clientWidthconsole.log('box1Dom可见宽度',box1DomClientWidth) // 120px/*** 获取元素整个的宽度和高度（不带px）：* offsetWidth - 包含width+padding+border* offsetHeight - 包含width+padding+border*/let box1DomOffsetWidth = box1Dom.offsetWidthconsole.log('box1Dom整个的宽度',box1DomOffsetWidth) // 130px/*** 获取当前元素的定位父元素（获取到离当前元素最近的祖先定位，如果没有开启定位的祖先元素，则返回body）：* offsetParent - 包含width+padding+border*/let box1DomOffsetParent = box1Dom.offsetParentconsole.log('box1Dom的定位父元素',box1DomOffsetParent) // body/*** 获取当前元素相对于其定位父元素的水平偏移量：offsetLeft* 获取当前元素相对于其定位父元素的垂直偏移量：offsetTop*/let box1DomOffsetLeft = box1Dom.offsetLeftconsole.log('box1Dom相对于其定位父元素的水平偏移量',box1DomOffsetLeft) // 相对于body}</script>
</body>
</html>
