JavascriptDOM 文档对象模型

简介: JavascriptDOM 文档对象模型

Javascript DOM 概念

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),简称DOM。DOM模型被结构化为对象树,又称DOM树。树的每个节点代表文档中的一个元素、属性、文本等。

JavaScript DOM是用来操作HTML文档的一种编程接口,通过它可以实现对文档的各种操作和交互。

Javascript 获取HTML元素

1、使用 getElementById() 方法,通过元素的 id 属性来获取元素。代码如下:

var element = document.getElementById('elementId');

2、使用 getElementsByClassName() 方法,通过元素的 class 属性来获取元素。该方法返回一个包含所有匹配类名的元素集合。例如:

var elements = document.getElementsByClassName('className');

3、使用 getElementsByTagName() 方法,通过元素的标签名来获取元素。该方法返回一个包含所有匹配标签名的元素集合。例如:

var elements = document.getElementsByTagName('tagName');

4、使用 querySelector() 方法,通过 CSS 选择器来获取元素。该方法返回匹配选择器的第一个元素。例如:

var element = document.querySelector('selector');

5、使用 querySelectorAll() 方法,通过 CSS 选择器来获取元素。该方法返回匹配选择器的所有元素。例如:

var elements = document.querySelectorAll('selector');

Javascript 中改变HTML元素

在JavaScript中,可以通过操作DOM(文档对象模型)来改变HTML元素

以下是一些常见的方法:

获取元素 使用document.getElementById("id")来获取具有指定id的元素,使用document.getElementsByClassName("class")来获取具有指定类名的元素,使用document.getElementsByTagName("tag")来获取指定标签名的元素。

修改元素内容 可以使用innerHTML属性来获取或修改元素的HTML内容。例如,document.getElementById("myElement").innerHTML = "新内容"可以将指定id的元素的内容更改为"新内容"。

修改元素样式 可以使用style属性来修改元素的样式。例如,document.getElementById("myElement").style.color = "red"可以将指定id的元素的文本颜色更改为红色。

添加/删除/修改元素类名 可以使用className属性来获取或设置元素的类名。例如,document.getElementById("myElement").className = "newClass"可以将指定id的元素的类名更改为"newClass"。

添加/删除/修改元素属性 可以使用setAttribute()方法来设置元素的属性。例如,document.getElementById("myElement").setAttribute("href", "https://www.example.com")可以将指定id的元素的href属性设置为"https://www.example.com"。

创建新元素 可以使用document.createElement("tag")方法来创建新的HTML元素。例如,var newElement = document.createElement("div")可以创建一个新的div元素。

添加/删除/移动元素 可以使用appendChild()方法将一个元素作为另一个元素的子元素添加到DOM中。例如,document.getElementById("myParent").appendChild(newElement)可以将新创建的元素添加为指定id的父元素的子元素

Javascript 获取元素拓展

子元素.parentElement:用于获取当前元素的父元素。

父元素.children:用于获取当前元素的子元素。

当前元素.nextElementSibling:用于获取当前元素的下一个同级元素。

创作不易,👍 +⭐ +📝(一键三连) 是对阿福最大的鼓励与支持哦

相关文章
|
监控 安全 数据可视化
R语言在员工上网行为监控中的数据分析
本文讲述了如何使用R语言分析员工上网行为以提升企业网络安全。通过收集网络流量和访问记录数据,利用R进行读取、分析和可视化,例如查看访问时长分布和热门网站。此外,文中还介绍了一个自动将监控数据提交到网站的R脚本,通过定时任务实现数据的持续更新和管理,及时发现并应对安全风险,增强网络安全性。
413 3
|
机器学习/深度学习 运维 算法
利用机器学习优化数据中心能效的策略
【4月更文挑战第29天】在现代技术环境下,数据中心作为信息处理与存储的核心设施,其能源效率成为评估运营成本和环境影响的关键指标。本文旨在探讨如何通过机器学习方法实现数据中心能效的优化。文中将介绍机器学习算法在预测数据中心能耗、动态调整资源分配以及故障检测中的应用,并通过案例分析展示这些策略如何有效降低能耗并提升性能。
【洛谷 P1873】[COCI 2011_2012 #5] EKO _ 砍树 题解(向量+二分查找)
【COCI 2011/2012 #5】EKO 砍树问题摘要: - 伐木工Mirko需砍$M$米木材,只能砍一排树,使用二分搜索策略确定锯片最大高度$H$。 - 锯片设为$H$米时,会砍掉所有高于$H$的树顶,求得所需木材至少$M$米的最高$H$。 - 输入:树的数量$N$和所需木材总长$M$,每棵树的高度。 - 输出:锯片的最大高度。
114 0
|
算法 数据可视化 Python
【KMeans】Python实现KMeans算法及其可视化
【KMeans】Python实现KMeans算法及其可视化
|
Linux 编译器 C语言
Windows编译环境介绍
Windows编译环境介绍
408 0
|
缓存 资源调度 前端开发
说一说自动化构建以及Gulp
自动化构建是前端工程化当中的一个重要组成部分,自动化就是使用机器来代替人工来完成一些工作,构建我们可以将其理解为转换。总的来说就是将我们的源代码自动转换为生产环境当中可以运行的代码或程序。一般来说我们
303 0
说一说自动化构建以及Gulp
|
前端开发 JavaScript API
【青训营】-🐳React实战(上)
【青训营】-🐳React实战(上)
159 0
【青训营】-🐳React实战(上)
|
JSON Unix Go
使用 grpcurl 通过命令行访问 gRPC 服务
使用 grpcurl 通过命令行访问 gRPC 服务
1767 0
|
网络协议 测试技术 Go
服务端转发消息思路分析|学习笔记
快速学习服务端转发消息思路分析
|
监控 前端开发 物联网