JS一些基础面试题
1. 请解释DOM树中的文档、元素、节点
文档：document
元素：element
节点：Node
2. 列举出获取页面元素的方式，写明其含义，参数，返回值
document.getElementById
document.getElementByClassName
document.getElementByIdTageName
document.querySelectorAll
document.querySelector
3. 如何获取body元素和html元素？
document.body 获取body
document.documentElement 获取html
4. 事件三要素是什么？
事件源 （谁）
事件类型 （什么事件）
事件处理程序 （做啥）
5. 执行事件的步骤？
获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）
6. 请列举出常见的6个鼠标事件
onlick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发
7. js中如何利用 DOM 操作元素来改变元素里面的内容？二者区别是？
innerText 从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
innerHtml 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
8. 通过js修改元素属性的两种方式是什么？
名字.style 行内样式操作
名字.className 类名样式操作
9. 如何设置属性？（内置属性和自定义属性）
名字.属性 = ‘值’； 设置内置属性值。
名字.setAttribute('属性', '值'); 主要设置自定义的属性 （标准）
10. 如何获取属性？（内置属性和自定义属性）
名字.属性 —— 获取属性值 获取内置属性值
名字.getAttribute( '属性' ); 主要获得自定义的属性
11. 如何移除属性？
名字.removeAttribute('属性');
12. H5提供的自定义属性如何设置和获取？
兼容性获取 element.getAttribute(‘data-index’);
H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持
13. 如何获取父级节点？
parentNode
14. 如何获取父级元素？
paretnElement
15. 如何获取子级节点？
childNodes
16. 如何获取子级元素？
children
17. 如何获取第一个子级节点？
firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
18. 如何获取最后一个子级节点？
lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
19. 如何获取第一个子级元素？
firstElementChild 返回第一个子元素节点，找不到则返回null。
20. 如何获取最后一个子级元素？
lastElementChild 返回最后一个子元素节点，找不到则返回null。
1. 实际开发中，我们通过哪种方式获取子级元素更方便且能够避免兼容？
如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]
2. 如何设置和获取属性？（内置属性和自定义属性）
3. 如何获取父级元素和父级节点？
parentNode父级节点 parentElement
4. 绑定事件的方式？（三种：说明参数及兼容）
onclick addEventLister attachEvent
5. 解绑事件的方式？（三种：说明参数及兼容）
onclick = null removeEventListener detachEvent
6. 什么是事件冒泡？
事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。
7. 什么是事件委托？事件委托的好处是？
利用事件冒泡的特性，将注册在子元素上的事件函数注册在父元素上，子元素触发该事件时如果其本身没有该事件函数就往父元素查找是否有该事 件函数，有则触发。
- 好处:
- 1.减少DOM操作，提高性能。
- 2.随时可以添加子元素，添加的子元素会有相应的事件处理函数。
8. 如何阻止冒泡？
stopPropagation
9. 如何阻止事件的默认行为？
preventDefault()
10. 事件流的三个阶段是？
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段
11. 说说鼠标事件对象的作用？（clientX ...）
e.clientX / Y返回鼠标相对于浏览器窗口可视区的X / Y坐标
e.pageX / Y返回鼠标相对于文档页面的X / Y坐标 IE9以上支持
e.screenX / Y返回鼠标相对于电脑屏幕的X / Y坐标
12. 说说键盘事件及区别？
onkeyup 某个键盘按键被松开时触发
onkeydown 某个键盘按键按下时触发
onkeypress 某个键盘按键被按下时触发，但它不识别功能键，比如ctrl shift箭头等
13. 如何判断用户输入的是哪个键？
e.keyCode
14. 如何判断用户触发的事件类型？
e.type
15. window.onload的作用
是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
16. DOMContentLoaded 的作用？
DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
17. window.setTimeout 的作用？（参数 this指向）
方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
18. 事件参数对象的兼容处理？
e = e || window.event
19. 如何克隆节点？
名字.cloneNode()
20. innerHTML和createElement的效率哪个高？
1. offset系列有哪些属性？说出其具体作用
element.offsetParent 返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offsetLeft 返回元素相对带有定位父元素左边框的偏移
element.offsetWidth 返回自身包括padding，边框，内容区的宽度，返回值不带单位
element.offsetHeight 返回自身包括padding，边框，内容区的高度，返回数值不带单位
2. offset与style的区别
offset
offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth 等属性是只读属性，只能获取不能赋值
所以，我们想要获取元素大小位置，用offset更合适
style
style 只能得到行内样式表中的样式值
style.width 获得的是带有单位的字符串
style.width 获得不包含padding和border 的值
style.width 是可读写属性，可以获取也可以赋值
所以，我们想要给元素更改值，则需要用style改变
3. 放大镜案例中求大图移动的距离公式是？
4. client系列有哪些属性？说出其具体作用
element.clientTop 返回元素上边框的大小
element.clientLeft 返回元素左边框的大小
element.clientWidth 返回自身包括padding，不含边框，内容区的宽度，返回值不带单位
element.clientHeight 返回自身包括padding，不含边框，内容区的高度，返回数值不带单位
5. scroll系列有哪些属性？说出其具体作用
element.scrollTop 返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft 返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth 返回自身实际的宽度，不含边框返回数值不带单位
element.scrollHeight 返回自身实际的高度，不含边框返回数值不带单位
6. 页面被卷去的头部距离如何获取？
window.pageYOffset
7. mouseenter和mouseover的区别？
当鼠标移动到元素上时就会触发 mouseenter 事件
类似 mouseover，它们两者之间的差别是
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发
之所以这样，就是因为mouseenter不会冒泡
跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡
8. 说说动画函数的实现原理
通过定时器 setInterval() 不断移动盒子位置。
9. 说说缓动动画的实现原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
10. 说说回调函数的原理
函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
11. window.onload的作用？
是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
12. 什么是事件委托？事件委托的好处是？
利用事件冒泡的特性，将注册在子元素上的事件函数注册在父元素上，子元素触发该事件时如果其本身没有该事件函数就往父元素查找是否有该事 件函数，有则触发。
- 好处:
- 1.减少DOM操作，提高性能。
- 2.随时可以添加子元素，添加的子元素会有相应的事件处理函数。
13. 如何设置和获取属性？（内置属性和自定义属性）
名字.属性 = ‘值’； 设置内置属性值。
名字.setAttribute('属性', '值'); 主要设置自定义的属性 （标准）
名字.属性 —— 获取属性值 获取内置属性值
名字.getAttribute( '属性' ); 主要获得自定义的属性
14. 如何阻止冒泡？
stopPropagation
15. 如何阻止事件的默认行为？
preventDefault()
16. 事件参数对象的兼容处理？
17. 通过js修改元素属性的两种方式是什么？
18. laoxu.fun?name='zs'&age=18，如何获取到zs，说说思路
19. 说说你理解的js执行机制
单线程机制一段时间只能执行一个
20. history对象有哪些属性和方法？
21. navigator对象中你了解的属性及作用？
back后退
forward前进
go()后退或者前进，1就是前进，-1就是后退
