JS之DOM详解（上）

想弄清楚一个知识点就离不开咱们的三连问：它是什么？它有什么用？怎么去使用它?

一、何为DOM？

大家都知道前端界面的组成有三个重要组成部分HTML、CSS、JS（分别为结构、表现、行为）

其中JS的的三个重要组成部分为：ES（核心语法）、DOM（文本对象模型）、BOM（浏览器对象模型）

关于DOM先看看几个解释

W3school给予的解释：

百度百科给予的解释：

可能看了这段文字还是有点难以理解DOM，那么我们再往深点在挖一挖，研究研究

在当我们打开一个页面，加载完html文件后，浏览器首先做的就是解析html代码并开始绘制节点树，也就是说，我们删除标签元素，添加标签元素，改变标签元素的大小，改变标签元素的内容，其实就是在删除DOM节点，添加DOM节点，改变DOM节点的大小，也就是说在DOM节点树上进行操作。

这里面出现了一个重要的东西--DOM节点树

以上就是DOM节点树，通俗点讲document(文档) 就是一切元素的祖宗，而这个祖宗的下面只有一个就是<html>被称为 根元素下面又是根元素的两个女儿<head>和<body>，然后儿子下面又有儿子、孙子

直接怼代码

<body>
    <div>
        <p>
            <span>
                <a href="">
                </a>
            </span>
        </p>
        <i></i>
    </div>
    <div>
        <h1>
    </div>
</body>

如上：<body>下面有两个儿子<div>,<div>下面分别又有自己的儿子孙子，就是这个家族图谱组成了一个树形结构，这个树形结构被称为DOM节点树。

上面扯一大堆简单点来说 DOM本质上就是一种接口（API)，是专门操作网页内容的API标准，它允许脚本(js)控制Web页面、窗口和文档。

我们可以利用DOM来找到一个元素，并找寻他的父母、兄弟、祖先，来进行增、删、改、查。

二、DOM的作用？

DOM基本作用：

查询某个元素
查询某个元素的祖先、兄弟以及后代元素
获取、修改元素的属性
获取、修改元素的内容
创建、插入和删除元素

通过上面的讲解其实已经很明白了DOM就是来获取元素然后对元素进行各种操作的，那么有哪些方法获取呢？

基本查询方法如下：

document.getElementById('id属性值'); //返回拥有指定id的第一个对象的引用

document.getElementsByClassName('class属性值'); //返回拥有指定class的对象集合

document.getElementsByTagName('标签名');// 返回拥有指定标签名的对象集合

document.getElementsByName('name属性值');// 返回拥有指定名称的对象结合

document.querySelector('CSS选择器'); //仅返回第一个匹配的元素

通过代码体验一波

<body>
    <ul id="myList">
        123
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div id="num">123</div>
<script>
    var select = document.getElementById('num');//通过ID找
    console.log(select);//=><div id="num">123</div>
</script>
<body>

上面是直接查找，那么怎么通过家族关系来查呢？

遍历节点树

parentNode;//父节点
childNodes;//子节点
firstchild；//第一个儿子
lastchild;//最后一个儿子
nextSibling;//紧紧跟在他后面的兄弟
previonsSibling;//紧紧跟在他前面的兄弟

代码来喽！！！

<body>
    <ul id="myList">
        123
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div id="num">123</div>
<script>
    var select = document.getElementById('myList').childNodes;//通过ID找到ul在找他们子节点
    console.log(select);//=><div id="num">123</div>
</script>
<body>

输出结果为：

问题来了！！！为啥ul下面只有三个li，获取ul的子节点长度却为7

---这是因为上面按关系型的方法是遍历节点树的方法，查找到了ul的所有子节点，里面的换行也是他的子节点，所以不止我们看到的三个还有，没看到的文本节点--text。这又涉及到了节点类型
我们常见的节点类型有：元素节点、属性节点、文本节点、注释节点、document...