JS之一篇文章让你学会DOM，确定不来看看嘛

tips:本博客内容是我学习b站黑马pink老师的DOM课程总结来的呦

OK！既然点开了，就和我一起来征服传说中的DOM吧！

第一关：我的标题上又有JS又有DOM哎，那它们的关系是啥你知道吗？

我们来看看这个关系图，在学DOM之前，我们应该具备的是学习了JS语法！当你学了JS语法之后，再来学DOM和BOM，加起来，就是整个JS的世界啦～

第二关：DOM是个啥？

下面是DOM的官方定义，但对我来说的话，DOM其实就是JS的接口，有了这个接口，我们才能用JS来操作浏览器啦～ 

第三关：DOM里你最应该知道的东西！DOM树！

如图所述，DOM就是把页面里的所有东西放到树里，每个东西都是节点。 

 第四关：最重要的一关！DOM能用来干啥呢？

DOM是对元素的操作：主要有创建、增、删、改、查、属性操作、事件操作。

1.创建：

document.write;

innerHTML;

createElement;

它们三个都可以动态创建元素，区别是：

 

觉得这样太生涩的话可以自己敲代码试试哦，这部分也是前端面试经常考的题目。

2.添加数据：

appendChild:可以添加到元素后

insertBefore：添加到元素前 

这里可以用代码看出来：

 3.删除节点

这个就没啥好说的啦，会这个属性就ok!

4.更改节点

这部分其实很复杂，因为DOM可以对整个页面HTML进行操作，所以从理论上来说，是可以更改所有节点的，下列所描述的都是可以更改的！但每个展开来说的话就要好长的篇幅，大家想详细了解每一种的实现的话可以去看b站上黑马pink老师的DOM和BOM课哦（不是卖课的！）

 5.查找节点

这一节很重要！平时经常用的其实也就是这些：

第一个就是通过id或标签名来查找的元素；

第二个就有意思了：

 

这些是H5新提的一些方法，对ie8以下会不兼容～但很好用就是了！

 第三个也很重要！我笔试有遇到过！首先要了解 为什么要用节点来获取元素：

还有一个问题，HTML页面里所有都是节点，但我们平时做更改的是属性节点，所以要知道怎么能判断它是属性节点呢？ 

当然是当nodeType为2的时候啦！

 

 6.属性操作：这部分还好，知道下就行

7.事件操作：这部分用的也好多的！

DOM的操作到这里就差不多啦！还有一些升级版的DOM（就是往深了学的DOM）下次再更！