DOM与BOM
1.DOM
DOM(Document Object Model)文档对象模型,是W3C组织规定的用来操作页面的各种API。前面我们所学习的所有和页面相关的操作都是DOM规定的。
节点类型
-
childNodes
获取一个元素的所有子节点……
-
节点类型
DOM包含了多种节点,我们通常获取的标签,只是节点中的一种:
节点名称 | nodeType |
---|---|
元素节点 | 1 |
属性节点 | 2 |
文本节点 | 3 |
CDATA节点 | 4 |
实体引用名称节点 | 5 |
实体名称节点 | 6 |
处理指令节点 | 7 |
注释节点 | 8 |
文档节点 | 9 |
文档类型节点 | 10 |
文档片段节点 | 11 |
DTD声明节点 | 12 |
重点理解前三种节点。
每个节点有nodeName
属性,文本节点和属性节点的nodeValue
属性。
-
常见的节点获取API
常用:children parentNode offsetParent
不常用:firstElementChild / firstChild lastElementChild / lastChild nextElementSibling / nextSibling previousElementSibling / previouSibling
创建、添加、删除节点
-
创建节点
createElement 创建一个元素节点;
createTextNode 创建一个文本节点;
createDocumentFragment 创建一个文档碎片,先将多个节点整合到这里面再统一添加。
-
添加节点
appendChild 元素最后添加一个子节点;
insertBefore 在元素某个子节点之前添加新子节点,第一个参数为新节点,第二个参数为已存在的子节点。
-
替换节点
replaceChild 用新节点替换某个子节点,第一个参数为新节点,第二个参数为已存在的某个子节点。
-
删除节点
removeChild 删除元素的某个子节点。
2.BOM
BOM(Browser Object Model)浏览器对象模型,提供了一些和浏览或窗口相关的操作。我们学过的弹窗、日志、定时器就属于BOM的一部分。
重要事件
-
onresize
宽口大小发生改变的时候触发。
-
onscroll
页面滚动的时候触发,也可以用于某个元素节点上。
-
onfocus onblur
进入页面和离开页面时触发,也可以用于其他能获得焦点的元素节点上。
open() close()
重要对象
-
location
获取/设置 URL相关的属性。
-
history
操作当前标签页的历史,类似于点击浏览器地址栏左侧的前进和后退按钮。
history.go(number)
– 前进或后退指定的页面数。history.back()
– 后退一页。history.forward()
– 前进一页。 -
navigator
获取浏览器相关的信息。
-
Screen
获取用户显示屏幕的各种信息。
.width .height
获取显示器分辨率。.availWidth .availHeight
获取除去任务栏的大小。
3.各种尺寸获取
可视区宽高
-
窗口宽高
window.innerWidth window.innerHeight
包含了滚动条的宽度和浏览器本身的边框宽度(低版本IE不支持)。
-
内容区宽高
document.documentElement.clientWidth
document.documentElement.clientHeight
不包含滚动条等。
元素的各种宽高
-
client
clientWidth clientHeight
宽(高)+padding。
-
offset
offsetWidth offssetHeight
宽(高)+padding+border。
-
scroll
scrollWidth / scrollHeigh
内容的实际高度,当内容没超出相当于client,当内容超出之后,会得到包括超出内容的实际高度,即使加了超出隐藏,也还是会得到内容所占的实际高度。
元素的各种距离
-
offset
offsetLeft offsetTop
获取左边(上边),到定位父级的左边(上边)的距离。
-
getBoundingClientRect
返回一个对象,包含了元素各边到窗口的距离,返回的结构类似于:{top:100,left:20,bottom:500,right:890}。
滚动距离
-
页面滚动宽高
doucment.documentElement.scrollTop
document.documentElement.scrollLeft
页面的滚动宽(高)。此属性可以赋值,能让页面滚动到指定的位置。
设置滚动距离也可以使用
window.scrollTo()
。 -
元素滚动宽高
元素节点.scrollTop 元素节点.scrollLeft