文章目录





一、DOM 方式获取标签元素



1、DOM 方式获取标签元素


之前的博客 中 , 介绍了 使用 DOM 方式 获取元素 , 如 :

  • getElementById() 通过 标签 id 获取对应的标签 ;
  • getElementsByTagName() 通过 标签名称 获取符合要求的 多个元素 ;
  • querySelector() 通过 标签选择器 选择多个元素 ;

2、DOM 方式获取标签元素的弊端


DOM 方式获取标签元素 的 弊端 : 上述 获取 标签元素 的 方法 , 使用起来非常 繁琐 , 而且每个获取元素的方法 都是互相独立的 , 标签元素之间 的 逻辑性教差 ;


如给定如下结构的 HTML 页面 :

    <div>div</div>
    <span>span</span>
    <ul>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
    </ul>
    <div class="box">
        <span class="erweima">×</span>
    </div>

如果 想要获取 <div>div</div> 元素 , 需要使用 document.querySelector("div") 获取对应的 标签元素 ;

如果 想要 继续 获取 <span>span</span> 元素 , 需要使用 document.querySelector("span") 获取对应的 标签元素 ;

如果想要 获取 ul 标签下的 li 标签 , 需要先获取 ul 标签元素 , 然后再获取下面的 li 子元素 ;

const liElements = document.querySelectorAll('ul li');

上述 三个获取标签元素的操作 , 都是互相独立的 , 且不知道三个标签元素之间的关系 , 逻辑性也不强 ;


3、DOM 方式获取标签元素示例


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点操作</title>
</head>

<body>
    <div>div</div>
    <span>span</span>
    <ul>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
    </ul>
    <div class="box">
        <span class="erweima">×</span>
    </div>
    <script>
        // DOM 方式获取标签元素
        var box = document.querySelector('.box');
        console.dir(box);
    </script>
</body>

</html>

执行结果 :

在这里插入图片描述





二、节点简介



1、DOM 节点概述


HTML 页面中 的内容 都是 节点 , 包括 : 标签 , 属性 , 文本 , 注释 等 ;

在一个 HTML 结构中 , 所有的 DOM 节点 组成一个 DOM 树 , 根节点是 document 文档节点 , 所有的 DOM 节点 都可以被 创建、访问、修改、 删除 ;

  • 根节点 是 document 文档节点 ;
  • 普通的 HTML 标签 是 元素节点 ;
  • 元素节点下 有 属性节点 和 文本节点 ;

2、节点基本属性 - 节点类型、节点名称、节点值


每个 DOM 节点 都有 三个基本属性 , 这些属性描述了节点的 特征 和 行为 ;

  • 节点类型 nodeType : 用于 区分不同节点类型 , 便于在脚本中处理 ;
    • 1 : 元素节点 ;
    • 2 : 文本节点 ;
    • 3 : 注释节点 ;
    • 4 : 文档节点 ;
  • 节点名称 nodeName : 表示节点的名称 , 是一个字符串值 , 具体取决于节点类型 , 用于标识节点的名称 , 常用于遍历或筛选节点 ;
    • 元素节点 : 返回标签名 , 大写形式 , 如 "DIV ;
    • 文本节点 : 返回 “#text” ;
    • 注释节点 : 返回 “#comment” ;
    • 文档节点 : 返回 “#document” ;
  • 节点值 nodeValue : 表示节点的值 , 是一个 字符串 或 null , 具体取决于节点类型 , 其作用是 获取或设置节点的内容 , 适用于文本处理 ;
    • 元素节点 : 通常为 null , 因为元素节点无直接值 ;
    • 文本节点 : 返回文本内容 ;
    • 注释节点 : 返回注释内容 ;

在 DOM 操作中 , 一般操作的是 元素节点 ;

一般不会操作 注释节点 , 注释节点没有太大意义 ;


3、代码示例


在下面的代码中 , 通过 box.nodeType 获取节点类型 , 通过 box.nodeName 获取节点名称 , 通过 box.nodeValue 获取节点值 ;


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点操作</title>
</head>

<body>
    <div>div</div>
    <span>span</span>
    <ul>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
    </ul>
    <div class="box">
        <span class="erweima">×</span>
    </div>
    <script>
        // DOM 方式获取标签元素
        var box = document.querySelector('.box');
        console.dir(box);
        console.log(box.nodeType); // 输出 : 1 (元素节点)
        console.log(box.nodeName); // 输出 : "DIV"
        console.log(box.nodeValue); // 输出 : null
    </script>
</body>

</html>

执行结果 :

在这里插入图片描述

点击 div.box 左侧的 展开按钮 , 查看完整的 节点属性 , 其中就包含了 nodeName , nodeType , nodeValue 三个属性 ;

在这里插入图片描述

# javascript # 前端 # java
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

SeedVR2终极指南：如何用单步扩散模型实现专业级视频修复

还在为老旧视频的模糊画质而烦恼吗？面对抖动严重的监控录像或褪色的家庭影像，你是否曾希望有一种简单高效的修复方案？SeedVR2正是为解决这些痛点而生的一站式视频修复工具。作为字节跳动推出的先进视频修复模型，它能够在单步推理中实现专业级的视频质量提升，彻底改变了传统视频修复的工作流程。## 核心价值：为什么选择SeedVR2进行视频修复？**传统视频修复的三大瓶颈**：1. **计算成本高

avatar AI Agent技术社区

深度解析Amlogic S9xxx电视盒子Armbian系统：从闲置设备到Linux服务器的终极实战指南

你是否拥有一台闲置的Amlogic S9xxx系列电视盒子？想让它摆脱单一的视频播放功能，变身为功能强大的Linux服务器、开发平台或家庭媒体中心？本指南将为你详细解析如何通过Armbian系统实现这一转变，让你的电视盒子重获新生，成为高性能的Linux设备。Armbian系统基于Debian/Ubuntu构建，专为ARM芯片优化，提供了完整的Linux生态支持。## 🎯 核心价值与独特优势

avatar AI Agent技术社区

CANN/runtime Event管理API

本章节描述 CANN Runtime 的 Event 管理接口，用于事件的创建、记录、同步、计时及 IPC 跨进程共享。- [`aclError aclrtCreateEvent(aclrtEvent *event)`](#aclrtCreateEvent)：创建Event，创建出来的Event可用于统计两个Event之间的耗时、多Stream之间的任务同步等场景。- [`aclError

avatar AI Agent技术社区