一、DOM的概念

DOM是Document Object Mode的缩写，意思是文档对象模型——将HTML文档抽象成模型，再封装对象方便用程序操作。

将现实世界的事物抽象成模型，使用对象来量化的描述现实事物，从而把生活中的问题转化成一个程序问题，最终实现用应用软件协助解决现实问题。

二、DOM树

浏览器把HTML文档从服务器上下载下来之后就开始按照从上到下的顺序读取HTML标签。每一个标签都会被封装成一个对象。

第一个读取的肯定是根标签html，然后是它的子标签head，再然后是head标签里的子标签…所以从html标签开始，整个文档中的所有标签都会根据它们之间的父子关系被放到一个树形结构的对象中。

包含了所有标签对象的整个树形结构对象就是JavaScript中的一个可以直接使用的内置对象：document。

三、各个组成部分的类型

这个文档中的一切都可以看做Node。各个具体组成部分的具体类型可以看做Node类型的子类。

组成部分

节点类型

具体类型

整个文档

文档节点

Document

HTML标签

元素节点

Element

HTML标签内的文本

文本节点

Text

HTML标签内的属性

属性节点

Attr

注释

注释节点

Comment

四、DOM的操作

4.1 在整个文档范围内查询元素节点

功能

API

返回值

根据id值查询

document.getElementById(“id值”)

一个具体的元素节点

根据标签名查询

document.getElementsByTagName(“标签名”)

元素节点数组

根据name属性值查询

document.getElementsByName(“name值”)

元素节点数组

根据类名查询

document.getElementsByClassName(“类名”)

元素节点数组

4.2 在具体元素节点范围内查找子节点

功能

API

返回值

查找子标签

element.children

返回子标签数组

查找第一个子标签

element.firstElementChild

标签对象

查找最后一个子标签

element.lastElementChild

节点对象

4.3 查找指定元素节点的父节点

功能

API

返回值

查找指定元素节点的父标签

element.parentElement

标签对象

4.4 查找指定元素节点的兄弟节点

功能

API

返回值

查找前一个兄弟标签

node.previousElementSibling

标签对象

查找后一个兄弟标签

node.nextElementSibling

标签对象

4.5 根据选择器查找标签

功能

API

返回值

根据选择器查找一个标签

document.querySelector(“选择器”)

标签对象

根据选择器查找多个标签

document.querySelectorAll(“选择器”)

标签数组

4.6 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM查找节点</title>
</head>
<body>
    <input type="text" id="username">
    <input type="text" class="c1">
    <input type="text" class="c1">
    <script>
        // 根据id查询标签
        var elementById = document.getElementById("username");
        console.log(elementById)

        // 根据类名查询标签
        var elementsByClassName = document.getElementsByClassName("c1");
        console.log(elementsByClassName)

        // 根据标签名查询标签
        var elementsByTagName = document.getElementsByTagName("input");
        console.log(elementsByTagName)

        // 查找子节点
        var element = document.getElementsByTagName("body")[0].childNodes;
        console.log(element)

        // 查找子标签
        var children = document.getElementsByTagName("body")[0].children;
        console.log(children)

        // 查找父节点（id为username的标签的父节点）
        var parentNode = document.getElementById("username").parentNode;
        console.log(parentNode)

        // 查找id为username的标签的前一个兄弟节点
        var previousSibling = document.getElementById("username").previousSibling;
        console.log(previousSibling)

        // 查找id为username的标签的前一个兄弟标签
        var previousElementSibling = document.getElementById("username").previousElementSibling;
        console.log(previousElementSibling)

        // 查找id为username的标签的后一个兄弟标签
        var nextElementSibling = document.getElementById("username").nextElementSibling;
        console.log(nextElementSibling)

        // 根据选择器查找标签
        // 基本
        // #id
        // element
        // .class
        // selector1,selector2,selectorN
        // 层级
        // ancestor descendant 所有后代
        // parent > child
        // prev + next 后面的第一个兄弟
        // prev ~ siblings 后面的所有兄弟
        // 根据选择器查找一个标签
        var querySelector = document.querySelector("#username");
        console.log(querySelector)

        // 根据选择器查找多个标签
        var querySelectorAll = document.querySelectorAll(".c1");
        console.log(querySelectorAll)


    </script>
</body>
</html>

4.7 属性操作

需求

操作方式

读取属性值

元素对象.属性名

修改属性值

元素对象.属性名 = 新的属性值

4.8 标签体的操作

需求

操作方式

获取或者设置标签体的文本内容

element.innerText

获取或者设置标签体的内容

element.innerHTML

4.9 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作标签的属性和文本</title>
</head>
<body>
    <input type="text" id="username" name="username">
    <div id="d1">
        你好世界
    </div>

    <div id="d2">
        <h1>你好世界</h1>
    </div>
    <script>
        // 目标：获取id为username的输入框的value

        // 1. 找到要操作的标签
        var ipt = document.getElementById("username");

        // 设置标签的value
        ipt.value = "马超"

        // 2. 获取标签的value属性的值
        var value = ipt.value;
        console.log(value)


        // 获取id为d1的div中的文本内容
        // 获取标签的文本：element.innerText，获取文本的时候会将左右两端的空格去掉
        var innerText = document.getElementById("d1").innerText;
        console.log(innerText)

        var innerText2 = document.getElementById("d2").innerText;
        console.log(innerText2)

        // 获取标签体的内容：element.innerHTML，获取标签体的内容
        var innerHTML = document.getElementById("d2").innerHTML;
        console.log(innerHTML)

        // 设置标签体的内容：建议使用innerHTML
        document.getElementById("d2").innerHTML="<p>你好不？世界</p>"

        var innerHTML2 = document.getElementById("d2").innerHTML;
        console.log(innerHTML2)
    </script>
</body>
</html>

4.10 DOM增删改操作

API

功能

document.createElement(“标签名”)

创建元素节点并返回，但不会自动添加到文档中

document.createTextNode(“文本值”)

创建文本节点并返回，但不会自动添加到文档中

element.appendChild(ele)

将ele添加到element所有子节点后面

parentEle.insertBefore(newEle,targetEle)

将newEle插入到targetEle前面

parentEle.replaceChild(newEle,oldEle)

用新节点替换原有的旧子节点

element.remove()

删除某个标签

element.innerHTML

读写HTML代码

4.11 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建和删除标签</title>
</head>
<body>
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
        <li id="sz">深圳</li>
        <li>广州</li>
    </ul>

    <script>
        // 目标：在城市列表中添加一个子标签<li id="cs">长沙</li>
        // 1. 创建一个li标签<li></li>
        var liElement = document.createElement("li");
        // 2. 给创建的li标签设置id属性和文本
        liElement.id="cs"
        liElement.innerText="长沙"
        // 3. 将创建的li标签添加到城市列表中（ul）
        var cityUl = document.getElementById("city");
        // 父.appendChild(子)将子标签添加到父标签的最后面
        // cityUl.appendChild(liElement)

        // 目标：在城市列表的“深圳“之前添加一个字标签<li id="cs">长沙</li>
        var szElement = document.getElementById("sz");
        // 父.insertBefore(新标签,参照标签)
        // cityUl.insertBefore(liElement,szElement)

        // 目标：在城市列表中添加一个子标签替换深圳<li id="cs">长沙</li>
        // 父.replaceChild(新标签，被替换的标签)
        // cityUl.replaceChild(liElement,szElement)

        // 目标：在城市列表中删除深圳
        szElement.remove()

        // 目标：清楚城市中的所有城市。
        cityUl.innerHTML=""
    </script>
</body>
</html>

学海无涯苦作舟