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)