js 查缺补漏（二）

1. DOM 的本质是什么数据结构？

DOM 的本质就是一棵树，从HTML 文件解析出来的一棵树

2. 移动节点

如果一个已存在的节点，appendChild、append 插入到其他节点，就是移动节点的意思

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="div1">
    <p>test1</p>
    <p>test2</p>
  </div>
  <div id="div2">
    <p>test3</p>
    <p>test4</p>
  </div>
  <script>
    var oTest1 = document.getElementById('div1').children[0] // 获取第一个子元素
    var oDiv2 = document.getElementById('div2') 
    oDiv2.appendChild(oTest1) // 把第一个子元素加到div2中
  </script>
</body>
</html>

移动后~

3. DOM 性能优化方面相关

将频繁 DOM 操作改为一次性操作，这个时候就会用到 createDocumentFragment，createdocumentfragment () 方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。虚拟的节点先不会加入dom中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="div1"></ul>
  <script>
    var oTest1 = document.getElementById('div1')
    var fragment = document.createDocumentFragment()
    for (let i = 0; i < 10; i++) {
      var li = document.createElement('li')
      li.innerHTML = i
      fragment.appendChild(li)
    }
    oTest1.appendChild(fragment)
  </script>
</body>
</html>

先加入到虚拟节点中，虚拟节点的频繁操作不会影响DOM性能

4. 获取浏览器用户信息

window.navigator.userAgent

5. 加载图片、css、js 外链可以跨域，会无视同源策略

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
  <!-- css -->
  <link rel="stylesheet" href="">
</head>
<body>
  <!-- img -->
  <img src="" alt="">
  <!-- js -->
  <script src=""></script>
</body>
</html>

用途：

1. img 标签可以用于统计埋点，使用第三方数据统计服务

2. script 标签实现 jsonp 跨域

3. link、script 可以引入cdn

img 用于埋点：

所有的跨域，都必须经过服务端润许和配合，未经服务端允许就实现跨域，说明浏览器有漏洞，危险信号

在 node 层设置

6. 闭包

闭包有两种情况：

（1）函数中返回一个函数（函数作为返回值被返回）

（2）函数作为一个参数被传递

闭包：函数中变量的查找，是在该函数定义的地方，不是在调用执行的地方！！

// 函数作为返回值
    function create () {
      const a = 100
      return function () { // 定义
        console.log(a)
      }
    }
    const a = 200
    create()() // 100

// 函数作为参数
    function create(fn) {
      let a = 200
      fn()
    }

    let a = 300
    function test () { // 定义函数
      console.log(a) // 300
    }
    create(test)

js 查缺补漏 （二）

猜你喜欢

js 查缺补漏（二）