JavaScript|打了BOM，来了DOM（）开发语言|DOM|HTML|CSS|javascript

个人简介

??个人主页：微风洋洋?♂?
博客领域：编程基础,后端
写作风格：干货,干货,还是tmd的干货
精选专栏：【JavaScript】
支持洋锅：点赞、收藏?、留言

好久不见，甚是想念！
大家好！我是微风洋洋

【JavaScript|打了BOM，来了DOM（）】之前洋锅花了两篇文章来介绍BOM，没想到刚讲完啦BOM，就来了DOM。就好像是打了小的，来了老的，是不是玩不起？
那DOM有时何许人也？是BOM的爹地嘛？

传送门
什么，BOM指的是物料清单？
JavaScript实现“双11”秒杀，你也可以

文章目录

一、DOM对象简介
- 什么是DOM
- DOM HTML节点树
- DOM对象的继承关系
二、DOM节点操作
- 获取节点
- 节点追加
- 节点删除

一、DOM对象简介

什么是DOM DOM：Document Object Model，文档对象模型。
作用：是一套规范文档内容的通用型标准。
DOM发展历史
1.

时间：1998年10月。
事件：DOM正式成为W3C的推荐标准。
名称：第1级DOM（DOM Level 1，或DOM1）。
作用：为XML和HTML文档中的元素、节点、属性等提供了必备的属性和方法。
参考：最初结合了Netscape及微软公司开发的DHTML（动态HTML）思想。

时间：2000年11月。
事件：发布了第2级DOM（DOM Level 2，或DOM2）。
作用：在DOM1的基础上增加了样式表对象模型。

名称：第3级DOM（DOM Level 3，或DOM3）。
作用：在DOM2基础上增加了内容模型、文档验证以及键盘鼠标事件等功能。
提示：直到目前为止，DOM几乎被所有浏览器所支持。

DOM HTML节点树 DOM HTML指的是DOM中为操作HTML文档提供的属性和方法。

文档（Document）表示HTML文件。
文档中的标签称为元素（Element）。
文档中的所有内容称为节点（Node）。

因此，一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分

文章图片

HTML文档根据节点作用，分为标签节点、文本节点、属性节点和注释节点。
各节点之间的关系，又可分为以下几个方面：
根节点：标签是整个文档的根节点，有且仅由一个。
子节点：指的是某一个节点的下级节点。
父节点：指的是某一个节点的上级节点。
兄弟节点：两个节点同属于一个父节点。

DOM对象的继承关系通过前面的学习可以知道，在JavaScript中要对网页中的元素进行操作，可以利用document对象的getElementById()方法实现，但是此方法的返回值类型是什么？下面通过代码进行查看。

文章图片

文章图片

总结

document和Element是两种不同类型的节点（Node）对象。
它们不仅能够使用Node对象的一系列属性和方法完成节点操作。
也可以使用特有的属性和方法完成不同类型节点的操作。

文章图片

除了document和Element对象，还有其他几种类型的节点对象也继承Node对象，如文本（Text）、注释（Comment）等。

举个例子

文章图片

代码实现

> var test = document.getElementById('test'); console.log(test); // 输出结果： console.log(test.__proto__); // 输出结果：HTMLDivElement { …… } > var test = document.getElementById('test'); console.log(test.nodeName); // 通过节点方式获取节点名，输出结果：DIV console.log(test.tagName); // 通过元素方式获取标签名，输出结果：DIV console.log(document.nodeName); // document属于节点，输出结果：#document console.log(document.tagName); // document不属于元素，输出结果：undefined > var test = document.getElementById('test'); test.nodeType === Node.ELEMENT_NODE; // 比较结果：true document.nodeType === Node.DOCUMENT_NODE; // 比较结果：true >

文章图片

二、DOM节点操作

获取节点由于HTML文档可以看做是一个节点树，因此，可以利用操作节点的方式操作HTML中的元素。

文章图片

childNodes属性与前面学习过的children属性的区别。
相同点：都可以获取某元素的子元素。
不同点： childNodes属性用于节点操作，返回值中还会包括文本节点等其他类型的节点，是一个NodeList对象的集合。 children属性用于元素操作，返回的是HTMLCollection对象的集合
举个例子

文章图片

代码实现

节点操作 - 锐客网 JS BOM DOM > var ul = document.getElementById('ul'); // 根据id获取ul的元素对象 console.log(ul.childNodes); // 查看ul下的所有节点

注意
childNodes属性在IE6~8不会获取文本节点，在IE9及以上版本和主流浏览器中则可以获取文本节点。
此外，由于document对象继承自Node节点对象，因此document对象也可以进行以上的节点操作。

文章图片

节点追加在获取元素的节点后，还可以利用DOM提供的方法实现节点的添加，如创建一个li元素节点，为li元素节点创建一个文本节点等。

文章图片

create系列的方法是由document对象提供的，与Node对象无关。
举个例子

文章图片

代码实现

节点追加 - 锐客网 > var h2 = document.createElement('h2'); // 创建h2元素节点 var text = document.createTextNode('Hello JavaScript'); // 创建文本节点 var attr = document.createAttribute('align'); // 创建属性节点 attr.value = 'https://www.it610.com/article/center'; // 为属性节点赋值 h2.setAttributeNode(attr); // 为h2元素添加属性节点 h2.appendChild(text); // 为h2元素添加文本节点 document.body.appendChild(h2); // 将h2节点追加为body元素的子节点 console.log(document.getElementsByTagName('h2')[0]);

节点删除语法：removeChild()和removeAttributeNode()方法实现。
返回值：是被移出的元素节点或属性节点。
举个例子

文章图片

代码实现

删除节点和节点属性 - 锐客网 PHP JavaScript UI > var child = document.getElementsByTagName('li')[2]; // 获取第3个li元素 var attr = child.getAttributeNode('class'); // 获取元素的class属性值 console.log(child.removeAttributeNode(attr)); // 删除元素的class属性值 console.log(child.parentNode.removeChild(child)); // 删除元素

如果觉得这篇文章对你有一丢丢启发的话，不妨 点赞、收藏?、留言支持一下，你的支持将是我继续创作的最大动力??????
由于作者水平有限，如有错误和不准确之处在所难免，本人也很想知道这些错误，恳望读者批评指正！