BOM与DOM基础知识

一生只爱婉儿

已于 2022-05-03 11:08:22 修改

阅读量395

点赞数

分类专栏：知识点文章标签：前端 html

于 2022-05-03 10:30:07 首次发布

本文链接：https://blog.csdn.net/Victor20190424/article/details/124551135

版权

知识点专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、初识DOM

DOM——Document Object Model
DOM定义了表示和修改文档所需的方法。DOM对象即宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口

2、常用方法

查
- 查看元素节点
  - document代表整个文档，包含所有的标签元素
  - document.getElementById() //根据元素id获取元素
  - document.getElementsByTagName() //根据标签名获取元素（常用）
  - document.getElementsByClassName() //根据类名获取元素（常用）
  - document.getElementsByName() //根据name属性获取元素
- 节点（节点不仅仅包含元素节点，还可以是空格之类的，元素节点即标签）
  - parentNode：父节点（最顶端的parentNode为#document）
  - childNodes：子节点们
  - firstChild：第一个子节点
  - lastChild：最后一个子节点
  - nextSibing：后一个兄弟节点
  - previousSibing：前一个兄弟节点
- 元素节点（元素节点即标签，更常用）
  - parentElement：返回父元素节点
  - children：返回所有的子元素节点
  - childElementCount：元素子节点的个数
  - firstElementChild：第一个元素子节点
  - lastElementChild：最后一个元素子节点
  - nextElementSibing：下一个兄弟元素节点
  - previousElementSibing：前一个兄弟元素节点
- 节点的4个属性
  - nodeName：元素的标签名，只读
  - nodeValue：Text节点或Comment节点的文本内容，可读写
  - nodeType：该节点的类型，可读写（重要）
    - 节点类型有：1-元素节点、2-属性节点、3-文本节点、8-注释节点、9-document、11-DocumentFragment
  - attributes：Element节点的属性结合
- 节点的一个方法
  - node.hasChildNodes()：是否有子节点（任何节点都可以，但凡有个空格、回车都返回true，只有前后标签紧贴一起才返回false）
- 增
  - document.createElement()：创建元素节点（常用）
  - document.createTextNode()：创建文本节点
  - document.createComment()：创建注释节点
  - document.createDocumentFragment();
- 插（插入后变为自己的子元素）
  - parentNODE.appendChild(node)：只能传一个节点，且不直接支持传字符串
  - parentNODE.append(node)：可以同时传入多个节点或字符串，没有返回值
  - parentNODE.insertBefore(a,b)：insert a before b，把a插入到a的子节点b的前面
- 删
  - parentNODE.removeChild()：删除子节点（有返回值）
  - NODE.remove()：自己删除自己（无返回值）
- 替换
  - parentNODE.replaceChild(new,origin)：用new节点替换origin节点，返回origin节点
- Element节点常用的属性
  - innerHTML：标签中的内容，可读可写（包括标签、文本内容等）（赋值会覆盖所有内容）
  - innerText：标签中的文本内容，可读可写（仅限文本）（赋值会覆盖所有内容，包括标签等）
- Element节点的常用方法
  - ele.setAttribute('属性名','属性值')：设置标签的属性名、属性值
  - ele.getAttribute('属性名')：通过标签的属性名来获取属性值

3、Date 对象

测试程序执行效率：
var firstTime = new Date().getTime();
for(var i = 0;i < 100000000;i++){}
var lastTime = new Date().getTime();
console.log(lastTime - firstTime);

4、获取窗口属性，获取dom尺寸

查看滚动条的滚动距离
- window.pageXOffset/pageYOffset（W3Cschool标准方法，ie8以及以下不适用）
- document.body/documentElement.scrollLeft/scrollTop（适用于ie8以及以下的浏览器，document.body、documentElement只有1个好使）

查看可视区窗口的尺寸
- window.innerWidth/innerHeight（W3Cschool标准方法，ie8以及以下不适用）
- document.documentElement.clientWidth/clientHeight（标准模式下，任意浏览器都兼容）
- document.body.clientWidth/clientHeight（适用于怪异模式下的浏览器）

查看元素的几何尺寸
- dom.getBoundingClientRect()：返回一个对象，对象中包含6个属性
- dom.offsetWidth：元素的宽（视觉上的尺寸，包含边框）
- dom.offsetHeight：元素的高（视觉上的尺寸，包含边框）

关于怪异模式/混杂模式
1、ie浏览器中，有些方法只有老版本的ie才支持，怎么退回老版本的浏览器呢？启动怪异模式/混杂模式即可。
2、启动方式十分简单，只需要删除第1行的 <!DOCTYPE html>即可，启动后方可向下兼容。
3、控制台输入document.compatMode可以查看模式，如显示：CSS1Compat则是标准模式，BackCompat则是怪异模式

查看元素的位置（相对于有定位的父元素的位置）
- dom.offsetLeft：左边距、dom.offsetTop：上边距
  - 对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标
- dom.offsetParent：返回最近的有定位的父级

让滚动条滚动
- window.scoll(x,y)、window.crollTo(x,y)：让滚动条滚动到指定距离
- window.scollBy(x,y)：让滚动条滚动指定距离（多次执行则累加滚动）

如何通过DOM操作改变CSS？

<div style="width: 100px;height: 100px;background-color: red;"></div>
<script>
    var div = document.getElementsByTagName('div')[0];
</script>

1、在控制台输入div.style，会返回一个CSSStyleDeclaration对象，对象中包含了各种style的属性，
所以我们可以通过div.style.width = '100px'来改变CSS样式
2、JavaScript中变量、属性等命名规则没有“-”，但CSS中的属性可能包含“-”，例如background-color，
但凡这种的变为小驼峰形式，即：backgroundColor
3、div.style返回的CSSStyleDeclaration对象展示的是写在标签内的行间样式表，不一定是最终的样式

4、事件处理

事件处理模型——事件冒泡、捕获
- 事件冒泡：
  - 结构上（非视觉上）嵌套的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
    - focus、blur、change、submit、reset、select等事件不冒泡
- 事件捕获：
  - 结构上（非视觉上）嵌套的元素，会存在事件捕获的功能，即同一事件，自父元素捕捉至子元素（事件源元素）。（自顶向下）
  - IE没有捕捉事件
  - 开启捕捉模式：将addEventListener中最后的参数改为true（需要设置在父级上）
- 触发顺序：先捕捉，后冒泡

取消冒泡
- W3C标准event.stopPropagation(); IE9以下不支持

阻止默认事件的发生
- 默认事件：表单提交、a标签跳转、右键菜单等
  - return false：以对象属性的方式注册的事件才生效
  - event.preventDefault()：W3C标注，IE9以下不兼容
  - event.returnValue = false：兼容IE

阻止右键菜单的3种方式：
document.oncontextmenu = function () {
    return false;
}

document.oncontextmenu = function (e) {
    e.preventDefault();
}

document.oncontextmenu = function (e) {
    e.returnValue = false;
}

阻止<a>标签跳转的2种方式：
a.onclick = function(){
    return false;
}

<a href="javascript:void(false)" >点我</a>

事件委托
- 利用事件冒泡原理，通过父元素对事件源对象进行处理
- 优点：
  - 性能好，不需要循环绑定子元素事件处理函数
  - 灵活，当有新的子元素出现无需重新绑定

事件分类
- 鼠标事件
  - click：鼠标点击事件
    - DOM3标准规定：click事件只能监听左键，只能通过mousedown、mouseup来判断
  - mousedown：鼠标按下
  - mouseup：鼠标抬起
  - mousemove：鼠标移动
  - contextmenu：右键显示菜单
  - mouseenter、mouseover：鼠标进入区域
  - mouseleave、mouseout：鼠标离开区域
- 用button来区分鼠标的按键：0/1/2
  - 能区分左右键的只有mousedown、mouseup中的e.button属性

键盘事件
- keyup：检测按键抬起
  - 按下按键的触发顺序1 → 2 → 3
  - 按住不放的时候，1和2会反复触发
- keypress：检测ASK表中的字符被输出
- keydown：检测按键按下（键盘上除fn所有的按键）

keydown和keypress十分相似，通常是keydown先触发keypress后触发
1、keypress的事件对象中有charCode，keydown中没有
2、上、下、左、右、Crl、Shift等控制类按键没有keypress

总结：
1、keydown能监测到所有的键盘按键（辅助键fn除外），keypress只能检测到字符类按键（ASK表中有的）
2、keydown中的keyCode、which属性可以判断按下的是键盘上的哪个键，keypress的charCode、keyCode、which属性可以判断输入的是什么字符

一个String的静态方法：
document.onkeypress = function (e) {
    console.log(String.fromCharCode(e.charCode));  //可以打印键盘输入的字符
}

- 其他事件
  - oninput：在 <input> 或 <textarea> 元素的值发生改变时触发
  - onchange：如果聚焦时、失去焦点时的value有变化则触发
    - 支持该事件的 HTML 标签：<input type="text">, <select>, <textarea>
    - 支持该事件的 JavaScript 对象：fileUpload, select, text, textarea
  - onfocus：在对象获得焦点时发生
  - onblur：在对象失去焦点时触发
  - onscroll：滚动条滚动的时候触发（window上的事件）
  - onload：当页面加载或者图片加载完成后触发该事件