【JavaScript 】DOM操作快速入门

简介: 【JavaScript 】DOM操作快速入门

1.概述

在Web开发中,JavaScript(JS)的DOM(Document Object Model,文档对象模型)是一种用来表示网页文档结构的编程接口。它将整个文档抽象为一个树形结构,每个节点都是文档中的一个元素,开发者可以使用JavaScript来操作这个树形结构,从而改变网页的内容、结构和样式。

示例:

一个document包含一个HTML属性,HTML属性中包含两个成员变量(head、body),head包含title成员变量,body包含h1、p、p成员变量。通过JavaScript可以操作DOM。

2.操作

2.1.document对象

JavaScript中内置一个document对象,该对象指向整个DOM,用来表示当前 HTML 文档的对象。并提供了访问和操作网页内容的方法和属性。document对象是所有 DOM 对象的根节点,它代表了整个 HTML 文档,包括页面的内容、结构和样式。

示例:

2.2.选中元素

2.2.1.get

document对象内置多个get方法获取HTML中的元素

var elementById = document.getElementById('elementId'); // 通过id获取元素
var elementsByClass = document.getElementsByClassName('className'); // 通过类名获取元素(返回NodeList)
var elementsByTag = document.getElementsByTagName('tagName'); // 通过标签名获取元素(返回NodeList)

通过标签名选中:

通过类名选中:

2.2.2.query

quary方法,默认通过标签进行匹配,想通过ID匹配,需要跟上 #

selector,选择上下文中的首个。

selectorAll,选择上下文中的所有。

选择特定id下的元素:

2.3.操作属性

在DOM编程中,你可以使用JavaScript来操作HTML元素的属性。以下是一些常见的DOM属性操作方法:

1. 获取属性的值:

通过DOM,你可以获取HTML元素的属性值。例如,获取一个元素的ID属性值:

var element = document.getElementById('myElement');
var id = element.id; // 获取元素的ID属性值

2. 设置属性的值:

你也可以使用DOM来设置HTML元素的属性值。例如,设置一个元素的类名属性值:

 var element = document.getElementById('myElement');
element.className = 'newClassName'; // 设置元素的类名属性值

4. 获取和设置其他属性:

除了上述示例中提到的属性,你也可以获取和设置元素的其他属性,比如srchrefvalue等等。

var image = document.getElementById('myImage');
var imageUrl = image.src; // 获取图片的URL
image.src = 'newImage.jpg'; // 设置图片的URL
 
var link = document.getElementById('myLink');
var linkUrl = link.href; // 获取链接的URL
link.href = 'newPage.html'; // 设置链接的URL
 
var input = document.getElementById('myInput');
var inputValue = input.value; // 获取输入框的值
input.value = 'new value'; // 设置输入框的值

5. 删除属性:

你可以使用removeAttribute()方法删除元素的属性:

var element = document.getElementById('myElement');
element.removeAttribute('data-custom'); // 删除自定义属性

2.4.添加响应

在DOM编程中,你可以使用JavaScript为HTML元素添加事件监听器,从而响应用户的交互。addEventListener 方法可以用于在指定元素上添加事件监听器。这个方法有三个参数:事件类型、回调函数和一个可选的布尔值,用于指定事件是否在捕获阶段(true)或冒泡阶段(false)触发。通常,我们使用冒泡阶段。

document.querySelector("button").addEventListener("click",function(){
document.querySelector("h1").classList.toggle("H1");
});

2.5.修改文本

在DOM编程中,你可以使用JavaScript来修改HTML元素的文本内容。以下是一些常见的方法,用于在DOM元素上修改文本内容:

1. 使用 textContent 属性:

textContent 属性用于获取或设置一个元素及其所有后代元素的文本内容。这个属性会返回元素内的所有文本,包括子元素的文本,并且它不会解析或执行HTML代码。

var element = document.getElementById('myElement');
element.textContent = '新的文本内容';

2. 使用 innerText 属性:

innerText 属性与 textContent 类似,用于获取或设置元素的文本内容。不同之处在于,innerText 只会返回可见文本,会忽略隐藏元素和通过CSS设置为不可见的元素。

var element = document.getElementById('myElement');
element.innerText = '新的文本内容';

3. 使用 innerHTML 属性:

innerHTML 属性用于获取或设置元素的HTML内容,包括元素的标签和子元素。这个属性可以用于修改元素的文本和结构,但要注意,直接设置 innerHTML 可能会引起安全问题,因为它会执行包含在字符串中的任意脚本。

var element = document.getElementById('myElement');
element.innerHTML = '<strong>新的文本内容</strong>';

4. 使用 createTextNodeappendChild 方法:

你可以使用 document.createTextNode(text) 方法创建一个文本节点,然后使用 appendChild() 方法将它添加到元素中。这种方法更安全,因为它不会执行脚本。

var element = document.getElementById('myElement');
var newText = document.createTextNode('新的文本内容');
element.appendChild(newText);

目录
相关文章
|
14天前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
16 1
|
14天前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
9 1
|
16天前
|
JavaScript 前端开发
DOM操作有哪些方法可以改变元素的样式?
【6月更文挑战第30天】DOM操作有哪些方法可以改变元素的样式?
11 2
|
16天前
|
JavaScript 前端开发 开发者
DOM操作
【6月更文挑战第30天】DOM操作
13 1
|
18天前
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
14 1
|
19天前
|
存储 前端开发 JavaScript
回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。
【6月更文挑战第27天】回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。它作为参数传递给其他函数,在特定条件满足或任务完成后被调用。例如,`asyncOperation`函数接受回调函数`handleResult`,模拟异步操作后,调用`handleResult`传递结果。这样,当异步任务完成时,`handleResult`负责处理结果。
15 1
|
19天前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
20 1
|
11天前
|
缓存 JavaScript API
js【详解】DOM
js【详解】DOM
10 0
|
14天前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(一)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(一)
11 0
|
14天前
|
存储 JavaScript 前端开发
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(二)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(二)
10 0