【JavaScript 】DOM操作快速入门

╰+攻爆jí腚メ 2024-02-20 10:37 6阅读 0赞

**目录**

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来操作这个树形结构，从而改变网页的内容、结构和样式。

示例：

![72c684f0eb89454eb13bb8a191f508b9.png][]

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

## 2.操作 ##

### 2.1.document对象 ###

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

示例：

![a91cedb72b3c4d9b8dce44b36aeb500a.png][]

### 2.2.选中元素 ###

#### **2.2.1.get**  ####

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

![5f17e46608b943c780404154b6f0dd03.png][]

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

通过标签名选中：

![f727b1dd64024e37b6b3529c5e2b97ec.png][]

![ba2a705a287643a8ba5d11329cf7b5c1.png][]

通过类名选中：

![ba49320470c04291941ab68eed239de6.png][]

![33f2a7b24f8b47e1829188219775fc75.png][]

#### 2.2.2.query ####

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

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

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

![80e3458b4abc4772a87aadf0ab28a4f1.png][]

选择特定id下的元素：

![8a16a207783c428799931194b40ac47b.png][]

![e43363b454984097bd4dab91ee858090.png][]

### 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. 获取和设置其他属性：**

除了上述示例中提到的属性，你也可以获取和设置元素的其他属性，比如`src`、`href`、`value`等等。

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

![464e6bba68b04de384a8d88f673e69f0.png][]

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. 使用 `createTextNode` 和 `appendChild` 方法：**

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

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

[72c684f0eb89454eb13bb8a191f508b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/92fdcb571c1242eeb3d1487f6af4e4f1.png
[a91cedb72b3c4d9b8dce44b36aeb500a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/2560fa001963476fb10766c9387dbc1a.png
[5f17e46608b943c780404154b6f0dd03.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/c8ddd22dab8e45ff94873ae685ae5d97.png
[f727b1dd64024e37b6b3529c5e2b97ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/577513a575d24cceb8d39892da16d790.png
[ba2a705a287643a8ba5d11329cf7b5c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/818dcec2c679452db4fc6060de158066.png
[ba49320470c04291941ab68eed239de6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/009b0af94a884e438b5735f6b526f4f8.png
[33f2a7b24f8b47e1829188219775fc75.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/97184bbd275145f6b720db72f6c95be3.png
[80e3458b4abc4772a87aadf0ab28a4f1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/5eae48df7f814a5f953f777566ced8fe.png
[8a16a207783c428799931194b40ac47b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/304b5fe0a06249fa9d2b04c478e4fb2e.png
[e43363b454984097bd4dab91ee858090.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/98c0b2ad49d747179ba51edb18d00cc9.png
[464e6bba68b04de384a8d88f673e69f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/dcde4bf46ebc4c5b9093f00faf64b4ec.png