DOM介绍及DOM获取元素的方式

news2025/7/27 20:37:17

1、DOM介绍 

  • DOM(Document Object Model):文档对象模型
  • 其实就是操作html中的标签的一些能力
  • 我们可以操作哪些内容

     ○ 获取一个元素

     ○ 移除一个元素

     ○ 创建一个元素

     ○ 向页面里面添加一个元素

     ○ 给元素绑定一些事件

     ○ 获取元素的属性

     ○ 给元素添加一些css样式

     ○ ...

DOM的核心对象就是document对象

document对象是浏览器内置的一个对象,里面存储着专门用来操作元素的各种方法

DOM:页面中的标签,我们通过js获取到以后,就把这个对象叫做DOM对象

2、DOM获取元素的方式

(1)  获取一个元素(目的是:通过js代码获取到标签,就可以操作标签了)

● 获取元素,这个元素分两种:

       ○ 一种是像html,head,body这种非常规的元素(标签)

       ○ 一种是常规的标签,可以通过选择器进行获取

● 获取html、head、body这种非常规的标签:

获取html:

console.log(document.documentElement)//获取html标签

 结果:

获取head:

console.log(document.head)//获取head标签

 结果:

获取body:

console.log(document.body)//获取body标签

 结果:

  • getElementByld():通过标签的id名称来获取标签 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/16619.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Hive集群部署实验

目录一、实验介绍1.1 实验内容1.2 实验知识点1.3 实验环境1.4 实验资源1.5 实验步骤清单二、实训架构三、实验环境准备四、实验步骤4.1 Hive部署4.1.1 安装Hive4.1.3 修改hive配置文件4.1.4 创建Hadoop测试目录4.1.5 初始化hive元数据库4.2 Hive测试4.2.1 启动Hive4.2.2 创建测…

pytorch的gpu版本安装以及cpu版本的卸载

目录 前言 一、安装显卡驱动 二、安装Visual Studio 2019 三、安装CUDA 四、安装cudnn 五、安装anaconda 六、安装PyTorch 前言 因为最近需要导师的指导,我开始了unet的学习,虽然之前也学习过机器学习,但是只是浅尝辄止,没…

你好,以太坊社区,你准备好参加 ETH India 2022 黑客马拉松活动了吗

你好,以太坊社区,我们很高兴通过 ETH Global即将举行的ETH India 2022 黑客马拉松活动将Cartesi 技术带到亚洲!如果你是一位喜欢探索尖端技术且是一位创新型开发人员,我们期待着你的到来,并且想帮助你将美好的DApps 发…

[BLIP]-多模态Language-Image预训练模型

论文:https://arxiv.org/pdf/2201.12086.pdf 代码:GitHub - salesforce/BLIP: PyTorch code for BLIP: Bootstrapping Language-Image Pre-training for Unified Vision-Language Understanding and Generation demo:BLIP - a Hugging Face …

代码随想录算法训练营第二天|LeetCode 977.有序数组的平方 、209.长度最小的子数组 、59.螺旋矩阵II

LeetCode 977.有序数组的平方 题目链接&#xff1a;977.有序数组的平方 思路&#xff1a; 1、先对每个数进行遍历平方&#xff0c;并插入新的容器中 2、对容器进行排序&#xff0c;返回就可以了 缺陷&#xff1a;开辟了新的容器空间 class Solution { public:vector<int…

2019年1+X 证书 Web 前端开发中级理论考试题目原题+答案——第二套

&#x1f4da;文章目录 &#x1f3af;关于1X标准 &#x1f3af;关于中级考点 ⏩&#x1f4bb;答案速查 一、单选题&#xff08;每小题2分&#xff0c;共30小题&#xff0c;共60分&#xff09; 二、多选题&#xff08;每小题2分&#xff0c;共15小题&#xff0c;共30分&…

测试工程师必备的数据库知识

测试工程师必备的数据库知识 1. 数据库的重要性 数据库是一个容器&#xff0c;仓库存的是货物&#xff0c;而数据库存的是数据。数据很好的解决了数据到哪里去&#xff0c;以及数据从哪里来的问题。 2. 数据库工具的选择 选择数据库是根据项目特点&#xff0c;架构&#xff0c;…

枚举类与注解(复习)

枚举类的使用 枚举类的使用如何自定义枚举类枚举类中的方法注解 Annotation自定义注解jdk 中四个元注解RetentionTargetDocumentedInheritedJdk 8 中注解新特性可重复注解 Repeatable类型注解类的对象只有有限个&#xff0c;确定的 星期&#xff1a;Monday(星期一)、…、Sunday…

为什么学3D建模前没人告诉我这些,常见问题答疑

1️⃣入门前建模新手要做好哪些准备❓ 一开始啥都不懂先别着急学&#xff0c;先刷刷Pinterest&#xff0c;ArtStation等业内比较知名的网站&#xff0c;多看优秀作品提高审美水平&#xff0c;这样能快速了解建模行业&#xff0c;到时上手操作也不至于脑袋空空没有想法&#xf…

C语言-数据类型

C语言-数据类型0. 概念表达式与语句字面量常量表达式/表达式1. 整型有符号/无符号进制数原码/补码/反码int/charfloat/double2. 字符型字符型与整型字符与进制数/字符型进制数putchar/getchar转义字符字符集与字符编码C语言字符串型puts/getsprintfscanf3. 数据运算/IO基本运算…

计算机SSM毕设项目 软件工程毕业设计【源码+论文】

文章目录前言 题目1 : 基于SSM的游戏攻略资讯补丁售卖商城 <br /> 题目2 : 基于SSM的疫情期间医院门诊网站 <br /> 题目3 : 基于SSM的在线课堂学习设计与实现<br /> 题目4 : 基于SSM的大学生兼职信息系统 <br /> 题目5 : 基于SSM的大学生社团管理系统 …

nginx降权+匹配php

目录 nginx降权启动 确认普通用户无法开启nginx 创建普通用户&#xff1a; 测试是否可以启动nginx: 创建必须的相关文件 使用root用户copy配置文件中网页支持类型文件 使用root用户拷贝nginx配置文件 设置权限 修改配置文件 安装 PHP 7.4&#xff0c;配合 Nginx 安装 P…

wireshark提取视频数据之RTP包中提取H264和H265

wireshark提取视频数据之RTP包中提取H264和H265 文章目录wireshark提取视频数据之RTP包中提取H264和H2651 背景2 提取前工作3 H264视频从RTP包中提取步骤4 H265视频从RTP包中提取步骤5 后记1 背景 在流媒体相关问题分析时&#xff0c;抓包分析是非常重要的手段&#xff0c;比如…

容器入门:一文了解容器的发展历史、技术和术语

学习目标 本文为Amazon容器入门课程笔记&#xff0c;内容是容器化背后的发展历史和概念&#xff0c;介绍容器生态系统中使用的特定技术&#xff0c;并讨论容器在微服务架构中的重要性。 本篇文章仅做前两个小结的梳理和总结。看完这篇文章之后应该掌握容器背后的发展历史、技…

webpack使用详解

什么是webpack 官方定义&#xff1a;从本质上来说&#xff0c;webpack是一个现代的JavaScript的静态模块打包工具。 webpack是前端工程化的一个解决方案。 主要功能&#xff1a; 提供了前端模块化功能支持&#xff0c;模块混淆&#xff0c;代码压缩&#xff0c;处理浏览器JS兼…

腾格尔发新歌《遥远的地方》,成都邓秀菊自发红包朋友圈寻歌词

随着卡特尔世界杯拉开帷幕&#xff0c;著名音乐人腾格尔&#xff0c;再一次走进大家的视野当中&#xff0c;不过这次却不是因为唱歌。腾格尔是一个音乐人&#xff0c;他更是一个出色的球迷&#xff0c;为了表达对世界杯的喜爱&#xff0c;他还专门拍摄了段子上传网络。 说起音乐…

C++ :Symbol:符号

1&#xff1a;符号的概念 符号&#xff08;symbol&#xff09;是在 ELF格式中会遇到的概念&#xff0c;也就是在写汇编代码时候会遇到的&#xff0c;而在更高级语言&#xff08;C或者C&#xff09;中不会直接遇到这个概念&#xff0c;我们把讨论的范围限制在 Linux上的ELF格式…

python多分支选择结构实例讲解

多分支选择结构的语法格式如下&#xff1a; if 条件表达式 1 : 语句 1/语句块 1 elif 条件表达式 2: 语句 2/语句块 2 elif 条件表达式 n : 语句 n/语句块 n [else: 语句 n1/语句块 n1 ] 【注】计算机行业&#xff0c;描述语法格式时&#xff0c;使用中…

Word处理控件Aspose.Words功能演示:使用 C# 在 Word 文档中创建条形码

条形码是具有编码数据/信息的平行线、点或矩形形式的图像。行业专业人士使用条形码嵌入和访问产品信息、跟踪产品移动并跟上库存。在某些情况下&#xff0c;我们可能需要在 MS Word 文档中生成和添加条形码。MS Word 是最流行和广泛使用的图形文字处理程序。它用于创建带有文本…

总结:从实模式到保护模式的流程和相关寄存器,相关数据结构之间的联系

总结&#xff1a;从实模式到保护模式的相关寄存器和相关数据结构之间的联系 1.怎么进入保护模式 段描述符 段描述符&#xff1a; 实模式下的用户可以破坏存储代码的内存区域 &#xff0c;用段描述符来对某一段进行描述内存段类型属性来阻止这种行为。8个字节大小 全局描述…