web前端面试高频考点——JavaScript-Web-API 篇（一）DOM、BOM、事件

电玩女神 2023-09-28 18:45 35阅读 0赞

## 系列文章目录 ##

> JavaScript 知识梳理，收录了web前端面试 95%以上 的高频考点，满满的干货。给你做一个高效的知识梳理，为你的面试保驾护航！

<table> 
 <thead> 
  <tr> 
   <th>内容</th> 
   <th>参考链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>HTML &amp; CSS 篇</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126056763" rel="nofollow">HTML &amp; CSS 篇</a></td> 
  </tr> 
  <tr> 
   <td>JavaScript 篇（一）</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126077498" rel="nofollow">JavaScript 篇（一）【JS的三座大山 】原型和原型链、作用域和闭包、异步</a></td> 
  </tr> 
  <tr> 
   <td>JavaScript 篇（二）</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126123773" rel="nofollow">JavaScript 篇（二）【JS 异步进阶】</a></td> 
  </tr> 
  <tr> 
   <td>JavaScript-Web-API 篇（一）</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126174849" rel="nofollow">JavaScript-Web-API 篇（一）DOM、BOM、事件</a></td> 
  </tr> 
  <tr> 
   <td>JavaScript-Web-API 篇（二）</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126189846" rel="nofollow">JavaScript-Web-API 篇（二）AJAX、存储</a></td> 
  </tr> 
  <tr> 
   <td>HTTP 篇</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126213301" rel="nofollow">HTTP 篇</a></td> 
  </tr> 
  <tr> 
   <td>性能优化篇</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126219544" rel="nofollow">性能优化篇（手写防抖、手写节流、XXS攻击、XSRF攻击）</a></td> 
  </tr> 
  <tr> 
   <td>经典面试题-JS篇</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126240337" rel="nofollow">经典面试题 HTML、CSS、JavaScript篇</a></td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### 文章目录 ####

*  系列文章目录
 *  JS-Web-API-DOM
 *   *  DOM 节点操作
     *   *  获取 DOM 节点
         *  DOM 节点的 property 和 attribute
     *  DOM 结构操作
     *   *  新增、插入、移动节点
         *  获取子元素列表 & 获取父元素
         *  删除子元素
     *  如何优化 DOM 操作的性能
     *   *  DOM 查询做缓存
         *  将频繁操作改为一次性操作
 *  JS-Web-API-BOM
 *   *  BOM 操作相关面试题
     *   *  navigation 和 screen
         *  拆解 url 各部分
 *  JS-Web-API-事件
 *   *  事件绑定
     *  事件冒泡
     *  事件代理
     *  通用事件绑定函数（考虑代理）

--------------------

## JS-Web-API-DOM ##

### DOM 节点操作 ###

#### 获取 DOM 节点 ####

*  document.getElementById()：返回对拥有指定 id 的第一个对象的引用。
 *  document.getElementsByTagName()：返回带有指定标签名的对象集合。
 *  document.getElementsByClassName()：返回一个包含了所有指定类名的子元素的类数组对象。
 *  document.querySelectorAll()：返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

示例：获取 DOM 节点的 Demo

<div id="div1" class="container">
            <p>一段文字</p>
            <p>一段文字</p>
            <p>一段文字</p>
        </div>
        <div id="div2" class="container">
            <img src="./code.png">
        </div>
        
    	const div1 = document.getElementById('div1')
        console.log('div1', div1)
    
        const divList = document.getElementsByTagName('div')
        console.log('divList.length', divList.length)
        console.log('divList[1]', divList[1])
    
        const containerList = document.getElementsByClassName('container')
        console.log('containerList.length', containerList.length)
        console.log('containerList[1]', containerList[1])
    
        const pList = document.querySelectorAll('p')
        console.log('pList', pList)

![在这里插入图片描述][5c20c9a7713648c1b4b2f22cefbcee7e.png]

#### DOM 节点的 property 和 attribute ####

*  property：修改对象属性，不会体现到 html 结构中
 *  attribute：修改 html 属性，会改变 html 结构
 *  两者都有可能引起 DOM 的重新渲染

示例 1：property 修改对象属性（推荐使用）

.container {
        
            border: 1px solid #ccc;
        }
        .red {
        
            color: red;
        }
    
        <div id="div1" class="container">
            <p>一段文字1</p>
            <p>一段文字2</p>
            <p>一段文字3</p>
        </div>
    
        // property 形式
        const pList = document.querySelectorAll('p')
        const p1 = pList[0]
    
        p1.style.width = '100px'
        console.log(p1.style.width)
        p1.className = 'red'
        console.log(p1.className)
        console.log(p1.nodeName)
        console.log(p1.nodeType)

![在这里插入图片描述][fd02493a94e1463cb4bd072f6ace95f0.png]

示例 2：attribute 修改 html 属性

.container {
        
            border: 1px solid #ccc;
        }
        .red {
        
            color: red;
        }
    
        <div id="div1" class="container">
            <p>一段文字1</p>
            <p>一段文字2</p>
            <p>一段文字3</p>
        </div>
        
        // attribute 
        const pList = document.querySelectorAll('p')
        const p1 = pList[0]
        p1.setAttribute('data-name', 'imooc')
        console.log(p1.getAttribute('data-name'))
        p1.setAttribute('style', 'font-size: 30px;')
        console.log(p1.getAttribute('style'))

![在这里插入图片描述][345e4cd7ea204c3ea7ec04d6258365b8.png]

![在这里插入图片描述][67bfa08f0878458995ff796d8efaaf63.png]

### DOM 结构操作 ###

#### 新增、插入、移动节点 ####

*  新增节点：createElement
 *  插入节点：appendChild
 *  移动节点：已有的节点插入到别的容器就会发生移动

示例：

<div id="div1" class="container">
            <p id="p1">一段文字1</p>
            <p>一段文字2</p>
            <p>一段文字3</p>
        </div>
        <div id="div2" class="container"></div>
    
        const div1 = document.getElementById('div1')
        const div2 = document.getElementById('div2')
        const newP = document.createElement('p')
        // 新建节点
        newP.innerHTML = '新增的一段文字'
        // 插入节点
        div1.appendChild(newP)
        // 移动节点
        const p1 = document.getElementById('p1')
        div2.appendChild(p1)

![在这里插入图片描述][9d405930b19f4ccf9310cd5cfc7ba074.png]

#### 获取子元素列表 & 获取父元素 ####

*  parentNode：父元素
 *  childNodes：子元素
 *  removeChild：删除子元素

示例 1：div1ChildNodes 不是数组，需要Array.from() 转为数组

<div id="div1" class="container">
            <p id="p1">一段文字1</p>
            <p>一段文字2</p>
            <p>一段文字3</p>
        </div>
    
    	const div1 = document.getElementById('div1')
    	// 获取父元素
        console.log(p1.parentNode)
    
        // 获取子元素列表
        const div1ChildNodes = div1.childNodes
        console.log(div1.childNodes)
        const divChildNodesP = Array.from(div1ChildNodes).filter(child => {
        
            if(child.nodeType === 1) {
        
                return true
            }
            return false
        })
        console.log('divChildNodesP', divChildNodesP)

![在这里插入图片描述][cd2c25445cf14c13af060c23705e42c2.png]

#### 删除子元素 ####

示例：在上文的基础上进行删除子元素

div1.removeChild(divChildNodesP[0])

![在这里插入图片描述][b60d866f79eb408b8a8932c31d5e8807.png]

### 如何优化 DOM 操作的性能 ###

#### DOM 查询做缓存 ####

*  做缓存，先接收所有的 length，避免循环的时候重复操作 DOM

示例 1：

// 不缓存 DOM 查询结果
        for(let i = 0; i < document.getElementsByTagName('p').length; i++) {
        
            // 每次循环，都会计算 length，频繁进行 DOM 查询
        }

示例 2：

// 缓存 DOM 查询结果
        const pList = document.getElementsByTagName('p')
        const length = pList.length
        for(let i = 0; i < length; i++) {
        
            // 缓存 length，只进行一次 DOM 查询
        }

#### 将频繁操作改为一次性操作 ####

*  创建文档片段，把循环的内容先插入到文档片段中

示例 1：频繁的 DOM 操作

<ul id="list"></ul>
        
        const list = document.getElementById('list')
        for(let i = 0; i < 10; i++) {
        
            const li = document.createElement('li')
            li.innerHTML = `List item ${
          i}`
            list.appendChild(li)
        }

示例 2：创建文档片段

<ul id="list"></ul>
        
        const list = document.getElementById('list')
        // 创建一个文档片段，此时还没有插入到 DOM 树中
        const frag = document.createDocumentFragment()
        // 执行插入
        for(let i = 0; i <= 10; i++) {
        
            const li = document.createElement('li')
            li.innerHTML = `List item ${
          i}`
            // 先插入文档片段中
            frag.appendChild(li)
        }
        // 都完成之后，再统一插入到 DOM 树中
        list.appendChild(frag)

![在这里插入图片描述][4f7faf5719154616a20abbc039012db2.png]

## JS-Web-API-BOM ##

### BOM 操作相关面试题 ###

#### navigation 和 screen ####

*  navigation.userAgent：浏览器用于 HTTP 请求的用户代理头的值
 *  screen.width：屏幕宽度
 *  screen.height：屏幕高度  
    ![在这里插入图片描述][01d2d1e26e004e19a6d4f1e50c540558.png]

#### 拆解 url 各部分 ####

*  location.href：返回完整的URL
 *  location.protocol：返回一个URL协议
 *  location.host：返回一个URL的主机名和端口
 *  location.search：返回一个URL的查询部分
 *  location.hash：返回一个URL的锚部分
 *  location.pathname：返回的URL路径名。  
    ![在这里插入图片描述][23f0fa0814fc4a45a4c16e3ac3c37333.png]

## JS-Web-API-事件 ##

### 事件绑定 ###

示例：通用事件绑定函数

<button id="btn1">一个按钮</button>
    
    	function bindEvent(elem, type, fn) {
        
            elem.addEventListener(type, fn) 
        }
    
        const btn1 = document.getElementById('btn1')
        bindEvent(btn1, 'click', event => {
        
        	console.log(event.target) // 
            alert('clicked')
        })

![在这里插入图片描述][0f282be610e0459ca93c1717983d1a4f.png]

### 事件冒泡 ###

*  基于 DOM 树形结构
 *  事件会顺着触发元素往上冒泡
 *  应用场景：代理
 *  stopPropagation：用于阻止事件冒泡

<div id="div1">
            <p id="p1">激活</p>
            <p id="p2">取消</p>
            <p id="p3">取消</p>
            <p id="p4">取消</p>
        </div>
        <div id="div2">
            <p id="p5">取消</p>
            <p id="p6">取消</p>
        </div>
    
    	function bindEvent(elem, type, fn) {
        
            elem.addEventListener(type, fn)
        }
        const p1 = document.getElementById('p1')
        const body = document.body
        bindEvent(p1, 'click', event => {
        
            event.stopPropagation() // 阻止冒泡
            console.log('激活')
        })
        bindEvent(body, 'click', event => {
        
            console.log('取消')
        })

不阻止冒泡，点击激活会冒泡到取消：

![在这里插入图片描述][5343f1bd88df4fde8fdc063785194822.png]

阻止冒泡，点击激活不会冒泡：

![在这里插入图片描述][c1dfc5fe872a42b6ad73c9dcbda9ccb8.png]

### 事件代理 ###

*  代码更简洁
 *  减少浏览器内存占用
 *  但是，不要滥用
 *  对于复杂，不好去每个都绑定事件的时候使用

示例：元素 a 把事件处理委托给自己的父元素 div 去处理

<div id="div1">
            <a href="#">a1</a>
            <a href="#">a2</a>
            <a href="#">a3</a>
            <a href="#">a4</a>
            <button>加载更多...</button>
        </div>
    	
    	function bindEvent(elem, type, fn) {
        
            elem.addEventListener(type, fn)
        }
        const div1 = document.getElementById('div1')
        bindEvent(div1, 'click', event => {
        
            event.preventDefault() // 阻止页面跳转
            const target = event.target
            if(target.nodeName === 'A') {
        
                alert(target.innerHTML)
            }
        })

点击 a1-4 会弹出对话框，点击按钮则不会：

![在这里插入图片描述][b781993a06a44916b284ce8402c8b761.png]

### 通用事件绑定函数（考虑代理） ###

*  fn 不能是箭头函数，箭头函数无法被 call

<div id="div1">
            <a href="#">a1</a>
            <a href="#">a2</a>
            <a href="#">a3</a>
            <a href="#">a4</a>
            <button>加载更多...</button>
        </div>
        <button id="btn1">点击</button>
    
    	// 通用事件绑定函数
        function bindEvent(elem, type, selector, fn) {
        
            // 如果传入三个参数，把 selector 赋值给 fn，selector 置空
            if (fn == null) {
        
                fn = selector
                selector = null
            }
            elem.addEventListener(type, event => {
        
                const target = event.target
                if (selector) {
        
                    // 代理绑定
                    if (target.matches(selector)) {
        
                        fn.call(target, event)
                    }
                } else {
        
                    // 普通绑定
                    fn.call(target, event)
                }
            })
        }
    	
    	// 普通绑定
        const btn1 = document.getElementById('btn1')
        bindEvent(btn1, 'click', function(event) {
        
            event.preventDefault()
            alert(this.innerHTML)
        })
    
        // 代理绑定
        const div1 = document.getElementById('div1')
        bindEvent(div1, 'click', 'a', function (event) {
        
            event.preventDefault()
            alert(this.innerHTML)
        })

点击 a1-4 会弹出对话框，点击按钮则不会：

![在这里插入图片描述][ef160b7729de44c4916443e5a44af923.png]

`不积跬步无以至千里 不积小流无以成江海`

点个关注不迷路，持续更新中…

[5c20c9a7713648c1b4b2f22cefbcee7e.png]: https://img-blog.csdnimg.cn/5c20c9a7713648c1b4b2f22cefbcee7e.png
[fd02493a94e1463cb4bd072f6ace95f0.png]: https://img-blog.csdnimg.cn/fd02493a94e1463cb4bd072f6ace95f0.png
[345e4cd7ea204c3ea7ec04d6258365b8.png]: https://img-blog.csdnimg.cn/345e4cd7ea204c3ea7ec04d6258365b8.png
[67bfa08f0878458995ff796d8efaaf63.png]: https://img-blog.csdnimg.cn/67bfa08f0878458995ff796d8efaaf63.png
[9d405930b19f4ccf9310cd5cfc7ba074.png]: https://img-blog.csdnimg.cn/9d405930b19f4ccf9310cd5cfc7ba074.png
[cd2c25445cf14c13af060c23705e42c2.png]: https://img-blog.csdnimg.cn/cd2c25445cf14c13af060c23705e42c2.png
[b60d866f79eb408b8a8932c31d5e8807.png]: https://img-blog.csdnimg.cn/b60d866f79eb408b8a8932c31d5e8807.png
[4f7faf5719154616a20abbc039012db2.png]: https://img-blog.csdnimg.cn/4f7faf5719154616a20abbc039012db2.png
[01d2d1e26e004e19a6d4f1e50c540558.png]: https://img-blog.csdnimg.cn/01d2d1e26e004e19a6d4f1e50c540558.png
[23f0fa0814fc4a45a4c16e3ac3c37333.png]: https://img-blog.csdnimg.cn/23f0fa0814fc4a45a4c16e3ac3c37333.png
[0f282be610e0459ca93c1717983d1a4f.png]: https://img-blog.csdnimg.cn/0f282be610e0459ca93c1717983d1a4f.png
[5343f1bd88df4fde8fdc063785194822.png]: https://img-blog.csdnimg.cn/5343f1bd88df4fde8fdc063785194822.png
[c1dfc5fe872a42b6ad73c9dcbda9ccb8.png]: https://img-blog.csdnimg.cn/c1dfc5fe872a42b6ad73c9dcbda9ccb8.png
[b781993a06a44916b284ce8402c8b761.png]: https://img-blog.csdnimg.cn/b781993a06a44916b284ce8402c8b761.png
[ef160b7729de44c4916443e5a44af923.png]: https://img-blog.csdnimg.cn/ef160b7729de44c4916443e5a44af923.png