console.log(document)
childNodes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul id="list">
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li>
<span>span1</span>
<span>span2</span>
</li>
</ul>
<script>
{
let list =document.querySelector("#list");
console.log(list.childNodes);
}
</script>
</body>
</html>
console.log(document.childNodes);
有两个节点
一个是：<!DOCTYPE html>
一个是：<html lang="en">...</html>
查找子级
childNodes子节点(包含所有节点: 文本节点、注释节点、元素节点……)
常用节点类型
nodeType nodeName
元素节点 1 标签名字
属性节点 2
文本节点 3 #text
注释节点 8 #comment
文档声明 10 html
children
查找子级
children 子元素 (只包含元素节点)
HTMLlCollection和NodeList的区别
共同点：都是获取到的一组元素
querySelector\querySelectorAll\获取到的是NodeList
children\getElementsByTagName\getElementsByClassName获取到的是HTMLlCollection
不同点：
HTMLlCollection每次调用都会动态更新获取结构内容
NodeList有动态更新但querySelctorAll比较特殊不会动态获取更新内容
NodeList可以使用数组方法forEach等等
HTMLlCollection不可以使用数组方法forEach等等
更多查找子级
firstChild 第0个子节点
firstElementChild 第0个子元素
lastChild 最后一个子节点
lastElementChild 最后一个子元素
查找兄弟
nextSibling 下一个兄弟节点
nextElementSibling 下一个兄弟元素
previousSibling 上一个兄弟节点
previousElementSibling 上一个兄弟元素
查找父级
parentNode 父节点
parentElement 父元素(无异于parentNode )
offsetParent 定位父级 (元素根据定位的这个父级)
如果元素本身有绝对定位那么定位父级是离他最近的父级，如果本身没有定位那么定位父级就是他父级
属性操作
. 和 [] 是 ECMAScript 的属性操作
<div id="box" class="box" lth="dom"></div>
var div=document.querySelector("#box");
div.index=0;
不会显示在页面上操作的是元素获取之后编译的对象
具体的数据存在内存中可以存储各种数据类型
box.setAttribute("lth","dom")
显示在页面上dom操作值存在文档中
用div.lth去访问是错误的
不能用这个去访问用dom节点操作添加上去的
console.log(typeof div.index)
console.log(typeof div.getAttribute("lth"))
console.dir(document.querySelector("#box"))
合法属性 w3c 规定的合法元素属性 都存到这个对象中,lth属性不是合法属性是一个自定义属性
el.attributes 在文档中获取 元素 所有属性的集合
el.getAttribute("attr")
el.setAttribute("attr","val")
el.removeAttribute("attr")
el.hasAttribute("attr")
只要操作innerHTML元素的所有子元素
存在内存中的事件和对象和相关的属性都会丢失
如果希望保留，可以再dom上面进行setAttribute
自定义属性接口 data-
能直接显示在页面上存在文档里只能接收字符串
<div id="box" data-lth="dom">box</box>
let box=document.querySelector("#box")
console.log(box.data-lth)//获取不到
box.dataset.lth="dom"
box.dataset.lwl="dom"
console.log(box.dataset.kkb)
只要操作innerHTML元素的所有子元素，存在内存中的事件和对象和相关的属性都会丢失
创建节点
document.createElement("tagName");
appendChild
parent.appendChild(node)
向 parent插入node插入在node节点内容的最末尾
insertBefore
parent.insertBefore(newNode,oldNode); 在parent插入newNode插入在oldNode之前
如果插入的节点是一个已有节点的话，会先把这个节点从原先的位置删除，然后放入我们的新位置(移动的效果)
replaceChild
parent.replaceChild(newNode,oldNode)
如果替换的节点是一个已有节点的话，会先把这个节点，从原先的位置删除，然后放入我们的新位置
删除节点
node.remove() 返回值undefined
parent.removeChild(node) 返回值是被删除的节点
都是node 不需要加引号
克隆节点
node.cloneNode(boolen)
默认false 只克隆元素本身以及他的属性 并没有克隆事件
true 克隆元素及属性 以及元素的内容和后代 并没有克隆事件
返回一个克隆节点
文档碎片 createDocumentFragment
console.time(1)
let fragment = document.createDocumentFragment()
for(let i = 0
let div = document.createElement("div")
div.innerHTML = i
fragment.appendChild(div)
}
box.appendChild(fragment)
console.timeEnd(1)
offset
width(height) + padding + border
offsetWidth
offsetHeight
元素距离定位父级左上角的距离
offsetTop
offsetLeft
client
clientWidth/clientHeight = width(height) + padding;
clientLeft/clientTop: 左边框(border-left)宽度/上边框宽度
scroll
scrollTop 滚出去的距离
scrollLeft
=scrollHeight 内容高度，如果内容高度比元素高度要高，scrollHeight 就是内容，否则就是元素高度
scrollWidth 元素的内容宽度，如果内容宽度小于box宽度，就是box宽度
getBoundingClientRect()
left 元素的左侧相对于可视区 左侧 的距离
right 元素的右侧相对于可视区 左侧 的距离
top 元素顶部相对于可视区 顶部的距离
bottom 元素底部相对于可视区 顶部的距离
height 元素的可视高度
width 元素的可视宽度
table
table.tHead 获取表头
table.tBodies 获取tbody 是一数组
table.tBodies[0].rows[0].cells 获取行（tr） 获取单元格（th,td）
table.tFoot
console.log(table.tHead,table.tFoot,table.tBodies);
console.log(table.tBodies[0].rows[0].cells[0]);
