【JavaScript】第七章 JS-Web-API DOM&BOM

1. DOM是哪种基本的数据结构？
2. DOM操作常用API有哪些？
3. DOM节点的attr和property有何区别？
4. 如何检测浏览器的类型？
5. 拆解URL的各个部分

回顾JS基础知识

---

特点：表面看来并不能用于工作中开发代码

• 内置函数：Object、Array、Boolean、String等
• 内置对象：Math、JSON等
• 我们连在网页弹出一句hello world都不能实现

常说的JS（浏览器执行的JS）包含两部分：JS基础知识（ECMA262标准）和JS-Web-API（W3C标准）

• JS基础知识 ：ECMA262标准，只是一个规则
• JS-Web-API：W3C标准，没有规定任何JS基础相关的东西，不管什么变量类型、原型、作用域和异步，只管定义用于浏览器中JS操作页面的API和全局变量
• W3C标准中关于JS的规定有：DOM操作、BOM操作、事件绑定、Ajax请求（包括http协议）等
• NodeJS因为是基于JS所以符合ECMA262标准，但是其服务于服务器端，没有window、document等，而是有network、service等，不符合W3C标准

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

• 之前讲过的Object、Array、Boolean、String、Math、JSON
• 刚刚提到的window、document
• 所有未定义的全局变量，如navigator.userAgent

DOM本质

---

XML是一种可扩展的描述语言，可以描述任何结构化的数据

• 数据结构：树
• HTML是XML的一种特殊类型

DOM：浏览器把拿到的HTML代码，结构化一个浏览器能识别并且JS可操作性的一个模型

• Document 文档
• Object 对象
• Modal 模型

DOM节点操作

---

获取DOM节点

QuerySelector/QuerySelectorAll和getElementById/getElementsByClassName的区别

// div1、divList、containerList、pList都是JS对象
var div1 = document.getElementById('div1'); // 元素
var divList = document.getElementByTagName('div'); // 集合
console.log(divList.length);
console.log(divList[0]);

var containerList = document.getElementByClassName('.container'); // 集合
var pList = document.querySelectorAll('p'); // 集合

property

• 文档直接修改，查看源码即可看到修改
• 修改的是JS