DOM学习笔记(坚持~~~~)

news2025/2/4 3:54:53

1.DOM简介

1.1什么是DOM


文档对象模型简称DOM,W3C组织推荐的处理可扩展标记语言的标准编程接口,通过这些DOM接口可以改变网页的内容,结构和样式。

1.2 DOM树


文档:一个页面就是一个文档,DOM中使用document表示

元素:页面中所有标签都是元素,DOM中使用element表示

节点:网页中所有内容都是节点(标签属性文本注释等),DOM中使用node表示。

Dom把以上内容都看作是对象

2.获取元素

2.1如何获取网页元素

Dom在我们实际开发中主要只用来操作元素

我们如何获取页面中的元素呢?

获取元素可以使用以下几种方法:

  • 根据ID获取
  • 根据标签名获取
  • 通过HTML5新增方法获取
  • 特殊元素获取

2.2根据ID获取

使用getElementById(‘id’)方法获取ID的元素对象。

返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。

getElementById()返回一个匹配特定 ID的元素。

        //语法 var element = document.getElementById(id);

        //1.因为文档页面是从上往下加载的,所以先有标签,所以JS写在标签下面

        //2.参数id是大小写敏感的字符串

        //3.返回但是元素对象

        //4.驼峰命名法

2.3根据标签名获取 

      getElementsByTagName()

        var timel = document.getElementsByTagName('li');

        //1.返回是获取过来的元素对象的集合  以伪数组形式存储

        console.log(timel);

        console.log(timel[0]);

        //2.我们想要依次打印里面的元素对象可以采取遍历的形式

        for (i = 0; i < timel.length; i++) {

            console.log(timel[i])

        }

        //3.得到的元素对象是动态的。

        //4.如果页面中没有这个元素,返回的是一个空的伪数组。

        //5.还可以获取某个父元素内部所有指定标签名的子元素

element.getElementsByTagName('标签名')

        var olli = ol.getElementsByTagName('li');//指定ol里面的li元素

        console.log(olli);

还可以这样先用ID获取到父元素,然后用标签获取子元素。

        var ollist = document.getElementById('yes');

        console.log(ollist.getElementsByTagName('li'));   //HTMLCollection(4) [li, li, li, li]

 

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

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

相关文章

Python+Qt身体特征识别人数统计源码窗体程序

程序示例精选 PythonQt身体特征识别人数统计 如需安装运行环境或远程调试&#xff0c;见文章底部微信名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《PPythonQt身体特征识别人数统计》编写代码&#xff0c;功能包括了相片&#xff0c;摄像头身体识别…

Javaweb中的Request(请求)和Response(响应)

目录 一、概念 二、请求&#xff08;Request&#xff09; 1.例子简介 2.Request继承体系 3.Request获取请求数据 &#xff08;1&#xff09;请求行 &#xff08;2&#xff09;请求头 &#xff08;3&#xff09;请求体 4.优化请求体参数的获取 5.解决请求参数乱码问…

POSIX Timer

一、特点&#xff1a; 1、使用 POSIX Timer&#xff0c;一个进程可以创建任意多个 Timer。 2、setitmer 计时器时间到达时&#xff0c;可以有多种通知方式&#xff0c;比如信号&#xff0c;或者启动线程。 3、POSIX Timer 则可以使用实时信号。 4、POSIX Timer 是针对有实时要…

leetcode98. 验证二叉搜索树关于递归实现中遇到的global和nonlocal(各种报错分析)

leetcode98. 验证二叉搜索树 题目 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树和右子树自身必须也是二…

前端基础(十三)_定位position、定位层级z-index

一、定位position Css的定位机制&#xff1a;普通文档流、浮动、定位 这里主要介绍CSS的定位属性&#xff1a;position&#xff1a; 1、定位原理&#xff1a;允许元素相对于正常位置、或者相对于父元素、浏览器窗口本上的位置 2、元素位置的调整&#xff1a; left|right属性、…

Spring Boot项目使用RabbitMQ队列

Spring Boot项目使用RabbitMQ队列 一、Rabbitmq的安装 RabbitMQ是一个开源的遵循 AMQP协议实现的基于 Erlang语言编写&#xff0c;**即需要先安装部署Erlang环境再安装RabbitMQ环境。 erlang的安装在windows中直接点击安装即可。 安装完erlang后设置erlang的环境变量ERLANG…

CSM32RV20 是 32位低功耗MCU芯片 RISC-V RV32IMAC 内核

CSM32RV20 是 32位低功耗MCU芯片 RISC-V RV32IMAC 内核 CSM32RV20 是基于RISC-V RV32IMAC 内核&#xff08;2.6 CoreMark/MHz&#xff09;的32位低功耗MCU芯片&#xff0c;最高主频32MHz&#xff0c;最大支持 40KB 嵌入式FlASH、4KB SRAM和512B NVM&#xff0c;集成ADC和UART、…

如何使用FastReport .NET 从 JetBrains Rider 中创建PDF报告?

Fastreport是目前世界上主流的图表控件&#xff0c;具有超高性价比&#xff0c;以更具成本优势的价格&#xff0c;便能提供功能齐全的报表解决方案&#xff0c;连续三年蝉联全球文档创建组件和库的“ Top 50 Publishers”奖。 FastReport.NET官方版下载&#xff08;qun&#x…

了解什么是架构基本概念和架构本质

什么是架构和架构本质 在软件行业&#xff0c;对于什么是架构&#xff0c;都有很多的争论&#xff0c;每个人都有自己的理解。此君说的架构和彼君理解的架构未必是一回事。因此我们在讨论架构之前&#xff0c;我们先讨论架构的概念定义&#xff0c;概念是人认识这个世界的基础&…

Note that you can also install from a tarball 处理

近期使用 npm publish 发布依赖包时&#xff0c;始终遇到 npm 404 报错&#xff0c;错误信息是 “Note that you can also install from a tarball”&#xff0c;尝试更换网络&#xff0c;更换代理服务器等操作&#xff0c;都无效&#xff0c;npm 报错如下 问题原因&#xff1a…

python通过字典来替代if..else

在应对多策略的场景下&#xff0c;大量使用if...else...不仅提高了后期的维护成本&#xff0c;还降低了运行效率。通过字典做映射就可以更好的优化代码。 比如这样一个模拟场景&#xff0c;根据用户的VIP等级&#xff0c;发放奖励。在大量使用if...else...时就会变成如下状态&…

nodejs篇 内置模块http 常用api

文章目录前提创建一个最基本的http服务器req有哪些值得关注的信息res常用的apihttp.request(options[, callback])server事件监听checkContinuecheckExpectationcloseconnect前提 如果你觉得nodejs官方文档给的api太多&#xff0c;不知道哪些重要&#xff0c;请看下去&#xf…

TensorRT全方位概览笔记

TensorRT &#xff08;基于8.2.3&#xff09;1.简介1.export1.1 使用tensorrt API 搭建1.2 使用parser1.3 使用框架内 tensorrt 接口1.4 注意事项2.开发辅助工具2.1 trtexec2.2 Netron2.3 onnx-graphsurgeon2.4 polygraphy2.5 Nsight Systems3. plugin3.1 plugin3.2 使用3.3 类…

就离谱!使用机器学习预测2022世界杯:小组赛挺准,但冠亚季军都错了 ⛵

&#x1f4a1; 作者&#xff1a;韩信子ShowMeAI &#x1f4d8; 数据分析实战系列&#xff1a;https://www.showmeai.tech/tutorials/40 &#x1f4d8; 机器学习实战系列&#xff1a;https://www.showmeai.tech/tutorials/41 &#x1f4d8; 本文地址&#xff1a;https://www.sho…

C2. Potions (Hard Version)(可以后悔的选取 + 一种新奇的优先队列用法)

Problem - 1526C2 - Codeforces 这是该问题的困难版本。唯一不同的是&#xff0c;在这个版本中&#xff0c;n≤200000。只有当两个版本的问题都解决了&#xff0c;你才能进行黑客攻击。 有n个药水排成一行&#xff0c;最左边是药水1&#xff0c;最右边是药水n。每种药水在喝下…

Eclipse安装和环境的基本配置

Eclipse安装 安装包 链接&#xff1a;https://pan.baidu.com/s/13LXiyGmgdAQ2MYXhim1WMg 提取码&#xff1a;WADS 不会安装的可以参考这篇文章 链接: 安装教程文章 eclipse怎么更改存储位置 1.1 file-> Switch Workspace ->Other 打开后可以看到保存文件的路径也可以…

疫情之下连锁餐饮行业积极求变,集团采购协同管理系统重构企业采购数字化

2019年底至今&#xff0c;新冠肺炎疫情已进入了第三个年头。作为接触性、聚集性行业&#xff0c;国内餐饮业持续承压&#xff0c;经历了一系列的波折。尤其2022年以来&#xff0c;国内多地出现了此起彼伏的疫情&#xff0c;给餐企带来了较大冲击&#xff0c;餐饮行业整体营收收…

【推荐】安全访问服务边缘(SASE)资料汇总合集24篇

Secure Access Service Edge (SASE) 是Gartner推出的一个新的技术理念。SASE将 SD-WAN和网络安全解决方案&#xff08;FWaaS、CASB、SWG 和ZTNA&#xff09;融合到统一的云原生服务中。SASE是Gartner最新提出的一个技术理念&#xff0c;SASE用于从分布式云服务交付聚合的企业网…

Web前端105天-day49-jQuery

jQuery02 目录 前言 一、复习 二、标签内容 三、get请求 四、新增子元素 五、委托 六、克隆 七、加载HTML 八、准备就绪 九、Node.js 十、js中提示jQuery的方案 十一、location 十二、根据地址栏参数加载页面 十三、全局样式变量 总结 前言 jQuery02学习开始 一…

vi\vim编辑器的使用及命令、快捷键

vi\vim编辑器 1、vi\vim编辑器介绍 vi\vim是visual interface的简称&#xff0c;是Linux中最经典的文本编辑器。 同图形化界面中的文本编辑器一样&#xff0c;vi是命令行下对文本文件进行编辑的绝佳选择。 vim是vi的加强版本&#xff0c;兼容vi的所有指令&#xff0c;不仅能…