2020前端⾯试（⼗⼀）-DOM和BOM相关
⽂章⽬录
⼀. DOM
1.DOM是什么：
DOM（Document Object Model）⽂档对象模型，是处理可扩展标志语⾔的标准编程接⼝。
DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
2.DOM0级和DOM2级有什么区别：
DOM0级中为某个dom元素绑定多个事件时，只有最后⼀个事件有效。onclick
DOM2级中可以为单个元素绑定多个事件，每个事件都可以被触发。addEventListener
textContent⽤来获取和设置⽂本内容，与innerText的差别是:textContent获取到的内容包括了元素中的style标签和script标签的内容。
innerText只能获取和设置⽂本内容，不能获取和设置html代码
innerHTML可以获取和设置html代码
value获取的是表单元素的值
4.关于dom的api有什么：
节点创建型api：
document,createTextNode()
parent.cloneNode(true)
页⾯修改型API：
parent.appendChild(child)
parent.insertBefore(newNode,referenceNode) 将新元素添加到⽗元素中指定的⼦元素前⾯
节点查询型API：
document.querySelector() 获取匹配到的第⼀个元素，采⽤的是深度优先搜索。
docuemnt.querySelectorAll()
返回的是⼀个⾮即时的NodeList，也就是说结果不会随着⽂档树的变化⽽变化
节点关系型api：
⽗关系型：
node.parentNode()
兄弟关系型
node.previouSibling() 返回节点的前⼀个节点（包括元素节点，⽂本节点，注释节点）
node.previousElementSibling() 返回前⼀个元素节点
mousemove是什么键
⼦关系型
parent.childNodes() 返回⼀个即时的NodeList，包括了⽂本节点和注释节点
parent.children() ⼀个即时的HTMLCollection，⼦节点都是Element
parent.firsrtNode()
parent.lastNode()
hasChildNodes()
元素属性型api：
element.setAttribute(“name”,“value”) 为元素添加属性
元素样式型api：
5.什么是事件监听:
addEventListener()⽅法，⽤于向指定元素添加事件句柄，它可以更简单的控制事件，语法为
element.addEventListener(event, function, useCapture);
第⼀个参数是事件的类型(如 “click” 或 “mousedown”).
第⼆个参数是事件触发后调⽤的函数。
第三个参数是个布尔值⽤于描述事件是冒泡还是捕获。该参数是可选的。
事件传递有两种⽅式，冒泡和捕获
事件传递定义了元素事件触发的顺序，如果你将P元素插⼊到div元素中，⽤户点击P元素，
在冒泡中，内部元素先被触发，然后再触发外部元素，
捕获中，外部元素先被触发，在触发内部元素，
6.说说前端中的事件流
什么叫Dom事件流？
事件发⽣时会在元素节点之间按照特定的顺序传播，整个过程分为捕获阶段，⽬标阶段和冒泡阶段，这个传播过程叫做Dom事件流。
事件冒泡：从事件源逐级向上传播到DOM最顶层节点的过程。
事件捕获：从DOM最顶层节点逐级向下传播到事件源的过程。
addEventListener⽤于指定事件处理程序，共接收三个参数。分别是触发事件，事件处理程序函数以及⼀个布尔值。第三个参数默认为false，表⽰在该事件的处理函数会在冒泡阶段被调⽤。若改为true，则表⽰事件处理函数会在捕获阶段被调⽤。
IE只⽀持事件冒泡。
7.如何让事件先冒泡后捕获
原本的事件流中，是先捕获再冒泡。
对于⽬标元素来说，如果DOM节点通过addEventListener同时绑定了两个事件监听函数，⼀个⽤于捕获，⼀个⽤于冒泡，那么两个事件的执⾏顺序是按照代码添加的顺序执⾏的。所以，先绑定冒泡的函数，再绑定捕获的函数，即可实现。
对于⾮⽬标元素来说，可以给捕获事件的处理程序添加⼀个定时器，将处理程序推⼊下⼀个宏任务执⾏。
8.说⼀下事件代理：
事件委托是指 不在⼦节点单独设置事件，⽽将事件设置在⽗节点上，再利⽤冒泡原理使每⼀个⼦节点都能触发该事件。
事件委托的优点：只操作⼀次Dom，提⾼了程序的性能。
常⽤于
ul和li标签的事件监听，⼀般采⽤事件委托机制将事件绑定在ul上。
还适合动态元素的绑定，新添加的⼦元素不需单独添加事件处理程序。
（1）了解事件代理吗，这样做有什么好处
事件代理/事件委托：利⽤了事件冒泡，只指定⼀个事件处理程序，就可以管理某⼀类型的事件，
简⽽⾔之：事件代理就是说我们将事件添加到本来要添加的事件的⽗节点，将事件委托给⽗节点来触
发处理函数，这通常会使⽤在⼤量的同级元素需要添加同⼀类事件的时候，⽐如⼀个动态的⾮常多的列表，需要为每个列表项都添加点击事件，这时就可以使⽤事件代理，通过判断deName来判断发⽣的具体元素，这样做的好处是减少事件绑定，同事动态的DOM结构任然可以监听，事件代理发⽣在冒泡阶段
（2）事件委托以及冒泡原理:
事件委托是利⽤冒泡阶段的运⾏机制来实现的，就是把⼀个元素响应事件的函数委托到另⼀个元素，⼀般是把⼀组元素的事件委托到他的⽗元素上。
委托的优点是减少内存消耗，节约效率
动态绑定事件
事件冒泡，就是元素⾃⾝的事件被触发后，如果⽗元素有相同的事件，如onclick事件，那么元素本⾝的触发状态就会传递，也就是冒到⽗元素，⽗元素的相同事件也会⼀级⼀级根据嵌套关系向外触发，直到document/window，冒泡过程结束。
（3）事件代理在捕获阶段的实际应⽤：
可以在⽗元素层⾯阻⽌事件向⼦元素传播，也可代替⼦元素执⾏某些操作。
9.事件类型相关：
（1）mouseover和mouseenter的区别
mouseover：当⿏标移⼊元素或其⼦元素都会触发事件，所以有⼀个重复触发，冒泡的过程。对应的移出事件是mouseout。mouseenter：⿏标移⼊⼦元素时不会再次触发mouseenter事件，对应的移出事件是mouseleave。
（2）三种键盘事件的区别：
keyup: 松开键盘触发
keydown：按下键盘触发
keypress：不能识别功能键，⽐如ctrl,alt,shift，左右箭头。可以区分⼤⼩写。
在输⼊框中按下⼀个键的全过程：触发keydown/keypress事件->⽂字键⼊输⼊框中->触发keyup事件
按下按键后⾃动对焦输⼊框，应该使⽤keyup，不应该使⽤keydown/keypress，因为后者会使按键落⼊输⼊框中，对于回车键的话还不能使⽤keypress。
10.静态绑定事件与动态绑定事件的区别：
静态绑定事件是指直接在Html标签上通过οnclick="hide()"来绑定事件。
缺点：
html和js⽂件存在耦合，不符合结构和⾏为分离的原则。
可能存在引发错误，如果js代码还没加载就触发该事件则会抛出错误
动态绑定事件是指通过js动态绑定事件，lick() element.addEventListener()。
11.元素的位置和⼤⼩-三⼤系列
① offset系列：
offsetTop（获取元素位置）: 相对于带有‘定位’的⽗元素的偏移量
offsetHeight: content+padding+border
offsetParent: 返回带有定位的⽗元素
② cilent系列：
clientTop: 上边框border-top的宽度
clientHeight(获取元素宽⾼): content+padding，不包含border。
③ scroll系列：
scrollTop（获取滚动的距离）: 向下滚动后，上⾯被卷去的距离，即隐藏的⾼度。
scrollHeight: content+padding ，其中的content包含了因为滚动被隐藏的部分。
④ document.clientWidth与document.style.width的区别：
区别1：前者可以获取任意样式表中的width样式值，包括⾏内样式的，内嵌样式的，外部样式的；后者只能获取⾏内的样式。
区别2：clientWidth获取的是数字型的，style获取的带有px后缀
区别3：clientWidth包含了padding,⽽style.width只包含content。
区别4：clientWidth是只读属性，所以⼀般⽤于获取元素的⼤⼩；⽽style.width是可读可写的，可⽤于获取，也可⽤于修改。
⑤特殊：
**获取html元素：**document.documentElement
**获取body元素：**document.body
获取可视区域的宽⾼：
window.innerWeight 获取的宽度包括纵向滚动条的宽度。
document.documentElement.clientWidth 获取的是正宗的可视区域的宽度
**document.body.clientWidth ** 获取的是body的宽度，即content+padding。
获取window向下滚动时被卷去的⾼度： window.pageYOffset (注意：不能使⽤window.scrollTop)
⑥判断⼀个元素是否已经出现在了可视区域：(此问题可应⽤在懒加载中)
⽅法⼀：计算⽐较⿇烦
需满⾜条件： xxx.offsetTop（需要递归叠加获取）<= window.pageYOffset+document.documentElement.clientHeight
即该元素距页⾯顶端的距离 <= window向下滚动隐藏的距离+window的可视区域的⾼度。
⽅法⼆：使⽤BoundingClientRect().top获取在可视区的位置。
window.addEventListener("scroll",function(){
let viewPortHeight = window.pageYOffset;
let offset = BoundingClientRect().top;
if(offset < viewPortHeight){
if(offset + box2.offsetHeight <0){
console.log("他⾛了");
}else{
console.log("他来啦他来啦");
}
}
});
12.⿏标坐标
clientX,clientY: ⿏标在可视区的坐标，可视区即展⽰在⽤户⾯前的页⾯区域
pageX,pageY: ⿏标在整个html页⾯的坐标。⼀般实际应⽤使⽤pageX和pageY
screenX,screenY: ⿏标在电脑屏幕的坐标，即整个电脑屏幕，15⼨这个s
13.js拖动及拖拽功能的实现
（1）拖动功能的实现：
前置条件：
1.拖动事件的三个过程：⿏标按下mousedown,⿏标移动mousemove,⿏标松开mouseup
⿏标按下后执⾏mousemove事件。
2.盒⼦采⽤绝对定位，通过left和top属性来修改位置。
⽅法⼀：（直接根据⿏标移动的距离确定元素移动的距离）
⿏标的坐标通过clientX,clientY获取：
盒⼦的定位信息：⿏标移动时候的坐标-⿏标按下去时候的坐标+元素初始情况下的offetLeft.
⽅法⼆：
⿏标的坐标通过pageX,pageY获取：
先计算⿏标在盒⼦中的坐标，这是不变的。然后在mousemove的时候通过pageX和pageY减去在盒⼦中的坐标计算出盒⼦边缘应该修改为的偏移量。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。