【09】大厂面试知识总结 - 从JS基础知识到JS Web API

  • JS基础知识,规定语法(ECMA 262标准)
  • JS Web API,网页操作的API(W3C标准)
  • 前者是后者的基础,两者结合才能真正实际应用

JS基础知识

  • 变量的类型和计算
  • 原型和原型链
  • 作用域和闭包

JS Web API

  • DOM
  • BOM
  • 事件绑定
  • ajax
  • 存储

前言

  • vue和React框架应用广泛,封装了DOM操作
  • 但DOM操作一直都是前端工程师的基础、必备知识
  • 只会vue而不懂DOM操作的前端程序员,不会长久

DOM操作(Document Object Model)

  • 题目
    • DOM是哪种数据结构:树(DOM树)
    • DOM操作的常用API
    • attr和property的区别
    • 一次性插入多个DOM节点,考虑性能
  • 知识点
    • DOM本质
<?xml version="1.0" encoding="UTF-8">
<node>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body>
    <other>
        <a></a>
        <b></b>
    </other>
</node>

<!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节点操作
- DOM结构操作
- DOM性能
  • 解答

property和attribute

  • property:修改对象属性,不会体现到html结构中
  • attribute:修改html属性,会改变html结构
  • 两者都会引起DOM重渲染

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

const list = document.getElementById('list')

// 创建一个文档片段,此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment()

for (let i  = 0; i < 20; i++) {
    const li = document.createElement('li')
    li.innerHTML = `List item ${i}`

    // 先插入文档片段中
    frag.appendChild(li)
}

// 都完成之后,再统一插入到 DOM 结构中
list.appendChild(frag)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值