前端重点知识梳理—DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。 通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。DOM 通过创建树来表示文档，从而使开发者对文档的内容和结构进行操作。

1. js怎样添加、移除、移动、复制、创建和查找节点?

1)创建新节点

1. createDocumentFragment() //创建一个DOM片段
2. createElement() //创建一个具体的元素
3. createTextNode() //创建一个文本节点

2)添加、移除、替换、插入

1. appendChild() //添加
2. removeChild() //移除
3. replaceChild() //替换
4. insertBefore() //插入

3)查找

1. getElementsByTagName() //通过标签名称
2. getElementsByName() //通过元素的Name属性的值
3. getElementById() //通过元素Id，唯一性
4. getElementsByClassName() //通过class类名称(IE9及以上版本才兼容)
5. querySelector()  //获取某个元素（IE8及以上）
6. querySelectorAll() //获取所有相同元素（IE8及以上）

2.DOM位置及尺寸获取有哪些方法，各自区别

1. clientHeight/clientWidth：可视区尺寸（内容的可见尺寸），不包含border和滚动条。
2. offsetHeight/offsetWidth：可视区高度（对象的可见尺寸），包含border和滚动条。
3. scrollHeight/scrollWidth：元素完整尺寸，包含了因滚动被隐藏的部分。
4. clientTop/clientLeft：边框border尺寸，未指定情况为0。
5. scrollLeft/scrollTop：已滚动尺寸。计算已经滚动到元素的左边界或上边界的像素数。
6. offsetLeft/offsetTop：当前元素距浏览器边界的偏移量，以像素为单位。

3.window.onload和DOMContentLoaded的区别

1. 当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash，iframe都已经加载完成了。
2. 当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash，iframe。

本文固定连接：https://code.zuifengyun.com/2016/06/1784.html，转载须征得作者授权。