重温javascript --（五）可能你不知道的DOM和BOM对象简述

新茶十九

已于 2024-05-07 08:12:54 修改

阅读量1k

点赞数 40

分类专栏： # 重学js 文章标签：前端 javascript

于 2024-05-06 14:28:33 首次发布

本文链接：https://blog.csdn.net/qq_35940731/article/details/138492882

版权

重学js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了DOM文档对象模型的基础概念、选择器、节点类型、继承树、节点操作、窗口属性获取、DOM尺寸处理、事件绑定与处理、异步加载、JavaScript时间线以及BOM中的location、navigator和history对象。

摘要由CSDN通过智能技术生成

DOM (Document Object Model 文档对象模型)

一、介绍

1. dom 选择器，节点类型

document 表示整个文档
1. .getElementById()
2. .getElementsByTagName() 类数组
3. .getElementsByClassName() 类数组
4. .querySelector() 类数组
5. .querySelectorAll() 类数组
节点类型
1. 元素节点 1
2. 属性节点 2
3. 文本节点 3
4. 注释节点 8
5. document 9
6. DocumentFragment 11

2. dom 继承树，dom 基本操作

dom 继承树
document -> HTMLDocument{ __propto__: Document.prototype} -> Document.prototype

Node

    Doucument 
    	- HTMLDocument 
	  		- Element
		    	- HTMLElement
		    	-	- HTMLHeadElementHTMLBodyElement，
		    	-	- HTMLHeadElement
		    	-	- HTMLTitleElement，...etc 
	     - CharacterData 
	    	- Text 
	    	- Comment

dom 基本操作
1. 查
  1. 遍历节点树
    1. parentNode
    2. childNodes 子节点
    3. firstNode
    4. lastNode
    5. nextSibling 后一个兄弟节点
    6. previousSibling 前一个兄弟节点
  2. 遍历元素节点树
    1. parentElement 返回当前元素的元素父节点
    2. children 只返回当前元素的元素子节点
    3. node.childElementCount === node.children.length 元素子节点个数
    4. firstElementChild
    5. lastElementChild 返回最后一个元素节点
    6. nextElementSibling /previousElementSibling 兄弟元素节点
  3. 节点属性
    1. nodeName 只读，节点名称
    2. nodeValue 节点值,可更改¹
    3. nodeType 节点类型，只读
    4. attributes 属性节点集合
  4. 节点方法 Node.hasChildNodes() 是否有子节点
2. 增
  1. document.createElement() 增加元素节点
  2. document.createTextNode() 增加文本节点
  3. document.createComment() 增加注释节点
  4. document.createDocumentFragment() 增加元素碎片节点
3. 插
  
  任何一个元素节点都有 appendChild 方法
  1. .appendChild() 类似于剪切, 插入节点内容
  2. PARENTNODE.insertBefore(a,b) 增加元素节点 ²，在 b 前插入 a
4. 删
  1. parent.removeChild() 增加元素节点 ³
  2. child.remove() 增加元素节点 ⁴
5. 替换
  1. parent.replaceChild(new, origin) 新的替换老的元素
element 属性
1. innerHTML 元素节点内添加内容
2. innerText(火狐不兼容)/ textContent(老版本 IE 不好使)
element 方法
1. ele.setAttribute('class', 'demo')
  - ele.className 可以直接改节点 class
2. ele.getAttribute()

3. 获取窗口属性，获取 `dom` 尺寸

滚动宽高

window.pageXOffset\ window.pageYOffset (ie9 及以上)
(IE8 及以下)⁵
document.body.scrollLeft\scrollTop
document.documentElement.scrollLeft\scrollTop ⁶

 //  获取屏幕滚动的距离
function getScrollOffest() {
if (window.pageXOffset) {
 return {
   x: window.pageXOffset,
   y: window.pageYOffset
 }
} else {
 return {
   x: document.body.offsetWidth + document.documentElement.offsetWidth,
   y: document.body.offsetHeight + document.documentElement.offsetHeight,
 }
}
}

获取可视宽高

window.innerWidth\innerHeight
(IE8 及以下)
document.body.clientWidth\clientHeight // 怪异模式 ⁷
document.documentElement.clientWidth\clientHeight // 标准模式

function getViewportOffset() {
	if (window.innerWidth) {
		return {
		width: window.innerWidth,
		height: window.innerHeight
		}
	} else {
		if (document.compatMode === 'BackCompat') {
			return {
			  width: document.body.clientWidth,
			  height: document.body.clientHeight
			}
		} else {
			return {
			  width: document.documentElement.clientWidth,
			  height: document.documentElement.clientHeight
			}
		}
	}
}

查看元素的几何尺寸
1. dom.getBoundingClientRect()
  1. 返回一个对象,对象中有left,top,right,bottom等属性;left,top表示左上角的 x 坐标和 y 坐标,right,bottom表示右下角的 x 坐标和 y 坐标;
  2. height和width属性老版本 IE 并未实现
  3. 返回的结果并不是实时的
2. - 查看元素尺寸
    dom.offestWidth\offestHeight
  - 查看元素位置
    dom.offestLeft\offestTop // 无定位父级，返回相对文档的坐标；有定位父级，返回相对于有定位父级的坐标
    dom.offestParent // 返回最近的有定位的父级
滚动条滚动
window.scroll(x,y)\scrollTo(x,y) // 滚动到指定位置
window.scrollBy(x,y) // 滚动累加

4. 脚本 css

dom.style[prop] 可获取，可修改，获取内联样式
window.getComputedStyle(div, null) 获取可视样式只能获取（IE8 及以下不适用） null 获取伪元素

二、事件

1. 事件绑定

1. dom.onclick = function(){}; this 指向自己
2. dom.onclick = null; // 取消事件
1. dom.addEventListener('click', function(){}, false) this 指向自己 (IE9 及以上)
2. dom.removeEventListener('click', function(){}, false) 取消事件

// 绑定事件
function addEvent(elem, e, func, i) {
  var i = i || false;
  if (elem.addEventListener) {
    return elem.addEventListener(e, func, i)
  } else {
    return elem.attachEvent(e, func)
  }
}
// 取消事件
function removeEvent(elem, e, func, i) {
  var i = i || false;
  if (elem.addEventListener) {
    return elem.removeEventListener(e, func, i)
  } else {
    return elem.detachEvent(e, func)
  }
}

1. dom.attachEvent('onclick', fun()) this 指向 window (IE 独有)
2. dom.detachEvent('onclick', fun())

2. 事件处理模型

事件冒泡（自底至上）
事件捕获（自顶向下） IE 没有

dom.addEventListener('click', function(){}, true)
true 开启捕获
执行顺序，先捕获，后冒泡
focus, blur, change, submit, reset, select 等事件不冒泡

3. 取消冒泡和阻止默认事件

取消冒泡

e.stopPropagation() IE9 以下版本不支持
e.cancelBubble = true IE 独有 google 也有

function stopBubble(e) {
  var e = e || window.event;
  if (e.stopPropagation) {
    return e.stopPropagation
  } else {
    return e.cancelBubble = true
  }
}

阻止默认事件
1. return false; 以对象的属性注册的事件才生效
2. e.preventDefault(); W3C ie9 一下不兼容
3. e.returnValue = false; 兼容 IE
事件对象
1. event || window.event（IE）
2. 事件源对象
  event.target 火狐只有这个
  event.srcElement IE 只有这个
  chrome 都有
事件委托
利用事件冒泡和事件源对象进行处理

// 事件源
var ul = document.getElementByTagName('ul')[0];
ul.onclick = function(e){
   var event = e || window.event,
      target = event.target || event.srcElement;
      console.log(target.innerText)
}

4. 事件方法

鼠标事件
1. oncontextmenu 鼠标右击事件
2. onmousemove onmouseup
  e.button === 2 鼠标右键
  e.button === 1 鼠标左键
键盘事件⁸
1. keydown 当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件；
2. keypress 当用户按下键盘上的字符键时触发，如果按住不放的话，会重复触发此事件；
3. keyup 松开按键
  keydown 和 keypress 区别：
- keydown 内没有 charCode; keypress 有 charCode,返回 ASCII 码，转换成相应的字符
  
  String.fromCharCode() // 根据 ASCII 码转换成字符
文本类事件
…etc

5. json，异步加载，时间线

json

JSON.stringify(); JSON.parse()

{
   "name":'aa'
}

6. 异步加载

async
- 用于异步下载脚本文件。
- 当脚本文件下载完成后，会立即执行该脚本，而不会等待整个文档解析完成
- 如果有多个带有async属性的脚本，它们可能会按照它们到达的顺序开始下载，但执行顺序是不确定的。
- async属性只适用于外部脚本（即src属性指定的脚本）
defer
- defer 属性用于开启新的线程下载脚本文件，但脚本的执行会延迟到整个文档解析完成后进行。
- 与async不同的是，多个带有defer属性的脚本会按照它们在HTML文档中出现的顺序依次执行。
- defer属性也只适用于外部脚本。
```
<script src="script.js" defer></script>
```
示例：

// 异步加载 
function loadScript(url, prop) {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  if (script.onload) {
    script.onload = function () {
      tools[prop]
    }
  } else { // IE
    script.onreadystatechange = function () {
      if (script.readyState === '' || script.readyState === 'loaded') {
        tools[prop]
      }
    }
  }
  script.src = url;
  document.head.appendChild(script);
}

三、时间线

js 时间线
1. 创建 Document 对象，开始解析 web 页面；document.readyState = 'loading';
2. link 遇到 css,创建线程加载，继续解析文档
3. script 外部 js，无设置 async、defer，浏览器加载，并阻塞，解析完脚本，继续解析文档
4. script 外部 js，设置 async、defer，浏览器创建加载，继续解析文档
  
  async,脚本加载完立即执行;defer,解析完文档执行
  异步禁止使用 document.write()
5. img 正常解析 dom 结构，异步加载 src，并继续解析文档
6. 文档解析完，document.readyState = 'interactive'
7. 文档解析完，所有设置defer的脚本会按照顺序执行
8. document 对象触发DOMContentLoaded事件,标志解析完后，可以监听事件
9. 当所有async脚本加载并执行后,img 等加载完后，document.readyState = 'loaded'
10. 从此，以异步响应方式处理用户输入、网络事件等
window.onload dom 解析并加载完

readyState 参数：
DOMContentLoaded 文档解析完

 document.addEventListener('DOMContentLoaded', function(){

})

BOM （Browser Object Model）浏览器对象

一、location 对象： location是window对象的一个属性, 包含有关当前 URL 的信息

location.search() // 获取url参数，get
location.assign() // 跳转记录浏览历史，可实现后退
location.replace() //跳转不记录浏览历史，不可实现后退
location.reload(true) //重新加载， true 强制刷新

二、 navigator 对象：包含有关浏览器的信息

三、 history 对象：对象包含用户（在浏览器窗口中）访问过的 UR

文本节点，注释节点才有 ↩︎
必须父级调用，insert a before b ↩︎
剪切出来子标签 ↩︎
销毁自身 ↩︎
由于兼容性混乱，两者同时使用 ↩︎
document.documentElement 指 html ↩︎
document.compatMode 返回兼容模式 CSS1Compat 标准; BackCompat 怪异模式 ↩︎
which 返回监测键盘键码 ↩︎