Menu

前端重点知识梳理—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,转载须征得作者授权。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏支持