零基础入门JavaWeb——JS的文档对象模型（DOM）

最新推荐文章于 2023-04-23 17:02:11 发布

程序员丶星霖

最新推荐文章于 2023-04-23 17:02:11 发布

阅读量342

点赞数

分类专栏：前端技术文章标签： javascript 前端服务器

本文链接：https://blog.csdn.net/HunterArley/article/details/128110546

版权

前端技术专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、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>