- DOM是哪种基本的数据结构?
- DOM操作常用API有哪些?
- DOM节点的attr和property有何区别?
- 如何检测浏览器的类型?
- 拆解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对象的标准属性,有关JS的属性