初识DOM
目录
前言:
1.初识DOM:
1.1DOM树:
1.2节点(Node):
1.2.1元素节点:
1.2.2属性节点:
1.2.3文本节点:
1.3Document对象:
2.操作网页元素:
2.1找出元素:
2.1.1document.getElementById(id):
2.1.2document.getElementsByClassName(className):
2.1.3document.querySelector(selector):
2.1.4document.querySelectorAll(selector):
2.2操作元素:
2.2.1element.addEventListener(event, function):
2.2.2element.setAttribute(name, value):
2.2.3element.style.property:
2.2.4element.innerHTML:
3.DOM元素的选中方式:
4.DOM操作文本内容:
4.1innerText:
4.2innerHTML:
5.DOM操作元素属性
6.DOM操作元素样式
7.交互事件(event)
7.1.1获取事件对象:
结语:
前言:
今天我们来学习DOM是一个将HTML、CSS和JavaScript连接在一起的桥梁,允许开发者通过JavaScript来动态地修改网页内容和样式。
1.初识DOM:
DOM,全称 Document Object Model(文档对象模型),是一个跨平台和语言独立的接口,允许程序和脚本能够动态地访问和更新文档的内容、结构和样式。简单来说,DOM 将网页文档转换为一个由对象组成的结构,这些对象可以通过编程方式进行访问和修改。
1.1DOM树:
当浏览器加载一个HTML文档时,它会解析文档并创建一个内部的表示,这个表示就是一个树形结构,称为DOM树。这个树由节点(nodes)组成,每个节点代表文档中的一个部分(例如,元素、属性、文本等)。
1.2节点(Node):
1.2.1元素节点:
代表HTML元素,如<div>
、<p>
、<a>
等。
1.2.2属性节点:
代表元素的属性,如class
、id
、src
等。
1.2.3文本节点:
包含元素的文本内容。
每个节点都是一个对象,拥有属性和方法。例如,元素节点有一个innerHTML
属性,可以用来获取或设置元素的HTML内容。
1.3Document对象:
代表整个HTML文档,并且是DOM树的根节点。它提供了许多方法和属性来访问和操作DOM树中的其他节点。
2.操作网页元素:
2.1找出元素:
使用各种选择器方法来定位页面上的元素。例如:
2.1.1document.getElementById(id)
:
通过元素的ID选择元素。
2.1.2document.getElementsByClassName(className)
:
通过类名选择元素。
2.1.3document.querySelector(selector)
:
返回文档中匹配指定CSS选择器的第一个Element素。
2.1.4document.querySelectorAll(selector)
:
返回文档中匹配指定CSS选择器的所有Element元素的NodeList(静态的)。
2.2操作元素:
一旦找到了元素,就可以使用JavaScript来改变它们的内容、样式或属性。例如:
2.2.1element.addEventListener(event, function)
:
为元素添加事件监听器。
2.2.2element.setAttribute(name, value)
:
设置元素的属性。
2.2.3element.style.property
:
获取或设置元素的CSS样式属性。
2.2.4element.innerHTML
:
获取或设置元素的HTML内容。
3.DOM元素的选中方式:
Element : 元素 语法采用的是小驼峰命名法(第一个词不变,第二个单词开始首字母全部大写)
3.1通过ID获取元素:
var element = document.getElementById('elementId');
这将返回ID为'elementId'的单个DOM元素。ID应该在HTML文档中是唯一的,所以这个方法总是返回单个元素。
3.2通过类名获取元素:
var elements = document.getElementsByClassName('className');
这将返回一个HTMLCollection,包含所有类名为'className'的DOM元素。由于可能有多个元素具有相同的类名,因此返回的是一个集合。
3.3通过标签名获取元素
var elements = document.getElementsByTagName('tagName');
这将返回一个HTMLCollection,包含所有标签名为'tagName'的DOM元素。例如,如果你想获取所有的<p>
标签,你可以使用getElementsByTagName('p')
。
处理HTMLCollection
找到具有最大offsetTop
属性的元素,你可以这样做:
var elements = document.getElementsByClassName('className');
var maxOffsetTopElement = null;
var maxOffsetTop = -Infinity; for (var i = 0; i < elements.length; i++) { if (elements[i].offsetTop > maxOffsetTop) { maxOffsetTop = elements[i].offsetTop; maxOffsetTopElement = elements[i]; }
} // maxOffsetTopElement 现在是具有最大 offsetTop 的元素
4.DOM操作文本内容:
4.1innerText:
此属性用于获取或设置元素内部的文本内容,不包括任何HTML标签。当设置innerText
时,所有HTML标签都将被视为普通文本。
var element = document.getElementById('myElement');
var textContent = element.innerText; // 获取文本内容
element.innerText = 'New text content'; // 设置文本内容
4.2innerHTML:
此属性用于获取或设置元素内部的HTML内容。这意味着您可以插入HTML标签,并且浏览器会解析并呈现这些标签。
var element = document.getElementById('myElement');
var htmlContent = element.innerHTML; // 获取HTML内容
element.innerHTML = '<p>New HTML content</p>'; // 设置HTML内容
5.DOM操作元素属性
您已经列出了如何获取和设置元素属性的基本方法。这些操作允许您直接修改HTML元素的属性,如src
、class
(通过className
在JavaScript中访问)、href
等。
var image = document.getElementById('myImage');
var imageSrc = image.src; // 获取图片的src属性
image.src = 'newImage.jpg'; // 设置图片的src属性 var link = document.getElementById('myLink');
var linkHref = link.href; // 获取链接的href属性
link.href = 'https://www.example.com'; // 设置链接的href属性
6.DOM操作元素样式
通过style
属性,您可以直接在JavaScript中修改元素的CSS样式。对于包含连字符的CSS属性(如background-color
),在JavaScript中需要使用驼峰命名法(如backgroundColor
)。
var element = document.getElementById('myElement');
element.style.width = '200px'; // 设置元素宽度
element.style.backgroundColor = 'blue'; // 设置背景颜色
7.交互事件(event)
交互事件是用户与网页进行交互时触发的动作,比如键盘按键、鼠标点击、表单选中、文本输入等。JavaScript 允许我们监听这些事件,并在事件触发时执行特定的功能或代码。
7.1事件流程:
7.1.1获取事件对象:
首先,需要确定我们要监听哪种交互事件,是鼠标事件、键盘事件还是其他类型的事件。
7.1.2绑定监听器:
然后,我们需要给这个事件对象绑定一个监听器。当事件触发时,这个监听器会调用一个函数来执行相应的功能。
例如,如果我们有一个ID为"box"的HTML元素,并且我们想要在用户点击这个元素时执行某个功能,我们可以这样写:
var box = document.getElementById('box');
box.onclick = function() { // 在这里执行点击后要做的功能 console.log('Box was clicked!');
};
在这个例子中,box
是事件对象,onclick
是我们要监听的事件,而 function() {...}
是事件触发时要执行的函数。
结语:
好了今天我们的关于DOM的学习就先讲到这里了,DOM 是前端开发中非常重要的一部分,它允许开发者通过JavaScript与网页进行交互,实现动态内容和丰富的用户体验。这些都还只是我个人的学习成果如果有所遗漏欢迎大家的指正。
相关文章:
初识DOM
目录 前言: 1.初识DOM: 1.1DOM树: 1.2节点(Node): 1.2.1元素节点: 1.2.2属性节点: 1.2.3文本节点: 1.3Document对象: 2.操作网页元素: 2.1找出元素: 2.1.1document.getElementById(id)࿱…...
计算机视觉实验五——图像分割
计算机视觉实验五——图像分割 一、实验目标二、实验内容1.了解图割操作,实现用户交互式分割,通过在一幅图像上为前景和背景提供一些标记或利用边界框选择一个包含前景的区域,实现分割①图片准备②代码③运行结果④代码说明 2.采用聚类法实现…...
移动Web学习06-移动端适配Less预处理器项目案例
项目目标:实现在不同宽度设备中等比缩放的网页效果 Less代码 import ./base; import ./normalize;// 变量: 存储37.5 rootSize: 37.5rem; *{margin: 0;padding: 0; } body {background-color: #F0F0F0; }// 主体内容 .main {// padding-bottom: (50 / 37.5rem);pa…...
LangChain-25 ReAct 让大模型自己思考和决策下一步 AutoGPT实现途径、AGI重要里程碑
背景介绍 大模型ReAct(Reasoning and Acting)是一种新兴的技术框架,旨在通过逻辑推理和行动序列的构建,使大型语言模型(LLM)能够达成特定的目标。这一框架的核心思想是赋予机器模型类似人类的推理和行动能…...
24/04/15总结
多线程: 线程 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中,是进程中的实际运作单位 并发:在同一时刻,有多个指令在单个cpu上交替执行 并行:在同一时刻,有多个指令在多个cpu上同时执行 多线程的实现方式 1.继承…...
vue3、vue2中nextTick源码解析
nexttick是啥 nextTick是Vue提供的一个全局API,由于Vue的异步更新策略导致我们对数据的修改不会更新,如果此时想要获取更新后的Dom,就需要使用这个方法. vue的异步更新策略意思是如果数据变化,vue不会立刻更新dom,而是开启一个队列,把组件更…...
【氮化镓】GaN HEMTs结温和热阻测试方法
文章《Temperature rise detection in GaN high-electron-mobility transistors via gate-drain Schottky junction forward-conduction voltages》,由Xiujuan Huang, Chunsheng Guo, Qian Wen, Shiwei Feng, 和 Yamin Zhang撰写,发表在《Microelectroni…...
c++11 标准模板(STL)本地化库 - 平面类别(std::codecvt) - 在字符编码间转换,包括 UTF-8、UTF-16、UTF-32 (四)
本地化库 本地环境设施包含字符分类和字符串校对、数值、货币及日期/时间格式化和分析,以及消息取得的国际化支持。本地环境设置控制流 I/O 、正则表达式库和 C 标准库的其他组件的行为。 平面类别 在字符编码间转换,包括 UTF-8、UTF-16、UTF-32 std::…...
【状态压缩 容斥原理 组合数学】100267. 单面值组合的第 K 小金额
本文涉及知识点 状态压缩 容斥原理 组合数学 二分查找算法合集 LeetCode100267. 单面值组合的第 K 小金额 给你一个整数数组 coins 表示不同面额的硬币,另给你一个整数 k 。 你有无限量的每种面额的硬币。但是,你 不能 组合使用不同面额的硬币。 返回…...
.net框架和c#程序设计第三次测试
目录 一、测试要求 二、实现效果 三、实现代码 一、测试要求 二、实现效果 数据库中的内容: 使用数据库中的账号登录: 若不是数据库中的内容: 三、实现代码 login.aspx文件: <% Page Language"C#" AutoEventW…...
架构师系列-搜索引擎ElasticSearch(五)- 索引设计
索引创建后,要非常谨慎,创建不好后面会出现各种问题。 索引设计的重要性 索引创建后,索引分片只能通过_split和_shrink 接口对其进行成倍的增加和缩减。 ES的数据是通过_routing分配到各个分片上的,所以本质上不推荐区改变索引的…...
kafka ----修改log4j、jmx、jvm参数等
1、修改log4j 日志路径 在kafka-run-class.sh文件中修改如下配置,将 LOG_DIR变量指定为自己想要存储的路径 # Log directory to use if [ "x$LOG_DIR" "x" ]; thenLOG_DIR"$base_dir/logs" fi2、修改jmx参数 在kafka-run-class.s…...
Python 全栈 Web 应用模板:成熟架构,急速开发 | 开源日报 No.223
tiangolo/full-stack-fastapi-template Stars: 15.6k License: MIT full-stack-fastapi-template 是一个现代化的全栈 Web 应用模板。 使用 FastAPI 构建 Python 后端 API。使用 SQLModel 进行 Python SQL 数据库交互(ORM)。Pydantic 用于数据验证和设…...
STM32之DHT11温湿度传感器
目录 一 DHT11温湿度传感器简介 1.1 传感器特点 1.2 传感器特性 1.3 传感器引脚说明 二 测量原理及方法 2.1 典型应用电路 2.2 单线制串行简介 2.2.1 串行接口 (单线双向) 2.2.2 数据示例 2.3 通信时序 三 单片机简介 3.1 STM32F103C8T6最小系统板 四 接线说明 …...
paddle ocr
paddle安装教程,git clone xxxgit https://blog.csdn.net/Castlehe/article/details/117356343 只有paddle 1.x 的教程:https://github.com/PaddlePaddle/PaddleOCR/blob/static/doc/doc_en/quickstart_en.md 报错是因为安装的是paddle 2.x而教程只给了…...
Xcode 15.0 新 #Preview 预览让 SwiftUI 界面调试更加悠然自得
概览 从 Xcode 15 开始,苹果推出了新的 #Preview 宏预览机制,它无论从语法还是灵活性上都远远超过之前的预览方式。#Preview 不但可以实时预览 SwiftUI 视图,而且对 UIKit 的界面预览也是信手拈来。 想学习新 #Preview 预览的一些超实用调试…...
【VS2019】x64 Native Tools Command Prompt for Vs 2019使用conda命令进入环境
【VS2019】x64 Native Tools Command Prompt for Vs 2019使用conda命令进入环境 安装完VS2019后,打开终端x64 Native Tools Command Prompt for Vs 2019,直接运行conda会出现‘conda’ 不是内部或外部命令,也不是可运行的程序 原因分析&am…...
网络篇09 | 运输层 udp
网络篇09 | 运输层 udp 01 简介UDP 是面向报文的 02 报文协议 01 简介 UDP 只在 IP 的数据报服务之上增加了一些功能:复用和分用、差错检测 UDP 的主要特点:无连接。发送数据之前不需要建立连接。 使用尽最大努力交付。即不保证可靠交付。 面向报文。…...
vim相关指令
vim的各种模式及其转换关系图 vim 默认处于命令模式!!! 模式之间转换的指令 除【命令模式】之外,其它模式要切换到【命令模式】,只需要无脑 ESC 即可!!! [ 命令模式 ] 切换至 [ 插…...
STM32常见调试工具介绍
STM32的常见调试工具主要包括ST-LINK、USB转TTL、USB转485以及USB转CAN。这些工具在嵌入式系统开发、调试以及通信中发挥着重要的作用。 1.ST-LINK: ST-LINK是STMicroelectronics公司专为其STM32系列微控制器开发的调试和编程工具。既能仿真也能将编译好的程序下载…...
简历上写熟悉Linux下常用命令?直接寄
大家写简历技术栈时,都觉得越多越好,其中一条,熟悉Linux下常用命令?其实开发中Linux不是必备考点,除了运维,真正用的多的仅仅cd ls mkdir等,但当面试官问到上面命令时,是不是就傻眼了…...
【设计模式】4、prototype 原型模式
四、prototype 原型模式 https://refactoringguru.cn/design-patterns/prototype 如果希望 复制对象, 可使用 “prototype 模式” 如果 “待复制的对象” 是 interface 而不是 class, 或者如果 class 有 private 变量时. 无法知道 "待复制的对象"的细节, 则需要其…...
ES6 关于Class类的继承 extends(2024-04-10)
1、简介 类Class 可以通过extends关键字实现继承,让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承,要清晰和方便很多。 class Foo {constructor(x, y) {this.x x;this.y y;console.log(父类构造函数)}toString() {return ( this.x …...
边缘计算【智能+安全检测】系列教程--使用OpenCV+GStreamer实现真正的硬解码,完全消除马赛克
通过现有博客的GST_URL = "rtspsrc location=rtsp://admin:abcd1234@192.168.1.64:554/h264/ch01/main/av_stream latency=150 ! rtph264depay ! avdec_h264 ! videorate ! videoconvert ! appsink sync=false" GStreamer的解码方式解码,大多情况应该存在上图马赛克…...
Anaconda在Ubuntu下的安装与简单使用
一、参考资料 ubuntu16.04下安装&配置anacondatensorflow新手教程 二、安装Anaconda 下载 Miniconda镜像1 or Miniconda镜像2 # 下载 wget Miniconda3-py39_4.10.3-Linux-x86_64.sh# 安装 bash Miniconda3-py39_4.10.3-Linux-x86_64.sh一路yes 安装过程中的选项 Do you …...
网络编程【InetAddress , TCP 、UDP 、HTTP 案例】
day38上 网络编程 InetAddress 理解:表示主机类 一个域名 对应 多个IP地址 public static void main(String[] args) throws UnknownHostException {//获取本机的IP地址 // InetAddress localHost InetAddress.getLocalHost(); // System.out.println(localHos…...
软考中级工程师网络技术第二节网络体系结构
OSPF将路由器连接的物理网络划分为以下4种类型,以太网属于(25),X.25分组交换网属于(非广播多址网络NBMA)。 A 点对点网络 B 广播多址网络 C 点到多点网络 D 非广播多址网络 试题答案 正确答案: …...
Mac 软件清单
~自留备用~ Macbook用了几年之后, 512G的内置硬盘有些紧张了, 这几天总是提示空间不足, 就重装了下系统, 重装之后竟然不记得有些软件的名字和下载链接, 特此记录 Office 办公套件 直接从微软官网下载Office 安装包https://officecdnmac.microsoft.com/pr/C1297A47-86C4-4C1F…...
【Leetcode每日一题】 分治 - 颜色分类(难度⭐⭐)(57)
1. 题目解析 题目链接:75. 颜色分类 这个问题的理解其实相当简单,只需看一下示例,基本就能明白其含义了。 2.算法原理 算法思路解析 本算法采用三指针法,将数组划分为三个区域,分别用于存放值为0、1和2的元素。通过…...
微信登录功能-保姆级教学
目录 一、使用组件 二、登录功能 2.1 步骤 2.2 首先找到网页权限 复制demo 代码 这里我们需要修改两个参数 三、前端代码 3.1 api 里weiXinApi.ts 3.2 api里的 index.ts 3.3 pinia.ts 3.4 My.vue 四、后端代码 4.1 WeiXinController 4.2 Access_Token.Java 4.3 We…...
b2c电子商务网站的收益模式主要有/泉州排名推广
帮助您构建高质量的应用,是我们长期努力的一个方向。为此,我们经常寻找可以在工具和资源上投入精力的领域,这些工具和资源可以使您更加深刻地了解应用的性能。重大更新在 Android 11 上,我们引入了两个新工具——"数据访问审…...
企业营销网站建设费用预算/北京百度seo
欢迎访问 Snippet:2021/6/24 8:36 下午 致谢: 🌰 手把手带你爬取小姐姐私房照🍎 一座城市一个故事 问题概述: 🐳 🐭 使用Python获取朴缜《东方幻月录》中古风城市图片 🐳 🐭方案细节 🐳 介绍…...
网站建设资讯/推广平台都有哪些
一个Project 引用 另外 一个Project 显示黄色叹号,后来发现 后一本Project的build设定为.Net4.5, 前一个为4.0, 将版本改为一致后,问题解决。转载于:https://www.cnblogs.com/fdyang/p/4270041.html...
查看商标是否被注册官网/成都seo技术
一. C语言包含的目录: 二. C包含的目录...
普通展示型网站/淘宝代运营公司
在Linux环境下,串口名从ttyS0开始依次是ttyS1、ttyS2等。在本程序中,使用ttyS0作为通信串口。在打开ttyS0的时候,选项 O_NOCTTY 表示不能把本串口当成控制终端,否则用户的键盘输入信息将影响程序的执行; O_NDELAY表示打…...
淘宝式网站建设/软文推广文案范文
微信h5端 外部浏览器中支付: 后端写一个接口去访问微信的接口,微信会返回一段链接,直接回调给前端,前端处理代码如下 后端返的值 orderString:‘https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_idwx…...