JavaScrip 之 DOM
dom 树
html 文档的骨干是标签。
根据文档对象模型(dom)，每个html标签都是一个对象，同样标签内的文本也是一个对象。因此这些对象都可通过 javascript 操作
如果文档中有空格（就像任何字符一样），那么它们将成为 dom 中的文本节点，如果我们删除它们，则不会有任何内容。<head> 之前的空格和换行符被忽略</body> 之后放置了一些东西，那么它会自动移动到 body 内部，因为 html 规范要求所有内容必须位于
通常再浏览器中的文本不会显示开头/结尾的空文本节点，标签之间也不会显示空文本节点。
如果浏览器遇到格式不正确的html，在形成dom是会自动修复它
如：<html> 即使不在文档中，浏览器也会自动创建它
按dom规范，table 必须具有 <tbody>,因此table中未使用<tbody> 形成dom时会自动添加。
其它 节点：
注释不会以任何方式影响视觉表示，但是必须遵循一条规则 —— 如果html中有东西，那么它必须在dom树中。
html中所有内容都是dom的一部分，
注释是一个节点甚至<!doctype...>也是一个节
dom总有
遍历dom节点
所有对dom的操作都是从document对象开始，将这个对象赋予一个变量，对其进行修改操作
最顶端的节点
dom节点树可以通过 document属性使用
顶端的节点对应<html> 并且 <html> = document.documentelement
而<body> = document.body,<head> = document.headdocment.body可能为null，如果将script脚本放入 <head>标签种，那么此脚本无法访问到document.body，即为null
childnodes
childnodes 集合提供对所有子节点包括文本节点的访问，它看起来是一个数字，实际上只是一个可迭代的类数组对象，因此没有数组的方法
所有的dom 集合节点都是只读的无法通过赋值来替换对应的节点
除小部分节点，几乎所有的dom集合都是实时的，它们反应的是dom的实时状态
不要是有 for...in来遍历dom集合，此方法会列出其所有的属性。
注意此属性只能访问到当前script脚本之前对应的节点
可以通过elem.haschildnodes()来检测是否含有子节点
parentnode / siblingnode
通过elem.parentnode可访问当前节点的父节点
通过elem.previoussibling/elem.nextsibling可访问对应节点的上/下兄弟节点
只访问元素节点
- children： 只获取类型为元素节点的子节点
- firstelementchild,lastelementchild：只获取第一或最后一个子元素
- previouselementsibling, nextelementsibling：兄弟元素
- parentelement：父元素
parentelement 可能为null,因为其方法返回的是父元素节点，而parentnode返回的是任何类型的父节点，因此,document.documentelement.parentelement === null
htmlcollection （动态）
通过元素查找子元素如果子元素是一个集合将返回 htmlcollection 类数组
let tb = documet.queryselector('table')
let tbs = tb.tbodies // htmlcollection [tbody]
let trs =tbs.rows // htmlcollection [tr,tr,tr,...]
let tr1 = trs[0]
tr1.sectionrowindex //0 当前 tr 在集合中的位置
tr1.rowindex // 1 当前 tr 在整张表中的 位置
let tds = tr1.cells // htmlcollection [td,td,td,...]
td[0].cellindex //0 当前 td 在父元素 tr节点 中的位置
nodelist （静态）
通过 document 中的方法 document.queryselectorall 或elem.queryselectorall获取的元素集合将返回nodelist类数组getelement* 方法只能通过 document对象调用
let divs = document.queryselectorall('div') // nodelist(4) [div.owen, div#modal, div.main, div]
document.getelementsbytagname('div')//htmlcollection [div.owen]
matches
elem.matches(css)会检测 elem是否匹配到给定的css选择器，返回 true 或 false
closest
elem.closest(css)此方法会查找css选择器匹配到的祖先html，包括自身，并返回最先找到的元素
contains
elem.catains(dom) 判断 dom 是否为 elem 的后代，或等于elem，返回true 或false
节点属性
所有的节点都继承自根节点 eventtarget
- eventtarget:作为基础，让所有dom 节点都支持事件
- node：作为dom 节点的基础，提供dom树的核心功能：
parentnode、nextsibling、previoussibling、childnodes等（只能读取 getter）;文本节点text,元素节点element,注释节点comment都继承自node - element：做为dom 元素的基类。提供元素级导航：
nextelementsibling、children、getelement*、queryselector等等，浏览器不仅支持html，还支持 xml、svg等，分别对应的基类htmlelement、xmlelement、svgelement - htmlelement:作为所有元素的基类，被各种元素继承
innerhtml 和 outerhtml
- innerhtml: 获取或替换当前节点的所有子节点（不包含当前节点）
- outerhtml: 替换当前节点
文档片段 documentfragment
用于存储节点的包装器，不会再浏览器中展示，需要通过插值方法才能展示包装器里面的内容
function createl(){
let frag = new documentfragment();
for (let i=1;i<4;i++) {
let li = document.createelement('li')
li.append(i)
frag.append(li)
}
return frag
}
ul.append(createl())
类样式的修改等操作
elem.classname 对应元素的类名，多个类目以空格分隔
ul.classname // "class1 class2 ..."
同时还要一个 elem.classlist 对象可访问类名，它以类数组的方式存在，同时具有 add/remove/toggle/contains 等方法
ul.classlist // domtokenlist(2) ["333", "444", value: "333 444"]
ul.classlist.add('class1')
ul.classlist.remove('class1')
ul.classlist.toggle('class1') // true 新增
ul.classlist.toggle('class1') // false 去除
ul.classlist.contains('class1') //false 是否包含
通常我们使用 style.*单独对样式属性进行修改，如果想要对多种样式进行调整可使用 csstext，此方法会直接替换之前的样式
ul.style.csstext = `
color: red ;
background-color: skyblue;
width: 20px;
text-align: center;`
style 属性仅针对 style 属性值进行操作，无法读取css类中的属性值
<style>
body {margin:20 auto;}
</style>
<script>
document.body.style.margin // ""
</script>
这时我们需要使用 getcomputedstyle(el,[,pseudo])方法来获取对应的值
如果不传参或值无意义，将返回元素所有样式,其属性值都为解析值，如 font-size:1em 最后获取的可能为解析后的值"16px"
let res = getcomputedstyle(document.body) res.margintop // "20px" res.margin // 谷歌 "20px 0px" 在火狐中为 "" 因此访问确切属性值须使用完整属性名
获取元素的尺寸和滚动距离
- offsettop/left: 获取相对于设置有position属性为 absolute relative、fixed 的值或td、th、table、body的元素的距离
- offsetwidth/height：获取外部宽度/高度，包含border,padding,scrollbar (display:none 或自身不在文档中，其值为0或null，由此可判断当前元素是否被隐藏)
- clienttop/left：获取内侧与外侧的距离（滚动条在左边时，包含滚动条的宽度）
- clientwidth/height：获取可视区内容的宽高，即不包含滚动条和border
- scrollwidth/height：获取全部内容（包含隐藏部分）的宽高
- scrolltop/left: 获取 元素隐藏部分的上/左距离，包含border,这两个属性可修改，其它属性能只读取
html 文件里如果没有<!doctype html>上述的属性可能会有所不同，这不是一个 javascript 的问题，但会影响到 javascript。
滚动浏览器窗口
pagexoffset/pageyoffset: 获取可视窗口移动的距离 无法设值
可通过 window.scrollby, window.scrollto, elem.scrollintoview来滚动窗口
-
scrollby(x,y)：滚动页面至相对于现在位置的(x,y)位置 -
scrollto(x,y)：滚动到页面相对于文档左上方的（x,y）,位置，类似于scrolltop/scrollleft -
elem.scrollintoview(truly)：如果 truly 为真则使 当前元素 滚动至窗口顶部，元素顶部与窗口顶部对齐，如果truly 为false,则当前元素底部与窗口底部对齐。
如果禁止窗口滚动可使 样式属性 overflow 值为 hidden
坐标
getboundingclientrect()`方法获取相对于可视窗口的坐标对象
其所有属性都是以可视窗口左端（x）和顶部（y）为起点
ul.getboundingclientrect()
/*
domrect {
bottom: 829.59375 // 元素底部的y坐标
height: 210 // 元素真实高度
left: 0 // 元素左边 x 坐标
right: 1903 // 元素右边 x 坐标
top: 619.59375 // 元素顶部 y 坐标
width: 1903 // 元素自身真实宽度即不包含滚动条
x: 0
y: 619.59375
}
*/
document.elementfrompoint
document.elementfrompoint(x,y)返回可视窗口坐标（x,y），最顶层的元素
let elem = document.elementfrompoint(0,0) // <p>556666</p>
如果x,y不在正常范围内将返回 null,
相对于文档坐标，js并未提供原生标准方法，可自己写一个出来：
function getdomcoords(el){
let {top,left} = el.getboundingclientrect()
return {
top:top+ window.pageyoffset,
left:left+window.pagexoffest
}
} 上一篇： 初识socket