js 面试题（2）

一。函数表达式相关知识：

（1）闭包：是指有权访问另一个 函数作用域中的变量的函数。

（2）this指针：this 对象是在运行时基于函数的执行环境绑定的；在全局函数中，this 等于 window，而当函数被作为某个对象的方法调用时，this 等于那个对象。不过，匿名函数的执行环境具有全局性，因此其 this 对象通常指向 window。其次具体的this指向取决于代码。

二。BOM

（1）window：全局作用域。

（2）窗口和框架：window.name 代表框架的名称。top 代表框架的最上层、parent 代表框架的上一层。每个框架之间的window对象互相独立。

（3）window api：

1.  open(url, name)：url：新窗口地址，name：窗口的名称或打开窗口的方式。_blank：URL加载到一个新的窗口。这是默认，_parent： URL加载到父框架，_self： URL替换当前页面，_top：URL替换任何可加载的框架集，name： 窗口名称。
2. setTimeout()、setInterval()、clearTimeout()、clearInterval()：分别为延时器、定时器、清除延时器、清除定时器。
3. alert()、confirm()和 prompt()：提示框、确认框、可输入提示框。

（4）location 对象：（例子：window.location.href => 'https://blog.youkuaiyun.com/github_38186390/article/details/95940705'）

• hash "#contents" 返回URL中的hash（#号后跟零或多个字符），如果URL 中不包含散列，则返回空字符串
• host "www.wrox.com:80" 返回服务器名称和端口号（如果有）
• hostname "www.wrox.com" 返回不带端口号的服务器名称
• href "http:/www.wrox.com" 返回当前加载页面的完整URL。而location对象的 toString()方法也返回这个值
• pathname "/WileyCDA/" 返回URL中的目录和（或）文件名
• port "8080" 返回URL中指定的端口号。如果URL中不包含端口号，则 这个属性返回空字符串
• protocol "http:" 返回页面使用的协议。通常是http:或https:
• search "?q=javascript" 返回URL的查询字符串。这个字符串以问号开头

   常用操作：window.location.href = '链接' 用于跳转到指定链接。window.location.reload() 刷新当前页面。

（5）history 对象：

• go(n)：n 为正数则前进 n 页，负数则后退 n 页。
• back()、forward()：后退一页、前进一页。

三。DOM 操作

（1）元素操作：

• replaceWith（替换该父节点下的子节点, 浏览器支持：Chrome：54 firefox：49，ie 不支持）参考链接
• remove（删除指定节点，浏览器支持：Chrome：23 firefox：23，ie 不支持）参考链接
• closest（查找当前元素的祖先元素， 浏览器支持：Chrome：41 firefox：35，ie 不支持）参考链接
• matches（同matchesSelector）

（2）子节点操作：

• appendChild（新增节点）
• insertBefore（插入在什么节点之前。）
• replaceChild（替换指定节点）
• removeChild（删除指定子节点）
• cloneNode（Boolean）（克隆节点，true 深克隆
• normalize（文本节点处理）。

（3）查找元素：

• getElementById(id)：根据 id 获取元素。
• getElementsByTagName(tagName)：根据标签名返回一个元素的集合（也就是一个数组）。
• getElementsByName(name)：根据元素 name 属性返回一个元素的集合。
• querySelector()：根据css选择符，返回匹配元素的第一个元素。
• querySelectorAll()：根据css选择符，返回所有匹配的元素（数组）。
• matchesSelector()：验证元素是否能被querySelector或者querySelectorAll 返回。
• getElementsByClassName()：通过类名查找元素，返回所有匹配的元素集合（数组）

（4）创建元素：

• createElement(): 标签名或者是完整的节点元素。
• createTextNode()：创建文本节点。
• createDocumentFragment()：创建文档片段。
• createAttribute()：创建属性节点。用setAttribute api 添加进去。
• insertAdjacentHTML(type, dom)：type可选值：

1. "beforebegin"，在当前元素之前插入一个紧邻的同辈元素；
2.  "afterbegin"，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
3. "beforeend"，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
4. "afterend"，在当前元素之后插入一个紧邻的同辈元素。

（5）Element类型：元素的属性

• getAttribute(属性名)：获取对应的属性值。
• setAttribute(属性名, 属性值)：设置对应的属性值。
• removeAttribute(属性名)：删除对应的属性。

（6）classList属性用于操作类。

• classList.add(class)：添加一个类。
• classList.contains(class)：判断是否存在该类，存在返回true。
• classList.remove(class)：删除一个类。
• classList.toggle(class)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

（7）属性操作：

• innerHTML：用于插入元素节点或者文本节点。
• outerHTML：用于替换当前元素节点。
• innerText：用于插入文本。
• outerText：用于替换当前元素文本。

（8）样式相关APi

• getComputedStyle(dom元素)：返回元素的样式，IE不支持，可通过currentStyle返回。
• getBoundingClientRect()：返回left、top、right 和 bottom的值。
• insertRule()：添加一条css样式。慎用
• deleteRule()：删除规则。慎用

四。事件。

（1）addEventListener()、removeEventListener()：添加监听事情和删除监听事件，三个参数，第一个为事情名，第二个为处理函数，第三个为是在捕获阶段（true）或冒泡阶段（false）调用事件处理程序。最好是在冒泡阶段。删除监听事件的三个参数必须与添加的相同才能进行删除。IE使用attachEvent()和 detachEvent()代替只有前两个参数。第一个参数值的区别是attachEvent前面需要加on 例如（attachEvent('onclick', function () {}) addEventListener('click', function () {})）。

（2）事情常用event 属性：

• event.preventDefault()：取消事件的默认行为。
• event.stopPropagation()：取消事件的进一步捕获或冒泡。
• event.target：事件的目标。
• event.type：触发的类型。
• event.offsetX、event.offsetY：相对元素的偏移量。例如：元素width：40px；height：40px；那右下角的偏移量值就是offsetX = 40，offsetY = 40.
• event.clientX、event.clientY：事件相对于视口（也就是可视化区的左上角）的值，到点击的值。不管滚动。
• event.pageX、event.pageY：相当于文档（页面）的值到点击的值。没有滚动时 event.pageX == event.clientX 的值。

五。如果让一个div 像 textarea 成为可编辑的（contenteditable）。通过给div设置contenteditable="true" 就可以让div成为可编辑的元素。

系列文章：js 面试题（1）