DOM常⻅的操作

⽂档对象模型 (DOM) 是 HTML 和 XML ⽂档的编程接⼝

创建节点

createElement创建新元素，接受⼀个参数，即要创建元素的标签名

createTextNode创建⼀个⽂本节点

createDocumentFragment⽤来创建⼀个⽂档碎⽚，它表⽰⼀种轻量级的⽂档，主要是⽤来存储临时节点，然后把⽂档碎⽚的内

容⼀次性添加到 DOM 中

createAttribute创建属性节点，可以是⾃定义属性

1 2	const dataAttribute = document.createAttribute('custom'); consle.log(dataAttribute);

查询节点

返回⼀个包含节点⼦树内所有与之相匹配的 Element 节点列表，如果没有相匹配的，则返回⼀个空

1 document.getElementById('id属性值');返回拥有指定id的对象的引⽤
2 document.getElementsByClassName('class属性值');返回拥有指定class的对象集合
3 document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
4 document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合
5 document/element.querySelector('CSS选择器'); 仅返回第⼀个匹配的元素
6 document/element.querySelectorAll('CSS选择器'); 返回所有匹配的元素
7 document.documentElement; 获取⻚⾯中的HTML标签
8 document.body; 获取⻚⾯中的BODY标签
9 document.all['']; 获取⻚⾯中的所有元素节点的对象集合型

节点列表

更新节点

添加节点

appendChild把⼀个⼦节点添加到⽗节点的最后⼀个⼦节点

删除节点

BOM (Browser Object Model)

浏览器对象模型，提供了独⽴于内容与浏览器窗⼝进⾏交互的对象

其作⽤就是跟浏览器做⼀些交互效果,⽐如如何进⾏⻚⾯的后退，前进，刷新，浏览器的窗⼝发⽣变

化，滚动条的滚动，以及获取客⼾的⼀些信息如：浏览器品牌版本，屏幕分辨率

浏览器的全部内容可以看成 DOM ，整个浏览器可以看成 BOM 。

== 和 ===区别

等于操作符

等于操作符⽤两个等于号（ == ）表⽰，如果操作数相等，则会返回 true

前⾯⽂章，我们提到在JavaScript中存在隐式转换。等于操作符（==）在⽐较中会先进⾏类型转换，

再确定操作数是否相等

遵循以下规则：

如果任⼀操作数是布尔值，则将其转换为数值再⽐较是否相等

如果⼀个操作数是字符串，另⼀个操作数是数值，则尝试将字符串转换为数值，再⽐较是否相等

如果⼀个操作数是对象，另⼀个操作数不是，则调⽤对象的 valueOf()⽅法取得其原始值，再根据前⾯

的规则进⾏⽐较

null和undefined相等

如果有任⼀操作数是 NaN ，则相等操作符返回 false

如果两个操作数都是对象，则⽐较它们是不是同⼀个对象。如果两个操作数都指向同⼀个对象，则相

等操作符返回true

下⾯进⼀步做个⼩结：

● 两个都为简单类型，字符串和布尔值都会转换成数值，再⽐较

● 简单类型与引⽤类型⽐较，对象转化成其原始类型的值，再⽐较

● 两个都为引⽤类型，则⽐较它们是否指向同⼀个对象

● null 和 undefined 相等

● 存在 NaN 则返回 false

全等操作符

全等操作符由 3 个等于号（ === ）表⽰，只有两个操作数在不转换的前提下相等才返回 true。即类型

相同，值也需相同

undefined 和 null 与⾃⾝严格相等

5.3区别

相等操作符（==）会做类型转换，再进⾏值的⽐较，全等运算符不会做类型转换

null 和 undefined ⽐较，相等操作符（==）为true，全等为false

typeof 与 instanceof 区别

typeof与instanceof都是判断数据类型的⽅法，区别如下：

● typeof会返回⼀个变量的基本类型，instanceof返回的是⼀个布尔值

● instanceof 可以准确地判断复杂引⽤数据类型，但是不能正确判断基础数据类型

● ⽽typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引⽤数据类型中，除了

function 类型以外，其他的也⽆法判断

可以看到，上述两种⽅法都有弊端，并不能满⾜所有场景的需求

如果需要通⽤检测数据类型，可以采⽤Object.prototype.toString，调⽤该⽅法，统⼀返回格

式“[object Xxx]”的字符串