当前位置: 首页 > news >正文

js-DOM02

1.DOM查询
    - 通过具体的元素节点来查询
        - 元素.getElementsByTagName()
            - 通过标签名查询当前元素的指定后代元素
            
        - 元素.childNodes
            - 获取当前元素的所有子节点
            - 会获取到空白的文本子节点
        
        - 元素.children
            - 获取当前元素的所有子元素
        
        - 元素.firstChild
            - 获取当前元素的第一个子节点
        
        - 元素.lastChild
            - 获取当前元素的最后一个子节点
        
        - 元素.parentNode
            - 获取当前元素的父元素
        
        - 元素.previousSibling
            - 获取当前元素的前一个兄弟节点
        
        - 元素.nextSibling
            - 获取当前元素的后一个兄弟节点
            
    innerHTML和innerText
        - 这两个属性并没有在DOM标准定义,但是大部分浏览器都支持这两个属性
        - 两个属性作用类似,都可以获取到标签内部的内容,
            不同是innerHTML会获取到html标签,而innerText会自动去除标签
        - 如果使用这两个属性来设置标签内部的内容时,没有任何区别的    
        
    读取标签内部的文本内容
        <h1>h1中的文本内容</h1>
        元素.firstChild.nodeValue
                        元素            属性            文本
        nodeValue        null        属性值        #text
        nodeType        1            2                3
        nodeName        大写的标签名    属性名        #text 、 文本内容
        
    - document对象的其他的属性和方法
        document.all
            - 获取页面中的所有元素,相当于document.getElementsByTagName("*");
            
        document.documentElement
            - 获取页面中html根元素
            
        document.body
            - 获取页面中的body元素
            
        document.getElementsByClassName()
            - 根据元素的class属性值查询一组元素节点对象
            - 这个方法不支持IE8及以下的浏览器
            
        document.querySelector()
            - 根据CSS选择器去页面中查询一个元素
            - 如果匹配到的元素有多个,则它会返回查询到的第一个元素    
            
        document.querySelectorAll()    
            - 根据CSS选择器去页面中查询一组元素
            - 会将匹配到所有元素封装到一个数组中返回,即使只匹配到一个
            
2.DOM修改
    document.createElement()
        - 可以根据标签名创建一个元素节点对象
        
    document.createTextNode()
        - 可以根据文本内容创建一个文本节点对象
        
    父节点.appendChild(子节点)
        - 向父节点中添加指定的子节点
        
    父节点.insertBefore(新节点,旧节点)
        - 将一个新的节点插入到旧节点的前边
        
    父节点.replaceChild(新节点,旧节点)
        - 使用一个新的节点去替换旧节点
        
    父节点.removeChild(子节点)
        - 删除指定的子节点
        - 推荐方式:子节点.parentNode.removeChild(子节点)

总结:以上就是js-DOM02的内容,感谢您的观看!

相关文章:

js-DOM02

1.DOM查询 - 通过具体的元素节点来查询 - 元素.getElementsByTagName() - 通过标签名查询当前元素的指定后代元素 - 元素.childNodes - 获取当前元素的所有子节点 - 会获取到空白的文本子节点 …...

作为一名开发工程师,我对 ChatGPT 的一些看法

ChatGPT 又又火了。 ChatGPT 第一次爆火是2022年12月的时候,我从一些球友的讨论中知道了这个 AI 程序。 今年2月,ChatGPT 的热火更加猛烈,这时我才意识到,原来上次的热火只是我们互联网圈子内部火了,这次是真真正正的破圈了,为大众所熟悉了。 这个 AI 程序是一个智能问…...

Flask中基于Token的身份认证

Flask提供了多种身份认证方式&#xff0c;其中基于Token的身份认证是其中一种常用方式。基于Token的身份认证通常是在用户登录之后&#xff0c;为用户生成一个Token&#xff0c;然后在每次请求时用户将该Token作为请求头部中的一个参数进行传递&#xff0c;服务器端在接收到请求…...

波奇学数据结构:时间复杂度和空间复杂度

数据结构&#xff1a;计算机存储&#xff0c;组织数据方式。数据之间存在多种特定关系。时间复杂度&#xff1a;程序基本操作&#xff08;循环等&#xff09;执行的次数大O渐进法表示法用最高阶的项来表示&#xff0c;且常数变为1。F&#xff08;n&#xff09;3*n^22n1//F(n)为…...

移动OA办公系统为企业带来便捷办公

移动OA系统是指企业员工同手机等移动设备来使用OA办公系统&#xff0c;在外出差的员工只需要通过OA系统的手机APP就可以接收相关的新信息。PC办公与移动OA办公的相结合&#xff0c;构建用户单位随时随地办公的一体化环境。 相比PC办公&#xff0c;移动OA办公给企业带来更多的便…...

什么是Type-c口?Type-c口有什么优势?

什么是Type-C接口 Type-C接口有哪些好处坏处 说起“Type-C”&#xff0c;相信大家都不会陌生&#xff0c;因为最近拿它大做文章的厂商着实不少&#xff0c;但要具体说清楚Type-C是什么&#xff0c;估计不少人只能说出“可以正反插”“USB的一种”之类的大概。其实&#xff0c;T…...

Go开发者常犯的错误,及使用技巧 (1)

代码规范 命名不规范 变量名要有意义&#xff0c;不能随便取a,b,c 如果只是纯粹的算法题&#xff0c;这样问题不大。但工程上的代码可读性要求较高&#xff0c;不能随意命名变量名&#xff0c;例如&#xff1a; for _, v : range userList {// ... }如果for语句块简短还好&…...

Servlet 作业

一、填空题1. Servlet 中使用Session 对象的步骤为&#xff1a;调用HttpServletRequest.getSession()的得到Session对象&#xff0c;查看Session对象&#xff0c;在会话中保存数据。2. http 全称是_HyperText Transfer Protocol3. 用户可以有多种方式请求Servlet&#xff0c;如…...

Hive高阶函数:explode函数、Lateral View侧视图、聚合函数、增强聚合

Hive高阶函数 文章目录Hive高阶函数explode函数Lateral View侧视图原理语法聚合函数增强聚合grouping setsCUBEROLL UPexplode函数 explode接收map、array类型的数据作为输入&#xff0c;然后把输入数据中的每个元素拆开变成一行数据&#xff0c;一个元素一行。explode执行效果…...

信息系统服务管理

一、信息系统服务业及发展二、信息系统工程监理的概念及发展三、信息系统运行维护的概念和发展 IT服务管理&#xff08;ITSM) 四、信息技术服务管理的标准和框架 IT服务标准体系&#xff08;ITSS&#xff09; 一、信息系统服务业及发展 总结&#xff1a;前景很好 二、信息系…...

Windows10 安装ElasticStack8.6.1

一、安装ElasticSearch8.6.1 1.官网下载ElasticSearch8.6.1压缩包后解压 2.安装为服务 elasticsearch-service.bat install 3.运行 elasticsearch-service.bat start 4.通过浏览器访问 http://localhost:9200/ 提示需要登录&#xff0c;但不知密码是啥。 5.重置密码 ela…...

gRPC 非官方教程

一、 简介 gRPC的定义&#xff1a; 一个高性能、通用的开源RPC框架主要面向移动应用开发&#xff1a; gRPC提供了一种简单的方法来精确地定义服务和为iOS、Android和后台支持服务自动生成可靠性很强的客户端功能库。基于HTTP/2协议标准而设计&#xff0c;基于ProtoBuf(Protoc…...

6.2【人工智能与深度学习】RNN、GRU、远程服务管理、注意力、Seq2 搜索引擎和内存网络

【人工智能与深度学习】RNN、GRU、远程服务管理、注意力、Seq2 搜索引擎和内存网络底层原理介绍 深度学习架构循环神经网络(RNN)循环网络:摊开循环的网络的循环循环神经网络的技巧乘法模组注意模组门控循环单元(GRU)长期短期记忆(Long Short-Term Memory,简称LSTM)序列到序列…...

软件工程复习

软件工程简介 软件&#xff1a; -在执行时提供所需的功能和性能的指令&#xff1b; -使程序能够充分操作信息的数据结构&#xff1b; -描述这些程序的操作和使用情况的文档。 软件定义&#xff1a;计算机程序和相关文档。 软件特点&#xff1a;软件没有质量&#xff1b;它并不…...

将Nginx 核心知识点扒了个底朝天(二)

Nginx 是如何实现高并发的&#xff1f; 如果一个 server 采用一个进程(或者线程)负责一个request的方式&#xff0c;那么进程数就是并发数。那么显而易见的&#xff0c;就是会有很多进程在等待中。等什么&#xff1f;最多的应该是等待网络传输。 而 Nginx 的异步非阻塞工作方…...

【PowerQuery】PowerBI 的PowerQuery支持的数据集成

PowerBI中的各个Power组件已经被深度集成到PowerBI中,不再作为像Excel一样的独立组件而存在。在PowerBI的界面中为了快速导入这些常用的数据,也有相应的快速导入界面。PowerBI的快速导入界面位于主页面中,下图就是PowerBI的快速导入界面。 在PowerBI中的数据导入界面相比Exc…...

scipy spatial transform Rotation库的源代码

前几日研究scipy的旋转&#xff0c;不知道具体里面怎么实现的&#xff0c;因此搜索一番。 发现Rotation在scipy的表达是用四元数的 https://github.com/jgagneastro/coffeegrindsize/edit/master/App/dist/coffeegrindsize.app/Contents/Resources/lib/python3.7/scipy/spatia…...

JAVA文件操作

JAVA文件操作 文章目录JAVA文件操作1.属性2.构造方法3.方法3.1创建文件3.2 文件删除3.3创建目录3.4文件名3.5 文件重命名3.6查看文件的可读性​ Java中通过 java.io.file类来对文件(目录)进行抽象的描述。注意&#xff0c; 有File对象时&#xff0c;不代表真实存在该文件。1.属…...

字符串匹配 - 模式预处理:BM 算法 (Boyer-Moore)

各种文本编辑器的"查找"功能&#xff08;CtrlF&#xff09;&#xff0c;大多采用Boyer-Moore算法&#xff0c;效率非常高。算法简介在 1977 年&#xff0c;Robert S. Boyer (Stanford Research Institute) 和 J Strother Moore (Xerox Palo Alto Research Center) 共…...

RV1126笔记三十:freetype显示矢量字体

若该文为原创文章,转载请注明原文出处。 在前面介绍了使用取模软件,可以自定义OSD,这种做法相对不灵活,也无法变更,适用大部分场景。 如果使用opencv需要移植opencv,芯片资源相对要相比好,而且移植比freetype复杂。 这里记录下如何使用freetype显示矢量字体,使用fre…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...