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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70

    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="
    你好不？世界
    "    

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    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>
        // 目标：在城市列表中添加一个子标签
  • 长沙
    • 
        // 1. 创建一个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)

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

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    学海无涯苦作舟

  • 相关阅读:
    OPENCV--实现meanshift图像分割
    QoS小结
    燃煤发电 锅炉相关数据集！
    怎么把图片批量旋转？简单三招就可以实现
    LeetCode637 二叉树的层平均值
    LeetCode50天刷题计划（Day 16—— 两两交换链表中的节点（9.10-10.30）
    【蓝桥杯嵌入式】一、初识stm32
    计算机网络第三章——数据链路层（二）
    理论+实践，彻底掌握Vue自定义指令
    shell脚本的编写（输入、输出、变量、数组等的使用规范及实例）
  • 原文地址：https://blog.csdn.net/HunterArley/article/details/128110546