DOM是文档对象模型,它主要包含了获取元素、修改样式、操作元素三个方面的内容,我们的绝大部分操作都是DOM操作,DOM操作大部分是可以兼容的,因为多个浏览器具有兼容写法。我们这里还可以介绍一下DOM的一些具体的内容
1、获取父节点 obj.parentNode
最大的祖宗是document,在往上就是null
2、获取子节点 childNodes 获取子节点,包括文本节点
节点类型:文本节点、标签节点
检测节点的类型可以用nodeType:文本节点是3;标签节点是1;documnent是9
获取子节点的另一个方法是 children ,但是它和childNodes是有区别的:
(1)它只包括一级子节点,即只包括它的儿女,不包括它的孙子,孙女
(2)它不会获取到文本节点
3、获取上一个兄弟节点
obj.previousElementSibling 兼容:高版本浏览器
obj.previousSibling 兼容:ie6,7,8
兼容写法
obj.previousElementSibling||obj.previousSibling;
获取下一个兄弟节点
obj.nextElementSibling 兼容:高版本浏览器
obj.nextSibling 兼容:ie6,7,8
兼容写法
obj.nextElementSibling||obj.nextSibling;
4、获取首尾子节点
首子节点
父级.firstElementChild 兼容高版本浏览器
父级.firstChild 兼容ie6,7,8
兼容写法
父级.firstElementChild||父级.firstChild
尾子节点
父级.lastElementChild 兼容高版本浏览器
父级.lastChild 兼容ie6,7,8
兼容写法
父级.lastElementChild||父级.lastChild
PS:这样写看起来太麻烦,所以我们完全可以用children方法搞定
首子节点 obj.children[0];
尾子节点 obj.children[obj.children.length-1];
获取节点的详细内容就讲到这里,之后还有获取物体信息和创建元素
5、物体信息
obj.offsetWidth 获取盒子模型的宽度
obj.offsetHeight 获取盒子模型的高度
obj.offsetLeft 获取元素距离定位父级左边距。
obj.offsetTop 获取元素距离定位父级上边距
没有offsetRight/offsetBottom
obj.offsetParent 获取定位父级
这里需要顺带提一下parentNode和offsetParent都是获取父级,但是它们有什么区别呢?parentNode是获取结构上的父级,而offsetParent是获取定位上的父级。
6、创建元素
document.createElement('标签名')
添加元素:
父级的最后面添加了一个元素:父级.appendChild(新创建的对象);
把一个元素插入到另一个元素之前:父级.insertBefore(要插入的元素,插入到谁之前);
删除元素:父级.removeChild(要删除的对象);
7、克隆元素
obj.cloneNode();只会克隆这个标签
obj.cloneNode(true) 深度克隆元素,包括属性内容一起克隆
*注意:id也会被一起克隆。所以如果有id,每次克隆之后,需要去除id,obj.id='';
BOM是浏览器对象模型,包括浏览器的一些操作,如window.open、window.alert、window.close等,BOM介于各个浏览器厂商对浏览器的不同规定,所以兼容性很差。
其中比较重要的一些内容,我们是需要知道的;
1、获取浏览器的详细信息:window.navigator.userAgent
2、onscroll 当页面滚动时触发。
滚动距离(页面滚了多少它就是多少)
document.documentElement.scrollTop;不兼容chrome
document.body.scrollTop;兼容chrome的。
兼容写法:
document.documentElement.scrollTop||document.body.scrollTop;
3、获取可视区高度
document.documentElement.clientHeight;
获取可视区高度
document.documentElement.clientWidth
4、改变窗口大小事件 onresize