页面卷动值

页面卷动值

• 视口上方的页面高度
• document.body.scrollTop || document.documentElement.scrollTop
• 可读可写

节点

节点类型(nodeType)

• 1 元素节点
• 2 属性节点
• 3 文本节点
• 8 注释节点
• 9 文档节点

节点值 (nodeValue)

• 1 null
• 2 属性值
• 3 文本内容
• 8 注释内容
• 9 null

节点名称(nodeName)

• 1 标签名大写
• 2 属性名
• 3 #text
• 8 #comment
• 9 #document

节点操作

• 创建节点
  • createElement
  • createTextNode
  • createComment
• 克隆节点
  • cloneNode
• 追加节点
  • appendChild
• 插入节点
  • insertBefore
• 替换节点
  • replaceChild
• 移除节点
  • removeChild
  • remove

节点关系

• 父子关系
  • childNodes
  • children
  • firstChild
  • lastChild
  • firstElementChild
  • lastElementChild
• 子父关系
  • parentNode
• 兄弟关系
  • previousSibling
  • previousElementSibling
  • nextSibling
  • nextElementSibling

快捷尺寸

在JS开发中，我们无非就是操作页面，此时，需要很频繁的获取页面中的元素的相关数据。比如宽度、高度、定位值等相关信息。
于是，DOM把常用的相关数据，提炼成属性，供开发者使用。

clientWidth、clientHeight

该属性是每一个元素都有的属性，读取到的是该元素的宽度+padding

offsetWidth、offsetHeight

该属性是每一个元素都有的属性，读取到的是该元素的宽度+padding+border

clientLeft、 clientTop

该属性是每一个元素都有的属性，读取到的是左、上边框的宽度

scrollTop

获取页面的卷动值

window.innerWidth window.innerHeight

获取窗口区域的宽度高度

获取视口的宽度高度

document.documentElement.clientWidth
document.documentElement.clientHeight

快捷位置

每一个元素都有一个属性： offsetParent 它指向定位父元素

• offsetLeft
• offsetTop

事件对象

当浏览器中的事件被触发时，会产生许许多多的信息。有时我们会需要使用到这些信息。
获取方式，就是通过事件对象。
事件对象是：浏览器在触发事件时，帮助我们收集的许多信息的集合对象。

事件对象的位置

• 高级浏览器
  • 事件函数的形参
• IE浏览器
  • window.event

event 是事件对象
altKey 表示事件触发时 键盘的alt键是否按下 false表示没有按下 true表示按下
shiftKey 表示事件触发时 键盘的shift键是否按下 false表示没有按下 true表示按下
ctrlKey 表示事件触发时 键盘的ctrl键是否按下 false表示没有按下 true表示按下
clientX 表示事件触发时 鼠标位于视口的横坐标上的值(到视口左边的距离)
clientY 表示事件触发时 鼠标位于视口的纵坐标上的值(到视口上边的距离)
offsetX 表示事件触发时 鼠标位于元素的横坐标上的值(到元素左边的距离)
offsetY 表示事件触发时 鼠标位于元素的纵坐标上的值(到元素上边的距离)
注: offsetX offsetY 会被子元素影响
pageX 表示事件触发时 鼠标位于页面的横坐标上的值(到页面左边的距离)
pageY 表示事件触发时 鼠标位于页面的纵坐标上的值(到页面上边的距离)
注：pageX pageY有兼容性问题 IE没有 可以使用clientX + scrollTop clientY + scrollLeft
target 在高级浏览器中表示触发事件的元素
srcElement 在IE浏览器中表示触发事件的元素