JavaScript DOM 文档对象模型(获取、改变html元素)

简介: JavaScript DOM 文档对象模型(获取、改变html元素)

当网页被加载时,浏览器会创建页面的 文档对象模型 ( Document Object Model ),简称 DOM 。

DOM 模型被结构化为对象树,又称 DOM 树 。

是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是 DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的

JavaScript 获取 HTML 元素:

方法                                                                                 描述
document.getElementById(‘id’)                                   通过元素 id 来查找元素
document.getElementsByTagName(‘name’)             通过标签名来查找元素
document.getElementsByClassName(‘class’)          通过类名来查找元素
document.getElementsByName(‘name’)                   通过表单元素中 name 名查找元素
document.querySelector(‘CSS 选择器’)                    通过 CSS 选择器获取匹配上的第一个元素
document.querySelectorAll(‘CSS 选择器’)                通过 CSS 选择器获取匹配上的所有元素

使用方法:

<p class="isCalss" id="isId">第一个段落</p>
<p class="isCalss">第二个段落</p>
<input class="isCalss" name="isName" type="text">
<input class="isCalss" name="isName" type="text">
<script>
// 获取到第一个 P 标签
document.getElementById('isId');
// 获取到两个 p 标签
document.getElementsByTagName('p');
// 获取到两个 p 标签和两个 input 标签
document.getElementsByClassName('isCalss');
// 获取到两个 input 标签
document.getElementsByName('isName');
// 获取到第一个 p 标签
document.querySelector('.isCalss');
// 获取到两个 p 标签和两个 input 标签
document.querySelectorAll('.isCalss');
</script>

除了通过 ID 选择器和 querySelector 选择器获取到的元素是唯一的,其余的选择器返回的是 伪数组的形式,可以通过 [下标] 的方式确定我们需要操作的元素。


JavaScript 改变 HTML 元素:


方法                                                                         描述

元素.innerHTML = 内容                                         改变元素的内容(包含内部标签)可识别标签

元素.属性 = 属性值                                                改变 HTML 元素的属性值

元素.style.样式 = 样式值                                       改变 HTML 元素的样式

改变 HTML 元素的样式时,样式如果为多个单词 - 拼接的,那么需要改成驼峰形式。

<div id="content"> 我是 DIV 标签 <p>我是 P 标签</p> </div>
<input type="text" id="inp" value="123" />
<div id="col"> 我是黑色 </div>
<script>
let content = document.getElementById('content');
content.innerHTML = "<h1>我是 H1 标签</h1>";
let inp = document.getElementById('inp');
inp.value = 456;
let col = document.getElementById('col');
col.style.backgroundColor = 'blue';
</script>

js中获取html和改变html是非常重要的,让我们深刻的记住它,让他们成为我们开发项目的左膀右臂,而不是我们进步的阻流,我们继续勤奋地学习,加油!


























相关文章
|
3天前
|
JavaScript 前端开发 索引
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
|
5天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
7 2
|
6天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
6天前
|
存储 前端开发 JavaScript
HTML元素周期表
HTML元素周期表
15 1
|
12天前
|
JavaScript 前端开发
JavaScript删除数组中指定元素3种方法例子
JavaScript删除数组中指定元素3种方法例子
|
12天前
|
前端开发 JavaScript 开发者
HTML基础-块级元素与内联元素
【6月更文挑战第6天】HTML中的元素分为块级和内联元素,两者在网页布局中扮演重要角色。块级元素占用整行,可设置宽高,常用于组织结构;内联元素只占内容宽度,常用于文本样式和链接。理解它们的区别并正确选择是创建清晰布局的关键。常见问题包括错误选择元素、忽视默认样式和不熟悉`display`属性。解决方法包括根据语义选择元素、清除默认样式以及灵活使用`display`属性转换元素行为。熟练掌握这些能提升网页的语义化、可访问性和布局效率。
|
14天前
|
移动开发 前端开发 数据安全/隐私保护
HTML基础-表单元素与属性:深入浅出指南
【6月更文挑战第4天】本文介绍了HTML表单的基础知识,包括`&lt;form&gt;`标签、各种表单元素(如文本输入、密码、单选、复选、下拉菜单和提交按钮)以及相关属性。易错点包括忘记设置`name`属性、不使用`label`、忽视表单验证和不安全的提交方式。建议使用HTML5内置验证属性增强安全性,并使用`POST`方法处理敏感信息。提供的完整注册表单示例展示了这些概念的应用。
|
1月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
24天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
16 2
|
26天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
29 1