【面试】前端JavaScript面试技巧（更新中...）

时间 2019-11-17

标签面试前端 javascript 技巧更新栏目快乐工作繁體版

原文原文链接

声明：慕课网《前端JavaScript面试技巧》的笔记，仅用于查阅复习，不得用于商业用途。html

第1章课程简介

1-1 课程简介

基础知识前端

原型原型链
做用域闭包
异步单线程

JS APInode

DOM操做
Ajax
事件绑定

开发环境jquery

版本管理
模块化
打包工具

运行环境面试

页面渲染
性能优化

1-2 前言

关于面试
关于基础

关于面试ajax

基层工程师 - 基础知识
高级工程师 - 项目经验
架构师 - 解决方案

关于基础算法

工程师的自我修养 - 基础
扎实的基础会让你高效学习新技术

1-3 几个面试题

先从几道面试题提及json

JS中使用typeof能获得的哪些类型？
什么时候使用===什么时候使用==？
window.onload和DOMContentLoaded的区别？
用JS建立10个<a>标签，点击的时候弹出来对应的序号
简述如何实现一个模块加载器，实现相似require.js的基本功能
实现数组的随机排序

思考数组

拿到一个面试题，你第一时间看到的是什么？
又如何看待网上搜出来的永远也看不完的题海？
如何对待接下来遇到的面试题？

1-4 如何搞定全部面试题

如何搞定全部面试题浏览器

上一节思考问题的结论
题目考察的知识点

上一节思考问题的结论

拿到一个面试题，你第一时间看到的是什么？ -> 考点
又如何看待网上搜出来的永远也看不完的题海？ -> 不变应万变
如何对待接下来遇到的面试题？ -> 题目到知识再到题目

题目考察的知识点

JS中使用typeof能获得的哪些类型？
考点：JS变量类型
什么时候使用===什么时候使用==？
考点：强制类型转换
window.onload和DOMContentLoaded的区别？
考点：浏览器渲染过程
用JS建立10个<a>标签，点击的时候弹出来对应的序号
考点：做用域
简述如何实现一个模块加载器，实现相似require.js的基本功能
考点：JS模块化
实现数组的随机排序
考点：JS基础算法

JS基础知识（上）

2-1 变量类型和计算-1

变量类型和计算

题目
知识点
解答

题目

JS中使用typeof能获得的哪些类型
什么时候使用===什么时候使用==
JS中有哪些内置函数
JS变量按照存储方式区分为哪些类型，并描述其特色
如何理解JSON

知识点

变量类型
变量计算

变量类型

值类型 vs 引用类型
typeof运算符

值类型

let a = 100
let b = a
a = 200
console.log(b) // 100
复制代码

引用类型

let a = { age: 20 }
let b = a
b.age = 21
console.log(a.age) // 21
复制代码

typeof运算符

typeof undefined // "undefined"
typeof 'abc' // "string"
typeof 123 // "number"
typeof true // "boolean"
typeof {} // "object"
typeof [] // "object"
typeof null // "object"
typeof console.log // "function"
复制代码

变量计算 - 强制类型转换

字符串拼接
==运算符
if语句
逻辑运算

字符串拼接

let a = 100 + 10 // 110
let b = 100 + '10' // "10010"
复制代码

==运算符

100 == '100' // true
0 == '' // true
null == undefined // true
复制代码

if语句

let a = true
if (a) {
    // ...
}
let b = 100
if (b) {
    // ...
}
let c = ''
if (c) {
    // ...
}
复制代码

逻辑运算符

console.log(10 && 0) // 0
console.log('' || 'abc') // "abc"
console.log(!window.abc) // true

// 判断一个变量会被当作true仍是false
let a = 100
console.log(!!a) // true
复制代码

2-2 变量类型和计算-2

解答

JS中使用typeof能获得的类型

问题：JS中使用typeof能获得的哪些类型
答案：undefined、string、number、boolean、object、function、symbol

let sym = Symbol('commet')
console.log(typeof sym) // "symbol"
复制代码

什么时候使用===什么时候使用==

问题：什么时候使用===什么时候使用==
答案：判断对象的某个属性是否存在或为null时可使用==，由于jquery源码这么使用

if (obj.a == null) {
    // 这里至关于obj.a === null || obj.a === undefined，简写形式
    // 这是jquery源码中推荐的写法
}
复制代码

JS中的内置函数

问题：JS中有哪些内置函数 —— 数据封装类对象
答案：

String
Number
Boolean
Object
Array
Function
Data
RegExp
Error
复制代码

JS按存储方式区分变量类型

问题：JS变量按照存储方式区分为哪些类型，并描述其特色
答案：值类型和引用类型

2-3 变量类型和计算-3 如何理解JSON

如何理解JSON

问题：如何理解JSON
答案：JSON只不过是一个JS对象而已，也是一种数据格式

JSON.stringify({ a: 10, b: 20 )
JSON.parse('{"a":10,"b":20}')
复制代码

2-4 变量类型和计算-3 代码演示

if (...) {}中false的状况：false 0 NaN null undefined

内置对象有：JSON、Math

2-5 typeof symbol 【ES6变量类型】

let s = Symbol()
typeof s // "symbol"
let s1 = Symbol()
s === s1 // false
let s2 = Symbol('s2s2')
console.log(s2) // Symbol(s2s2)
let s3 = s2
console.log(s3 === s2) // true
let sym1 = Symbol('111')
let sym2 = Symbol('222')
let obj = { [sym1]: 'hello world' }
obj[sym2] = 123
console.log(obj) // { Symbol(111): "hello world", Symbol(222): 123 }
console.log(obj[sym1]) // "hello world"
console.log(obj[sym2]) // 123
复制代码

2-6 原型和原型链

原型和原型链

题目
知识点
解答

题目

如何准确判断一个变量是数组类型
写一个原型链继承的例子
描述new一个对象的过程
zepto（或其余框架）源码中如何使用原型链

知识点

构造函数
构造函数 - 扩展
原型规则和示例
原型链
instanceof

构造函数

function Foo(name, age) {
    this.name = name
    this.age = age
    this.class = 'class-1'
    // return this // 默认有这一行
}
let f = new Foo('lilei', 18)
// let f2 = new Foo('hanmeimei', 17) // 建立多个对象
复制代码

构造函数-扩展

let a = {} 实际上是let a = new Object()的语法糖
let a = [] 实际上是let a = new Array()的语法糖
function Foo(){...} 实际上是let Foo = new Function(...)
使用instanceof判断一个函数是不是一个变量的构造函数

判断一个变量是否为“数组”：变量 instanceof Array

2-7 原型和原型链-5个原型规则

原型规则和示例

5条原型规则
原型规则是学习原型链的基础

5条原型规则

全部的引用类型（数组、对象、函数），都具备对象特性，便可自由扩展属性（除了"null"之外）
全部的引用类型（数组、对象、函数），都有一个__proto__（隐式原型）属性，属性值是一个普通的对象
全部的函数，都有一个prototype（显示原型）属性，属性值也是一个普通的对象
全部的引用类型（数组、对象、函数），__proto__属性值指向它的构造函数的prototype属性值
当试图获得一个对象的某个属性时，若是这个对象自己没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找

let obj = {}
obj.a = 100
let arr = []
arr.a = 100
function fn() {}
fn.a = 100

console.log(obj.__proto__)
console.log(arr.__proto__)
console.log(fn.__proto__)

console.log(fn.prototype)

console.log(obj.__proto__ === Object.prototype)
复制代码

// 构造函数
function Foo(name, age) {
    this.name = name
}
Foo.prototype.alertName = function() {
    alert(this.name)
}

// 建立实例
let f = new Foo('lilei')
f.printName = function() {
    console.log(this.name)
}
// 测试
f.printName()
f.alertName()
复制代码

2-8 原型和原型链-5个原型规则-补充二点

for (let item in f) {
    // 高级浏览器已经在 for in 中屏蔽了来自原型的属性
    // 可是这里建议你们仍是加上这个判断，保证程序的健壮性
    if (f.hasOwnProperty(item)) {
        console.log(item)
    }
}
复制代码

2-9 原型和原型链-原型链

// 构造函数
function Foo(name, age) {
    this.name = name
}
Foo.prototype.alertName = function() {
    alert(this.name)
}

// 建立实例
let f = new Foo('lilei')
f.printName = function() {
    console.log(this.name)
}
// 测试
f.printName()
f.alertName()
f.toString() // 要去f.__proto__.__proto__中查找
复制代码

原型链

2-10 原型和原型链-原型链-instanceof

instanceof

用于判断引用类型属于哪一个构造函数的方法
f instanceof Foo 的判断逻辑是：
f的__proto__一层一层往上，可否对应到Foo.prototype
再试着判断f instanceof Object

2-11 原型和原型链-解答1

解题

如何准确判断一个变量是数组类型
写一个原型链继承的例子
描述new一个对象的过程
zepto（或其余框架）源码中如何使用原型链

如何准确判断一个变量是数组类型

let arr = []
arr instanceof Array // true
typeof arr // object，typeof是没法判断是不是数组的
复制代码

写一个原型链继承的例子

// 动物
function Animal() {
    this.eat = function() {
        console.log('animal eat')
    }
}
// 狗
function Dog() {
    this.bark = function() {
        console.log('dog bark')
    }
}
Dog.prototype = new Animal()
// 哈士奇
let hashiqi = new Dog()

// 接下来代码演示时，会推荐更加贴近实战的原型继承示例
复制代码

描述new一个对象的过程

建立一个新对象
this指向这个新对象
执行代码，即对this赋值
返回this

function Foo(name, age) {
    this.name = name
    this.age = age
    this.class = 'class-1'
    // return this // 默认有这一行
}

let f = new Foo('lilei', 18)
// let f2 = new Foo('hanmeimei', 18) // 建立多个对象
复制代码

zepto（或其余框架）源码中如何使用原型链

阅读源码是高效提升技巧的方式
但不能“埋头苦钻”有技巧在其中
慕课网搜索“zepto设计和源码分析”

2-12 原型和原型链-解答2-些一个贴近实际开发原型链继承的例子

写一个封装DOM查询的例子

function Elem(id) {
  this.elem = document.getElementById(id)
}

Elem.prototype.html = function(val) {
  let elem = this.elem
  if (val) {
    elem.innerHTML = val
    return this // 为了链式操做
  } else {
    return elem.innerHTML
  }
}

Elem.prototype.on = function(type, fn) {
  let elem = this.elem
  elem.addEventListener(type, fn)
}

let div1 = new Elem('div1')
// console.log(div1.html())
div1.html('<p>hello imooc</p>').on('click', function() {
  alert('clicked')
})
复制代码

2-13 原型和原型链-代码演示

第3章 JS基础知识（中）

3-1 做用域和闭包-执行上下文

做用域和闭包

题目
知识点
解答

题目

说一下对变量提高的理解
说明this几种不一样的使用场景
建立10个<a>标签，点击的时候弹出来对应的序号
如何理解做用域
实际开发中闭包的应用

知识点

执行上下文
this
做用域
做用域链
闭包

执行上下文

console.log(a) // undefined
var a = 100

fn('lilei') // "lilei" 20
function fn(name) {
    age = 20
    console.log(name, age)
    var age
}
复制代码

范围：一段<script>或者一个函数
全局：变量定义、函数声明
函数：变量定义、函数声明、this、arguments

PS：注意“函数声明”和“函数表达式”的区别

3-2 做用域和闭包-执行上下文-代码演示

3-3 做用域和闭包-this

this

this要在执行时才能确认值，定义时没法确认

var a = {
    name: 'A',
    fn: function() {
        console.log(this.name)
    }
}
a.fn() // this === a
a.fn.call({ name: 'B' }) // this为{ name: 'B' }
var fn1 = a.fn
fn1() // this === window
复制代码

this

做为构造函数执行
做为对象属性执行
做为普通函数执行
call apply bind

3-4 做用域和闭包-this-代码演示

// 构造函数
function Foo(name) {
    this.name = name
}
let f = new Foo('lilei')
f.name // "lilei"
复制代码

// 做为一个对象的属性
let obj = {
    name: 'A',
    printName: function() {
        console.log(this.name)
    }
}
obj.printName() // "A"
复制代码

// 普通函数
function fn() {
    console.log(this)
}
fn() // window
复制代码

// call apply bind
function fn1(name, age) {
    console.log(name)
    console.log(this)
}
fn1.call({ x: 1 }, 'lilei', 20) // "lilei" {x: 1}
fn1.apply({ x: 200 }, ['lilei', 20]) // "lilei" {x: 200}

let fn2 = function(name, age) {
    console.log(name)
    console.log(this)
}.bind({x: 300})
fn2('lilei', 20) // "lilei" {x: 300}
复制代码

3-5 做用域和闭包-做用域

做用域

没有块级做用域
只有函数和全局做用域

// 无块级做用域
if (true) {
    var name = 'lilei'
}
console.log(name) // "lilei"

// 函数和全局做用域
var a = 100
function fn() {
    var a = 200
    console.log('fn', a)
}
console.log('global', a) // "global 100"
fn() // "fn 200"
复制代码

做用域链

var a = 100
function fn() {
    var b = 200
    // 当前做用域没有定义的变量，即“自由变量”
    console.log(a)
    console.log(b)
}
fn()
复制代码

var a = 100
function F1() {
    var b = 200
    function F2() {
        var c = 300
        console.log(a) // a 是自由变量
        console.log(b) // b 是自由变量
        console.log(c)
    }
    F2()
}
F1()
复制代码

3-6 做用域和闭包-做用域-代码演示

3-7 补充-ES6块级做用域

// js 没有块级做用域
// ES6 有块级做用域
复制代码

3-8 做用域和闭包-闭包

闭包

function F1() {
    var a = 100
    
    // 返回一个函数（函数做为返回值）
    return function() {
        console.log(a)
    }
}
// f1 获得一个函数
var f1 = F1()
var a = 200
f1() // 100
复制代码

闭包的使用场景

函数做为返回值（上一个demo）
函数做为参数传递（本身思考）

3-9 做用域和闭包-闭包-代码演示

// 闭包 1，函数做为返回值
function F1() {
    var a = 100
    return function() {
        console.log(a) // a 自由变量，向父做用域去寻找 ——函数**定义**时的父做用域
    }
}
var f1 = F1()
var a = 200
f1() // 100
复制代码

// 闭包 2，函数做为参数传递
function F1() {
    var a = 100
    return function() {
        console.log(a)
    }
}
var f1 = F1()
function F2(fn) {
    var a = 300
    fn()
}
F2(f1) // 100
复制代码

3-10 做用域和闭包-解题

解题

说一下对变量提高的理解
说明this几种不一样的使用场景
建立10个<a>标签，点击的时候弹出来对应的序号
如何理解做用域
实际开发中闭包的应用

说一下对变量提高的理解

变量定义
函数声明（注意和函数表达式的区别）

说明this几种不一样的使用场景

做为构造函数执行
做为对象属性执行
做为普通函数执行
call apply bind

建立10个<a>标签点击的时候弹出来对应的序号

// 这是一个错误的写法！！！
var i, a
for (i = 0; i < 10; i++) {
    a = document.createElement('a')
    a.innerHTML = i + '<br>'
    a.addEventListener('click', function(e) {
        e.preventDefault()
        alert(i) // 自由变量，要去父做用域获取值
    })
    document.body.appendChild(a)
}
复制代码

// 这是正确的写法！！！
var i
for (i = 0; i < 100; i++) {
    (function(i) {
        var a = document.createElement('a')
        a.innerHTML = i + '<br>'
        a.addEventListener('click', function(e) {
            e.preventDefault()
            alert(i)
        })
        document.body.appendChild(a)
    })(i)
}
复制代码

如何理解做用域

自由变量
做用域链，即自由变量的查找
闭包的两个场景

实际开发中闭包的应用

// 闭包实际应用中主要用于封装变量，收敛权限
function isFirstLoad() {
    var _list = []
    return function(id) {
        if (_list.indexOf(id) >= 0) {
            return false
        } else {
            _list.push(id)
            return true
        }
    }
}

// 使用
var firstLoad = isFirstLoad()
firstLoad(10) // true
firstLoad(10) // false
firstLoad(20) // true
// 你在isFirstLoad函数外，根本不可能修改掉_list的值
复制代码

3-11 做用域和闭包-解题-代码演示

第4章JS基础知识（下）

4-1 异步和单线程-什么是异步

异步和单线程

题目
知识点
解答

题目

同步和异步的区别是什么？分别举一个同步和异步的例子
一个关于setTimeout的笔试题
前端使用异步的场景有哪些

知识点

什么是异步（对比同步）
前端使用异步的场景
异步和单线程

什么是异步

console.log(100)
setTimeout(function() {
    console.log(200)
}, 1000)
console.log(300)
复制代码

同步阻塞后续程序代码执行，异步不会阻塞程序的的运行。

对比同步

console.log(100)
alert(200) // 1秒钟以后手动点击确认
console.log(300)
复制代码

什么时候须要异步

在可能发生等待的状况
等待过程当中不能像alert同样阻塞程序运行
所以，全部的"等待的状况"都须要异步

前端使用异步的场景

定时任务：setTimeout, setInterval
网络请求：ajax请求, 动态<img>加载
事件绑定

ajax请求代码示例

console.log('start')
$.get('./data1.json', function(data1) {
    console.log(data1)
})
console.log('end')
复制代码

<img>加载示例

console.log('start')
var img = document.createElement('img')
img.onload = function() {
    console.log('loaded')
}
img.src = '/xxx.png'
console.log('end')
复制代码

事件绑定示例

console.log('start')
document.getElementById('btn1').addEventListener('click', function() {
    alert('clicked')
})
console.log('edn')
复制代码

4-2 异步和单线程-什么是异步-代码演示

4-3 异步和单线程-单线程

异步和单线程

console.log(100)
setTimeout(function() {
    console.log(200)
})
console.log(300)
复制代码

执行第一行，打印100
执行setTimeout后，传入setTimeout的函数会被暂存起来，不会当即执行（单线程的特色，不能同时干两件事）
执行最后一行，打印300
待全部程序执行完，处于空闲状态时，会立马看有没有暂存起来的要执行
发现暂存起来的setTimeout中的函数无需等待时间，就当即过来执行

console.log('start')
$.get('./data1.json', function(data1) {
    console.log(data1)
})
console.log('end')
复制代码

console.log('start')
document.getElementById('btn1').addEventListener('click', function() {
    alert('clicked')
})
console.log('edn')
复制代码

js是单线程语言，即一次只能干一件事，若是同时有两件事，另外一件就先上一边排队去，我先干完这件再说，若是没有异步，那就会出现阻塞现象
因为js是单线程，在代码执行的时候又不能由于执行须要等待的代码而形成阻塞，所以js会首先将无需等待的（同步）代码执行完成后，来处理异步代码，若是达到异步代码的执行条件的话，就会执行

4-4 异步和单线程-解答

同步和异步的区别是什么？分别举一个同步和异步的例子
一个关于setTimeout的笔试题
前端使用异步的场景有哪些

同步和异步的区别是什么

同步会阻塞代码执行，而异步不会
alert是同步，setTimeout是异步

一个关于setTimeout的笔试题

console.log(1)
setTimeout(function() {
    console.log(2)
}, 0)
console.log(3)
setTimeout(function() {
    console.log(4)
}, 1000)
console.log(5)
复制代码

前端使用异步的场景有哪些

定时任务：setTimeout、setInterval
网络请求：ajax请求、动态加载
事件绑定

重点总结

异步和同步的区别
异步和单线程的关系
异步在前端的引用场景

4-5 其余知识点-日期和Math

其余知识

题目
知识点
解答

题目

获取2017-06-10格式的日期
获取随机数，要求是长度一致的字符串格式
写一个能遍历对象和数组的通用forEach函数

知识点

日期
Math
数组API
对象API

日期

Date.now() // 获取当前时间毫秒数
var dt = new Date()
dt.getTime() // 获取毫秒数
dt.getFullYear() // 年
dt.getMonth() // 月（0-11）
dt.getDate() // 日（0-31）
dt.getHours() // 小时（0-23）
dt.getMinutes() // 分钟（0-59）
dt.getSeconds() // 秒（0-59）
复制代码

Math

获取随机数Math.random()

4-6 其余知识点-数组和对象的API

数组API

forEach 遍历全部元素
every 判断全部元素是否都符合条件
some 判断是否有至少一个元素符合条件
sort 排序
map 对元素从新组装，生成新数组
filter 过滤符合条件的元素

forEach

var arr = [1, 2, 3]
arr.forEach(function(item, index) {
    // 遍历数组的全部元素
    console.log(index, item)
}）
复制代码

every

var arr = [1, 2, 3]
var result = arr.every(function(item, index) {
    // 用来判断全部的数组元素，都知足条件
    if (item < 4) {
        return true
    }
})
console.log(result)
复制代码

some

var arr = [1, 2, 3]
var result = arr.every(function(item, index) {
    // 用来判断只要有一个数组元素，知足条件
    if (item < 2) {
        return true
    }
})
console.log(result)
复制代码

sort

var arr = [1, 4, 2, 3, 5]
var arr2 = arr.sort(function(a, b) {
    // 从小到大排序
    return a - b
    
    // 从大到小排序
    return b - a
})
console.log(arr2)
复制代码

map

var arr = [1, 2, 3, 4]
var arr2 = arr.map(function(item, index) {
    // 将元素从新组装，并返回
    return '<b>' + item + '</b>'
})
console.log(arr2)
复制代码

filter

var arr = [1, 2, 3]
var arr2 = arr.filter(function(item, index) {
    // 经过某一个条件过滤数组
    if (item >= 2) {
        feturn true
    }
})
console.log(arr2)
复制代码

对象API

var obj = {
    x: 100,
    y: 200,
    z: 300
}
var key
for (key in obj) {
    // 注意这里的 hasOwnProperty，在讲原型链的时候讲过了
    if (obj.hasOwnProperty(key)) {
        console.log(key, obj[key])
    }
}
复制代码

4-7 其余知识点-知识点代码演示

4-8 其余知识点-解答

解答

获取2017-06-10格式的日期
获取随机数，要求是长度一致的字符串格式
写一个能遍历对象和数组的通用forEach函数

获取2017-06-10格式的日期

function formatDate(dt) {
    if (!dt) {
        dt = new Date()
    }
    var year = dt.getFullYear()
    var month = dt.getMonth() + 1
    var date = dt.getDate()
    return year + '-' + month.toString().padStart(2, '0') + '-' + date.toString().padStart(2, '0')
}
formatDate(new Date())
复制代码

获取随机数，要求是长度一致的字符串格式

var random = Math.random()
random = random + '0000000000'
random = random.slice(0, 10)
console.log(random)
复制代码

写一个能遍历对象和数组的通用forEach函数

function forEach(obj, fn) {
    var key
    if (obj instanceof Array) {
        obj.forEach(function(item, index) {
            fn(index, item)
        })
    } else {
        for (key in obj) {
            fn(key, obj[key])
        }
    }
}

var arr = [1, 2, 3]
// 注意，这里参数的顺序换了，为了和对象的遍历格式一致
forEach(arr, function(index, item) {
    console.log(index, item)
})

var obj = { x: 100, y: 200 }
forEach(obj, function(key, value) {
    console.log(key, value)
})
复制代码

重点总结

日期
Math
数组API
对象API

4-9 其余知识点-代码演示

第5章 JS-Web-API（上）

5-1 从基础只是到JSWebAPI

从基础只是到JS-Web-API

回顾JS基础只是
JS-Web-API
总结

回顾JS基础知识

变量类型和计算
原型和原型链
闭包和做用域
异步和单线程
其余（如日期、Math、各类经常使用API）
特色：表面看起来并不能用于工做中开发代码
内置函数：Object Array Boolean String ...
内置对象：Math JSON ...
咱们连在网页弹出一句hello world都不能实现

JS-Web-API

JS基础知识：ECMA262标准
JS-Web-API：W3C标准

W3C标准中关于JS的规定有：

DOM操做
BOM操做
事件绑定
ajax请求（包括http协议）
存储

页面弹框是window.alert(123)，浏览器须要作：

定义一个window全局变量，对象类型
给他定义一个alert属性，属性值是一个函数

获取元素document.getElementById(id)，浏览器须要：

定义一个document全局变量，对象类型
给它定义一个getElementById的属性，属性值是一个函数

可是W3C标准没有规定任何JS基础相关的东西

无论什么变量类型、原型、做用域和异步
只管定义用于浏览器中JS操做页面的API和全局变量

全面考虑，JS内置的全局函数和对象有哪些？

以前讲过的Object Array Boolean String Math JSON 等
刚刚提的window document
接下来还有继续讲到的全部未定义的全局变量，如navigator.userAgent

总结

常说的JS（浏览器执行的JS）包含两部分：

JS基础知识（ECMA262标准）
JS-Web-API（W3C标准）

5-2 DOM本质

DOM操做（Document Object Model）

题目
知识点
解答

题目：

DOM是哪一种基本的数据结构？
DOM操做的经常使用API有哪些？
DOM节点的attr和property有何区别？

知识点：

DOM本质
DOM节点操做
DOM结构操做

DOM的本质

<?xml version="1.0" encoding="utf-8"?>
<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body> <other> <a></a> <b></b> </other> </note> 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div>
    <p>this is p</p>
  </div>
</body>
</html>
复制代码

DOM本质：浏览器拿到html代码后，DOM把html代码结构化成浏览器可识别以及js可识别的东西。

html代码就是一个字符串，可是浏览器已经把字符串结构化成树形结构了。

5-3 DOM节点操做

DOM能够理解为：

浏览器把拿到的html代码，结构化成一个浏览器能识别而且js可操做的一个模型而已。

DOM节点操做

获取DOM节点
Property
Attribute

获取DOM节点

var div1 = document.getElementById('div1') // 元素
var divList = document.getElementsByTagName('div') // 集合
console.log(divList.length)
console.log(divList[0])

var containerList = document.getElementsByClassName('.container') // 集合
var pList = document.querySelectorAll('p') // 集合
复制代码

Property

var pList = document.querySelectorAll('p')
var p = pList[0]
console.log(p.style.width) // 获取样式
p.style.width = '100px' // 修改样式
console.log(p.className) // 获取class
p.className = 'p1' // 修改class

// 获取nodeName 和 nodeType
console.log(p.nodeName)
console.log(p.nodeType)
复制代码

Attribute

var pList = document.querySelectorAll('p')
var p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name', 'imooc')
p.getAttribute('style')
p.setAttribute('style', 'font-size: 30px;')
复制代码