javascript复习：JS-Web-API-DOM

JavaScript 评论

补充知识

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

JS Web API

  • DOM (domcument object model，即文档对象模型)
  • BOM (browser object model的缩写，简称浏览器对象模型)
  • 事件绑定
  • ajax
  • 存储

题目：

  • DOM 是那种数据结构
  • DOM 操作的常用API
  • attr 和 property 的区别
  • 一次性插入多个DOM节点，考虑性能
    知识点
  • DOM 本质
    树
  • DOM 节点操作
    • 获取节点
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      document.getElementById('div1');
      document.getElementsByClassName('div1')  // 集合
      document.getElementsByTagName('dev')   // 集合
      document.querySelectorAll('p')   // 集合

      const pList = document.querySelectorAll('p');
      const p1 = pList[0];

      // property 形式
      p1.style.width = '100px';
      p1.className = 'red';
      console.log(p1.className);
      console.log(p1.nodeName);
      console.log(p1.nodeType);


    • attribute
      1
      2
      3
      4
      // attribute：
      p1.setAttribute('data-name', 'lxl')
      console.log(p1.getAttribute('data-name'));
      p1.setAttribute('style', 'font-size: 18px;')
  • DOM 结构操作
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    // 新增/插入节点
    const div1 = document.getElementById('div1');

    // 添加新节点
    const p1 = document.createElement('p')
    p1.innerHTML = 'this is p1';
    div1.appendChild(p1);

    // 移动已有节点，是移动
    const p2 = document.getElementById('p2');
    div1.appendChild(p2);


    // 获取子元素列表
    const div1 = document.getElementById('div1');
    const child = div1.childNodes;
    console.log(child)

    // 获取父元素
    const div1 = document.getElementById('div1');
    const parent = div1.parentNode;
    console.log(parent)

    // 删除节点
    const div1 = document.getElementById('div1');
    const child = div1.childNodes;
    div1.removeChild(child[0])

  • DOM 性能
    DOM 操作非常昂贵，避免频繁的DOM操作
    对DOM 查询做缓存
    将频繁操作改为一次操作
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const div1 = document.getElementById('div1');
    const frag = document.createDocumentFragment();

    for (let i = 0; i < 10; i++) {
        const p = document.createElement('p');
        p.innerHTML = `${i}  后期插入`;
        frag.appendChild(p);
    }
    div1.appendChild(frag)

问题回答： DOM 是那种数据结构

树（DOM树）

问题回答： DOM 操作的常用API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 获取dom
document.getElementById('div1');
document.getElementsByClassName('div1')  // 集合
document.getElementsByTagName('dev')   // 集合
document.querySelectorAll('p')   // 集合

// property 形式
p1.style.width = '100px';
p1.className = 'red';

// attribute：
p1.setAttribute('data-name', 'lxl')
p1.setAttribute('style', 'font-size: 18px;')


// 新增/插入节点
const div1 = document.getElementById('div1');

// 添加新节点
const p1 = document.createElement('p')
p1.innerHTML = 'this is p1';
div1.appendChild(p1);

// 移动已有节点，是移动
const p2 = document.getElementById('p2');
div1.appendChild(p2);


// 获取子元素列表
const div1 = document.getElementById('div1');
const child = div1.childNodes;
console.log(child)

// 获取父元素
const div1 = document.getElementById('div1');
const parent = div1.parentNode;
console.log(parent)

// 删除节点
const div1 = document.getElementById('div1');
const child = div1.childNodes;
div1.removeChild(child[0])

问题回答： attr 和 property 的区别

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

推荐文章 JS中attribute和property的区别 - L_mj - 博客园 (cnblogs.com)

问题回答： 一次性插入多个DOM节点，考虑性能

1
2
3
4
5
6
7
8
9
10
const div1 = document.getElementById('div1');
const frag = document.createDocumentFragment();

for (let i = 0; i < 10; i++) {
    const p = document.createElement('p');
    p.innerHTML = `${i}  后期插入`;
    frag.appendChild(p);
}
div1.appendChild(frag)

BruceLeeWeb Developer

个人简介。