【JavaScript 】DOM操作快速入门

目录

1.概述

2.操作

2.1.document对象

2.2.选中元素

2.2.1.get

2.2.2.query

2.3.操作属性

2.4.添加响应

2.5.修改文本


1.概述

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

示例:

【JavaScript 】DOM操作快速入门_第1张图片

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

2.操作

2.1.document对象

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

示例:

【JavaScript 】DOM操作快速入门_第2张图片

2.2.选中元素

2.2.1.get

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

【JavaScript 】DOM操作快速入门_第3张图片

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

通过标签名选中:

【JavaScript 】DOM操作快速入门_第4张图片

通过类名选中:

【JavaScript 】DOM操作快速入门_第5张图片

2.2.2.query

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

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

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

选择特定id下的元素:

【JavaScript 】DOM操作快速入门_第6张图片

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'; // 设置元素的类名属性值

3. 获取和设置自定义属性(data-属性):

在HTML5中,你可以使用data-*属性来存储自定义数据。通过DOM,你可以获取和设置这些自定义属性的值:

var element = document.getElementById('myElement');
var customDataValue = element.getAttribute('data-custom'); // 获取自定义属性的值
element.setAttribute('data-custom', 'new value'); // 设置自定义属性的值

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)触发。通常,我们使用冒泡阶段。

【JavaScript 】DOM操作快速入门_第7张图片

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 = '新的文本内容';

4. 使用 createTextNodeappendChild 方法:

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

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

你可能感兴趣的:(前端,前端,javascript,html)