JS获取DOM节点

DOM操作

• getElementById() 返回带走指定ID的元素

• getElementByTagName() 返回指定标签名称的所有元素的节点（节点数组）

• getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表(节点数组)

• getElementsByTagName()返回包含带有指定name属性值的所有元素节点列表（节点数组）。

• querySelector()返回文档中匹配指定CSS选择器的一个元素。

• querySelectorAll()返回文档中全部匹配指定CSS选择器的所有元素。

• nextSibling 获取下一个兄弟节点（文档 包括有空格换行等）

• nextElementSibling 获取下一个兄弟节点可以忽略文档节点，直接获取元素节点

• previousSibling 获取上一个兄弟节点 （文档 包括有空格换行等）

• previousElementSibling 获取上一个兄弟节点 可以忽略文档节点，直接获取元素节点

• lastChild 最后一个子节点，会返回指定节点的最后一个子节点，包含文本节点

• lastElementChild 最后一个子节点，会忽略文本节点，直接获取元素节点

• childNodes 会返回包含指定节点所有子节点的数组，包括非元素节点

• children 会返回包含指定节点所有元素子节点的数组，没有兼容问题

• parentNode 获取父节点

• document.createElement(‘标签名’) 创建元素节点，会创建一个指定类型的标签，类型是给定的标签名

• element.appendChild 会指定的节点插入到element节点的末尾

• replaceChild(new,old) 用新节点替换掉指定的子节点

• removeChild() 删除当前节点指定的子节点。

• remove() 删除指定节点

• 设置或修改id，class属性

//id  重新赋值
wrap.id = 'box';
wrap.className = 'box';

• 设置或修改style中的属性
• 注：其他样式写法和示例相同,
  所有在层叠样式表中带有“-”的属性，在JS中全部用驼峰命名，省略中间的“-”！

element.style.width = '100px';
element.src = './imgs/0.png';
element.style.fontSize = '30px';

获取滚动条的偏移量

Chrome支持

• 纵向滚动条 document.body.scrollTop
• 横向滚动条 document.body.scrollTop

Firefor支持

-纵向滚动条 document.documentElement.scollTop

• 横向滚动条 docuemnt.documentElement.scollLeft

safari支持

• 纵向滚动条 window.pageYOffset
• 横向滚动条 window.pageXOffset

IE（有DOCTYPE）支持

• 纵向滚动条 document.documentElement.scollTop
• 横向滚动条 document.documentElement.scollLeft

IE(没有DOCTYPE声明)

• 纵向滚动条 document.body.scollTop
• 横向滚动条 document.body.scollLeft

兼容写法

//兼容纵向滚动条
var scrollTop=document.Element.scrollTop||window.pageYofset||document.body.scrollTop

//兼容横向滚动条
var scrollLeft=document.Element.scrollLeft||window.pageXOffset||document.body.scrollLeft

获取窗口可见高度

• 获取窗口可见高度

document.documentElement.clientHeight

• 获取窗口可见宽度

document.documentElement.clientWidth

获取页面整体高度和宽度

• 获取页面整体的高度

document.document.scrollHeight

• 获取页面整体的宽度

document.documentElement.scrollWidth

滚动条高度+当前窗口的可见高度==页面的整体高度

resize 事件

当窗口过框架被调整大小时发生

window.onresize = function(){...}