DOM操作

news/2024/12/1 10:16:59/文章来源:https://www.cnblogs.com/yangkangkang/p/18579575

一、DOM以及DOM是哪种数据结构

  文档对象模型(DOM)是 HTML 和 XML 文档的编程接口,提供了文档的结构化的表述

  文档对象模型DOM是树结构(DOM树)

二、DOM操作常用API

  1.DOM节点操作

    1)获取DOM节点:

document.getElementById('id属性值');返回拥有指定id的对象的引用
document.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合
document/element.querySelector('CSS选择器');  仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器');   返回所有匹配的元素
document.documentElement;  获取页面中的HTML标签
document.body; 获取页面中的BODY标签
document.all[''];  获取页面中的所有元素节点的对象集合型

 

    2)获取和修改DOM属性:

 property:通过property 修改和获取DOM的属性

const pList = document.querySelectorAll('p')
const p1 = pList[0]
p1.style.width = '100px'
console.log(p1.style.width)

 attribute:通过setAttribute 修改 和 getAttribute 获取 DOM属性

p1.setAttribute('style','font-size:50px')
p1.setAttribute('data-name','imook')
console.log(p1.getAttribute('data-name'))

 

  2.DOM结构操作

    1.创建节点

  

三、attribute 和 property 的区别

  • property:只能获取或修改 DOM对象自身的属性
  • attribute:即可以获取和修改DOM对象自身的属性,也可以获取和修改自定义属性

四、一次插入多个节点,考虑性能

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024-2025-1 20241322 《计算机基础与程序设计》第十周学习总结

2024-2025-1 20241322 《计算机基础与程序设计》第十周学习总结 作业信息这个作业属于哪个课程 https://edu.cnblogs.com/campus/besti/2024-2025-1-CFAP这个作业要求在哪里 https://www.cnblogs.com/rocedu/p/9577842.html#WEEK10这个作业的目标 ①信息系统②数据库与SQL③人工…

# 学期2024-2025-1 学号20241428《计算机基础与程序设计》第10周学习总结

学期(如2024-2025-1) 学号(如:20241300) 《计算机基础与程序设计》第X周学习总结 作业信息这个作业属于哪个课程 <班级的链接>(如2024-2025-1-计算机基础与程序设计)这个作业要求在哪里 <作业要求的链接>(如2024-2025-1计算机基础与程序设计第一周作业)这个…

2024-2025-1 20241425 《计算机基础与程序设计》第10周学习总结

2024-2025-1 20241425 《计算机基础与程序设计》第10周学习总结 作业信息这个作业属于哪个课程 https://edu.cnblogs.com/campus/besti/2024-2025-1-CFAP)这个作业要求在哪里 https://www.cnblogs.com/rocedu/p/9577842.html#WEEK10这个作业的目标 信息系统、数据库与SQL、人工…

【人人都能学得会的NLP - 文本分类篇 04】层次化多标签文本分类如何做?

【人人都能学得会的NLP - 文本分类篇 04】层次化多标签文本分类如何做? NLP Github【人人都能学得会的NLP - 文本分类篇 04】层次化多标签文本分类如何做?NLP Github 项目:NLP 项目实践:fasterai/nlp-project-practice 介绍:该仓库围绕着 NLP 任务模型的设计、训练、优化、…

举例说明html5怎么判断网络状态?

HTML5 提供了 navigator.onLine API 来判断网络状态。它是一个布尔值属性,当浏览器在线时返回 true,离线时返回 false。 然而,它有一些局限性,仅仅检测浏览器是否连接到网络,并不一定意味着网络连接有效或可以访问互联网。例如,连接到本地网络但无法访问互联网时,它仍然…

# 学期2024-2025-1 学号20241405《计算机基础与程序设计》第10周学习总结

作业信息 |这个作业属于哪个课程|https://edu.cnblogs.com/campus/besti/2024-2025-1-CFAP| |这个作业要求在哪里|https://www.cnblogs.com/rocedu/p/9577842.html#WEEK10| |这个作业的目标|1、信息系统 2、数据库与SQL 3、人工智能与专家系统 4、人工神经网络 5、模拟与离散事…

2024年11月总结及随笔之献血和球赛安检

随笔及总结1. 回头看 日更坚持了700天。读《数据工程之道:设计和构建健壮的数据系统》更新完成 读《数据质量管理:数据可靠性与数据质量问题解决之道》开更并持续更新2023年至2024年11月底累计码字1738120字,累计日均码字2483字。 2024年11月码字95323字,同比上升38.38%,环…

电脑和网络联网故障检测排查流程-2024-12-01

电脑和网络联网故障检测排查流程-2024-12-01 https://www.autoahk.com/archives/51704https://www.cnblogs.com/delphixx/p/18579399电脑和网络联网故障检测排查流程序号 故障现象 电脑和网络联网故障排查修复操作 备注1 电脑重新启动后无法全自动清理病毒木马垃圾文件并全自动…

使用canvas生成一张分享图

// 创建canvas元素 const canvas = document.createElement(canvas); canvas.width = 600; // 设置宽度 canvas.height = 400; // 设置高度 document.body.appendChild(canvas); // 将canvas添加到页面const ctx = canvas.getContext(2d);// 绘制背景 ctx.fillStyle = #f0f0f0;…

安卓的公式编辑器MathMagic

物体运动轨迹方程(考虑空气阻力)

UniDepth:通用单目度量深度估计

UniDepth:通用单目度量深度估计精确的单目度量深度估计(MMDE)对于解决3D感知和建模中的下游任务至关重要。然而,最近MMDE方法的显著准确性与其训练领域不符。即使存在适度的域间隙,这些方法也无法推广到看不见的域,这阻碍了它们的实际应用。提出了一种新的模型UniDepth,…

写一句话:NOIP之后,没有完结的故事与青春

睡觉睡觉,一切都好。睡觉最好。可能是两句话? 周五和助教一起吃饭,她说:不要老是说自己退役了。以后还有各种比赛,上了大学还有 acm。路还很长。 这两天和宁老师一起行动,宁老师真的是很可爱的很好的老师(如果 N 老师您看到了,那我想说的是老师特别幽默有趣,谢谢老师^…