页面节点介绍

页面卷动值

页面卷动值：页面中位于视口上方的看不到的高度
有些浏览器 比如 IE 火狐 认为这个值应该是html的属性 所以要通过html元素获取 还有一些浏览器 比如早期的chrome 认为该值是body的属性 要通过body元素获取
解决html元素获取在不同浏览器不同 ：
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
获取页面的卷动值
console.log(document.body.scrollTop);
console.log(document.documentElement.scrollTop);
该属性可获取可设置
document.documentElement.scrollTop = 0; 0回顶部
页面卷动值高度 + 适口高度 + sum >= 页面高度 做回到顶部效果
sum表示从某位置到底部高度
document.documentElement.scrollTop + window.innerHeight + sum >= 页面高度

childNodes 节点列表 空白符 会被高级浏览器认为是一个文本节点 IE反而不会有该问题
nodeType 属性表示节点的类型 总共有12种节点类型
常用的五种： 1 元素 2 属性 3 文本 8 注释 9 文档
nodeName 节点名称
nodeValue 节点值

父子关系
1 获取所有的子节点 childNodes
2 获取所有的元素节点 children 有兼容性问题
3 第一个子节点 firstChild
4 第一个元素节点 firstElementChild
5 最后一个子节点 lastChild
6 最后一个元素节点 lastElementChild

子父关系
console.log(list.parentNode);
console.log(list.parentElement);

兄弟关系
var sp = document.getElementById(“sp”);
前一个兄弟 previousSibling
console.log(sp.previousSibling)
前一个元素兄弟 previousElementSibling
console.log(sp.previousElementSibling);
下一个兄弟 nextSibling
console.log(sp.nextSibling);
下一个元素兄弟 nextElementSibling
console.log(sp.nextElementSibling)