Dom

文档对象模型
Dom是关于创建，修改，插入，删除页面元素的标准
Dom赋予我们操作操作页面的能力

页面的内容都是字符串，js会把这些字符串转换成DOM树，DOM树会把字符串转换成节点，其实我们操作DOM的根本就是操作节点

Dom结构

DOM节点

            var box = document.getElementById("box");var attr = box.attributes;//元素属性节点的集合console.log(attr);console.log(attr[0]);//id=boxvar child = box.childNodes;//元素子节点的集合console.log(child);//元素节点,(常用)console.log(box.nodeName); //divconsole.log(box.nodeType);  //1//属性节点console.log(attr[0].nodeName);//idconsole.log(attr[0].nodeType); //2//文本节点console.log(child[0].nodeName);//#textconsole.log(child[0].nodeType);//3//注释节点console.log(child[3].nodeName);//#commentconsole.log(child[3].nodeType);//8//文档节点console.log(document.nodeName);//#documentconsole, log(document.nodeType);//9

• arrtibutes
  属性节点，返回元素身上的所有属性节点，每个属性都会有一个自己对应的下标
  其中length属性代表元素身上有多少个属性节点

• childNodes
  元素身上的第一层子节点，返回元素身上的所有子节点的集合（第一层）

• nodeName
  节点的名称
  任何一个节点都会有这个属性

• nodeType
  节点的类型,返回的是一个数字

nodeName与tagName的区别

nodeName节点名称，任何一个节点都有节点名称
tagName 标签名称，只有元素节点才有这个属性

点击子节点隐藏父节点

隐藏1
隐藏2
隐藏3
隐藏4
隐藏5

查找节点

• parentNode
  元素的父节点
  属性节点是没有父节点的

使用元素父节点完成【点击子元素隐藏父节点】

隐藏1
隐藏2
隐藏3
隐藏4
隐藏5

• children（非标准）
  父级.children
  获取到父级下的第一层子元素，它是一个集合,代表所有的子元素，每个子元素都有一个对应下标
  它还有一个length属性，代表子元素的个数

• childrenNodes
  获取元素的第一层的所有子节点，包括文本注释

• previousElementSibling
  找到上一个兄弟节点，找不到就返回null

    
隐藏1
隐藏2
隐藏3
隐藏4
隐藏5

• nextElementSibling
  找下一个兄弟节点，找不到返回null
• firstElementChild
  父级.firstElementChild
  找到第一个子节点

    
隐藏1
隐藏2
隐藏3
隐藏4
隐藏5

找第一个兄弟节点的代码运行效果

• lastElementChild
  找最后一个兄弟节点

元素最近的有定位的父级之间的距离

• offsetLeft
  作用：找到元素最近的有定位的父级之间的距离,不带单位，并且不带边框

语法：
元素.offsetLeft

• offsetTop
  找到元素最上方离最近的有定位父级之间的距离，不带单位，并且不带边框
  注意：如果没有定位的父级，默认是到html的距离
  遵循一个原则：
  1.给父级定位
  2.一上来清除默认样式