JavaScript中BOM与DOM解释与分析

骑猪看日落 2023-06-24 08:22 9阅读 0赞

总结下面试题

BOM和DOM这个东西是很基础的东西，Java Script的三个主要组成部分是：ECMAScript(核心)，DOM（文档对象模型），BOM（浏览器对象模型）。所以这个也是我们必须掌握的一些东西。最近vue用多了，所以回顾下。

## 什么是BOM ##

Browser Object Model 浏览器对象模型，js里面，把我们的浏览器看成是一个对象，而这个对象 叫 window ；顶级对象。就是提供一些操作浏览器的一些方法和接口。可以弹出新的浏览器窗口，关闭浏览器窗口，调整窗口大小，页面前进后退，弹出框这些。

window里面包含的对象：

*  document 文档对象模型
 *  location 专门用来处理url相关的
 *  screen 专门用来处理屏幕相关
 *  history处理历史记录的
 *  navigator userAgent 判断当前请求平台是哪一个

window里面也包含了一些方法，下面介绍下我们经常用到的一些方法。开发的时候多多少少肯定会用到的一些东西。

#### window 事件加载 ####

window.onload= function(){ } //当页面加载完毕之后才会去触发
    
    window.onsize = function(){ } //当窗口改变大小的时候触发

#### window 定时器 ####

**setInterval**  
无限循环，类似于闹钟

语法：

//返回值就是定时器的任务标示
    var timeId = setInterval(function(){ },延迟时间); 
    
    //关闭定时器
    clearInterval(timeId);

只要到了时间，就会去执行function里面的代码，只要没有关闭定时器，就会不停的去调用function里面的一些操作。

**setTimeout**  
执行一次，就是定时炸弹，炸了就没了

//返回值就是定时器的任务标示
    var timeId = setTImeout(function(){ }, 延迟时间);
    
    //关闭定时器
    clearTimeout(timeId);

只要到了时间，就会去执行function里面的操作，只执行一次。

#### window的offset、client和scroll ####

**offset**

offsetWidth | offsetHeight : 获取的是盒子的真实 宽度|高度 包含的是内容 padding border

offsetTop|offsetLeft : 获取的是偏移量， 参照的是 带有定位的最近的父辈元素，如果父辈元素都没有定位，参照的是body

offsetParent : 获取的是带有定位的父元素

**client**

clientWidth | clientHeight : 获取的是盒子大小，包含 内容 + padding

clientTop | clientLeft : 获取的是上|左 边框的大小

**scroll**

这个属性应该是我们会经常用到的，做返回顶部时。

scrollTop | scrollLeft : 获取的是 滚动出去的内容的距离

scrollWidth | scrollHeight: 获取内容真实的 宽高

//滚动到指定的位置
    window.scroll(x,y) 
    //滚动的距离
    window.scrollBy(x,y); 
    //滚动到指定的位置
    window.scrollTo(x,y);

#### 移动端 ####

**touch事件**  
touchstart 触摸开始  
touchmove 触摸移动  
touchend 触摸结束

**touchEvent事件对象**

e.targetTouches  
获取的是该元素上所有的手指对象 ,集合

e.changeTouches 删除线格式  
获取的是该元素上改变的手指对象，集合， 从无到有，从有到无

pageX|pageY  
在页面中的位置

clientX | clientY  
在可视区域的位置

screenX | screenY  
获取屏幕中的位置

target  
目标元素对象

## 什么是DOM ##

Document Object model 文档对象模型，用来获取页面元素对象，动态添加元素对象，删除元素对象事件，如何操作元素属性这些功能。对我们的HTML页面进行一些操作。

#### 获取页面元素对象 ####

1.通过id来获取

var el = document.getElementById('id名');
    //参数放的是id名字，返回的对象是一个元素对象

2.通过标签名获取

var els = document.getElementsByTagName('标签名');
    //参数放的是标签名，返回的是一个对象的集合

3.通过类名获取

var els = document.getElementsByClassName('类名');
    // 参数放的是类名，返回的是一个对象的集合

4.通过选择器来获取

var el = document.querySelector('选择器');
    //选择器是需要带符号 获取的是一个对象
    var els = document.querySelectorAll('选择器'); 
    // 这个方法返回的是一个集合

5.节点操作：获取父子节点

var parentEle = element.parentNode; 
    //这个是获取父节点
    var children = parenEle.children; 
    //获取的是子元素 
    var childNodes = parentEle.childNodes;  
    //获取所有的子节点
    var firstChild = parentEle.firstElementChild; 
    //获取第一个子元素
    var lastChild = parentEle.lastElementChild; 
    //获取最后一个子元素

6.节点操作：兄弟元素的获取

var nextSibling = element.nextElementSibling; 
    //获取下一个兄弟元素
    var preSibling = element.previousElementSibling; 
    //获取上一个兄弟元素

#### 动态添加元素 ####

1.document.write();

特点：如果页面已经加载完毕的话，再触发这个方法，会覆盖原来的页面内容  
2.element.innerHTML =

特点：元素的一个属性，需要去拼接字符串，直接赋值，会覆盖这个元素内部的内容，效率高，不方便注册事件，也不方便去浏览结构

3.var child = document.createElement();

特点：参数直接写你想创建的这个标签。 此时这个标签在内存中，还没有挂载在dom数上，所以我们需要通过一些方法去进行添加

parent.appendChild(child); 
    //追加在最后一个子孩子的位置
    parent.insertBefore(child, 参考的元素对象); 
    //parent.children[0];

#### 删除元素对象 ####

parent.removeChild(child);
    //只能父元素删除子元素

#### 操作元素属性 ####

element.innerHTML = ''; 
    //设置内容
    element.innerText = ''; 
    //设置文本内容 不识别HTML标签
    element.src = ''; 
    //设置图片标签的路径 
    element.href = '';  
    //设置的是超链接的跳转位置
    element.title = ''; 
    //设置鼠标停在元素身上的提示文本
    element.alt = '';  
    //当图片没有正常加载的时候，显示的替换文本
    
    
    //表单元素
    input.value = '';
    //设置表单元素的值
    input.type = ''; 
    //设置表单的类型
    input.checked = true|false; 
    //设置单选或者是复选框的选中状态
    input.disabled = true|false;
    //设置输入框的 是否禁用 
    
    
    // 修改元素样式 
    element.style.XXX | element.style ='';  
    //设置元素的行内样式 如果是少量属性，或者属性的值是一个变量的话
    element.className = '';  
    //设置类名 匹配相应的类样式，如果你没有申明类样式，是不会匹配相应的样式

#### 事件 ####

**事件的三要素**

*  事件源： 要触发事件的元素对象
 *  事件类型： 触发什么事件
 *  事件处理函数： 触发了这个事件。你要干嘛

**事件类型**

click  点击事件
    mouseover 鼠标移入事件
    mouseout  鼠标移出事件
    mousemove 鼠标移动的事件
    mouseenter  鼠标移入事件，不会触发事件冒泡
    mouseleave  鼠标移出事件，不会触发事件冒泡
    mousedown   鼠标按下
    mouseup     鼠标抬起
    keydown     键盘按下 
    keyup       键盘抬起
    keypress    键盘按下，功能键不识别，区分大小写 
    focus       获取焦点
    blur        失去焦点
    scroll      滚动事件
    
    window.onload   当页面所有内容都加载完毕的时候调用 
    DOM: DOMContentLoaded  DOM树 加载完毕的时候调用 
    resize      窗口改变大小的时候触发
    pageshow    页面元素显示的时候触发
    
    移动端事件：
    touchstart  触摸开始
    touchmove   触摸滑动 
    touchend    触摸结束
    
    contextmenu  上下文菜单事件
    selectstart  文本被选中的时候触发

**事件流**  
一个事件触发的过程。那么有三个阶段

*  捕获阶段 ： 从外到内，一层一层进行传递
 *  目标阶段： 目标元素，执行目标元素的事件
 *  冒泡阶段： 从内到外，一层一层往外传递

**代码绑定事件**

element.onclick = function(){ } 
    //获取的是冒泡阶段
    element.addEventListener('click',function(){ }，true|false);
    //第三个参数可以省略，默认是false，代表是事件冒泡，如果是true，代表是事件的捕获

**代码解绑事件**

element.onclick = null;
    element.removeEventListener('click',要移除的事件函数);

**事件委托**  
核心原理用的是：事件冒泡，本来应该给子元素去设置的事件，我给父元素来设置，通过事件冒泡传递到父元素的事件，通过事件对象 .e.target 可以获取到目标元素

**事件对象**

element.onclick = function(e){ 
        //e 就是底层给我们传递过来的事件对象
        e.target //目标元素
        e.type //事件类型
        e.pageX | pageY  //获取的是鼠标在页面中的位置
        e.clientX |clientY //获取的是鼠标在可视区域的位置
        e.screenX |screenY  //获取的是在屏幕中的位置
        e.stopPropagation();//组织事件冒泡
        e.preventDefault(); //阻止默认行为 也可以用 return false； 只能在传统事件注册里面用
    }

## 总结 ##

BOM对象主要是对浏览器相关属性进行操作，在js中对应的顶级对象为window。这个的话可能会因为浏览器的不同，然后会有点差别，这点需要注意下。

DOM对象是一种接口，用来操作文档的内容，在js中实现后对应的顶级对象document。它的话是W3C的标准，所有的浏览器都必须遵循的标准。也是我们前端最基础的部分。

个人水平有限，肯定还有很多知识点没有整理到的，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！