第9天-BOM和DOM

阅读量：4692 次

发布时间：2019-06-09

本文共 3296 字，大约阅读时间需要 10 分钟。

什么是DOM

文档对象模型（Document Object Model），DOM作用：可以去修改网页内容、样式、结构。每个浏览器都会把html文档解析成dom树，就可以用相关方法和属性操作网页元素

DOM节点

什么是节点？节点之间的关系？

根节点：html, 也叫祖先节点

父节点

子节点

兄弟节点

节点类型

元素节点	1
文本节点	3
文档节点	9
注释节点	8


      
       heboan

nodeType获取节点类型

节点类型使用场景

View Code

这行上面代码是会报错的，这是为什么呢？

我们console.log(aNodes)看看，发现有7个对象，我们不是只有3个li吗？？？

这是因为，它识别到空格为text了

所以，这个时候，我们就可以利用节点类型进行过滤了

View Code

节点名的使用场景

nodeName使用场景

上面的代码的如果不做nodeName判断，那么就会出现bug，点击到ul，会导致整个ul变色

查找元素方法

getElement系列

　　getElementById ：id来获取

　　getElementsByClassName: 通过类名称来获取

　　getElementsByTagName: 通过标签名来获取

　　总结：凡是Element带s，就表示返回的事一个集合

　　通过设置范围，查找相应的元素

　　　　document.getElementById

　　　　obj.getElementById

querySelector系列

查找 wrap下面的所有的div

getElement写法

querySelector写法

querySelector查找id为box的元素

querySelectorAll返回有的符合条件的，querySelector只返回某一个

总结：两者的区别，getElement执行效率更高，查找起来相对麻烦些

常用的属性

childnodes 获取所有子节点

获取oWrap所有的子节点

可以看到所有子节点包含了空格（文本节点），如果只想获取所有的子元素节点，可以使用children

children 获取所有的子元素节点

获取oWrap所有的子元素节点

parentNode获取父节点

获取 oWrap的父节点

previousSibling获取上一个兄弟节点

获取 oBox的上一个兄弟节点

nextSibling获取下一个兄弟节点

获取 oBox的上一个兄弟节点

DOM操作

createElement 创建一个元素

appendChild 添加一个子元素在最后

示例

inertBefore 在一个元素钱插入元素

insertBefore

removeChild 删除一个子元素

removeChild

宽、高和位置总结

鼠标位置:

clientX/clientY 鼠标在浏览器可视区的坐标

pageX/pageY: 鼠标在整个网页中的坐标

鼠标位置

offset系列

offsetLeft offsetTop 是相对于定位父级的坐标位置

offsetWidth offsetHeight 是元素实体所占的总宽高，例如：总宽度=内容 + padding +border

offsetParent 表示定位的父级元素

...

offset系列

scroll系列

scrollLeft和scrollTop 表示元素滚出去的距离

scrollWidth和scrollHeight 对象的实际内容的宽高，会随对象中内容超过可视区后而变大

...

sroll系列

可视区宽高

clientWidth

clientHeight

...

可视区宽高

client和offset区别： client不加border，offset加border

文档可视区宽高以及滚动距离计算（重要）

文档可视区宽高以及滚动距离计算