探索前端开发的基本 DOM 方法
- WBOY原创
- 2024-08-01 06:46:53439浏览
Ditulis oleh Chimezie Innocent✏️
Halaman web lancar yang beroperasi secara dinamik dengan tindakan pengguna semasa mereka menyemak imbas kedai dalam talian kegemaran mereka atau tapak lain adalah kunci untuk memberikan pengalaman terbaik yang mungkin. Tetapi apakah yang bertindak sebagai asas untuk pengguna mengakses semua kandungan penting ini atas permintaan?
Fail teks yang ditulis menggunakan HTML mengarahkan pelayar web cara memaparkan kandungan dinamik yang diharapkan pengguna, dan cara kandungan halaman web diakses dan diubah suai dipanggil Model Objek Dokumen atau DOM:
DOM merapatkan jurang antara struktur HTML anda dan JavaScript, membolehkan anda mengubah suai dan berinteraksi dengan halaman web anda secara dinamik. Sesetengah kaedah boleh digunakan untuk mengubah suai dan berinteraksi dengan DOM, dan kaedah ini dikenali sebagai kaedah DOM. Kaedah DOM adalah penting untuk pembangunan bahagian hadapan kerana ia membolehkan interaksi dinamik dengan halaman web, dengan itu memberikan pengguna pengalaman menyemak imbas web yang lebih lancar.
Menguasai kaedah DOM khusus yang disediakan dalam artikel ini akan memperkasakan anda untuk mencipta pengalaman pengguna yang kaya. Terdapat banyak kaedah DOM, tetapi artikel ini hanya akan meneroka kaedah DOM penting untuk pembangunan frontend dan kes penggunaan yang berkaitan dengannya. Selain itu, saya telah menyediakan jadual di bahagian bawah artikel dengan nama, sintaks dan fungsi kaedah DOM yang diliputi di sini.
Sesetengah kaedah DOM digunakan untuk tugasan yang serupa, jadi mengumpulkannya bersama-sama akan membantu kami memahami dengan lebih baik perkara yang mereka lakukan. Kami juga akan melihat kes penggunaan kaedah DOM ini untuk melihat cara terbaik untuk menggunakannya.
Meneroka pertanyaan atau pilih kaedah DOM
Kaedah DOM ini digunakan untuk mencari dan mengakses elemen tertentu dalam pepohon DOM atau HTML.
querySelector()
Pertama dalam senarai kaedah pertanyaan ialah querySelector. Kaedah ini memilih elemen pertama yang sepadan dengan pemilih CSS atau kumpulan pemilih tertentu. Jika tiada padanan ditemui, ia mengembalikan batal. Ia menggunakan semua pemilih CSS yang sah untuk mencari elemen.
Mari kita lihat contoh di bawah:
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
<div class="first">
<p>This is a paragraph</p>
</div>
<div class="first">
<p>This is a paragraph</p>
</div>
<div id="second">
<p>Another paragraph</p>
</div>
</body>
<script src="/script.js"></script>
</html>
Kod di atas memaparkan halaman dengan teg h1, tiga elemen div dan tiga teg p perenggan. Kami akan menggunakan kod sampel ini untuk kebanyakan kes penggunaan contoh kami.
Jika anda perasan, dua daripada div mempunyai atribut kelas dan juga nama kelas yang sama manakala satu lagi mempunyai atribut ID.
Seperti yang kami jelaskan sebelum ini, querySelector mencari elemen pertama yang sepadan dengan pemilih CSS. Ini bermakna kita boleh menggunakan kelas, ID dan juga teg mereka untuk mencari elemen dengan kaedah ini. Lihat di bawah:
// script.js
const element = document.querySelector("h1").textContent;
console.log(element);
const element2 = document.querySelector(".first").innerHTML;
console.log(element2);
const element3 = document.querySelector("#second").innerHTML;
console.log(element3);
Daripada perkara di atas, kami mencari elemen menggunakan nama teg, kelas dan atribut ID. Output yang terhasil pada konsol ialah: 
Kami hanya mendapat "Hello World" kerana kami mengelog kandungan teks, seperti yang dilihat di atas, sambil mendapat HTML dalaman penuh div. Selain itu, kami mempunyai dua div dengan nama kelas yang sama, namun hanya satu ditunjukkan dalam log konsol kami. Ini kerana querySelector mendapatkan semula elemen pertama sahaja dengan pemilih CSS yang ditentukan.
Satu lagi perkara: kita boleh pergi lebih jauh dan menggunakan pemilih kompleks dengan kaedah querySelector. Memandangkan semua rentetan pemilih CSS adalah sah, kami juga boleh menggunakan pemilih penolakan. Lihat kes penggunaan di bawah untuk melihat cara kami boleh membuat sedikit perubahan dalam HTML kami:
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
<div class="first">
<p class="paragraph main">This is a paragraph</p>
</div>
<div class="first">
<p class="paragraph">This is a second paragraph</p>
</div>
<div id="second">
<p>Another paragraph</p>
</div>
</body>
<script src="/script.js"></script>
</html>
Kami menambahkan perenggan atribut kelas pada tag p dalam div pertama dan satu lagi kelas utama pada tag p pertama:
// script.js
const element = document.querySelector("div p").textContent;
console.log(element);
const element2 = document.querySelector("div.first .paragraph:not(.main)").textContent;
console.log(element2);
Ini adalah output yang terhasil: 
Memandangkan kita boleh mengakses elemen anak DOM dengan menentukan elemen induk dahulu dan kemudian pergi lebih dalam ke hierarki DOM, kita boleh mengakses perenggan pertama menggunakan div p, dengan div sebagai nod induk dan p sebagai nod kanak-kanak.
Selain itu, dalam pertanyaan kedua, kami mendapat perenggan kedua kali ini dan bukannya perenggan pertama. Ini kerana dalam pemilih CSS kami, kami mendapat elemen pertama yang bukan kelas utama.
querySelectorAll()
Kedua pada senarai kaedah pertanyaan ialah querySelectorAll. Kaedah DOM ini mendapat atau mengembalikan NodeList statik yang mengandungi semua elemen DOM yang sepadan dengan pemilih atau kumpulan pemilih yang ditentukan. Kaedah ini berguna untuk memilih atau menanyakan berbilang elemen kelas yang sama.
Nota: NodeList hanyalah koleksi nod. querySelectorAll() mengembalikan NodeList statik, bermakna sebarang perubahan dalam DOM tidak menjejaskan kandungan koleksi.
Lihat use case di bawah:
// script.js
const element = document.querySelectorAll("div");
console.log(element);
const element2 = document.querySelectorAll(".first");
console.log(element2);
console.log(typeof element)
As explained, querySelectorAll() will return a node list of all the divs. Additionally, we are checking what type of primitive the returned element is, and as expected, when we console log the element’s type, it returns an object: 
After getting the node list, we can loop through the elements using any of the loops like map, forEach, and so on to make whatever changes we want:
// script.js
const element = document.querySelectorAll(".first");
element.forEach(paragraph => paragraph.innerHTML="This is great")
The below image shows how we are just changing the text content of the p tags — nothing fancy: 
getElementById()
This DOM method retrieves the element with a specific ID. This is best used when you need to select a single unique element quickly since IDs are required to be unique if specified. Unlike the querySelector and querySelectorAll, you don’t need to add the # selector when using the getElementById() method:
// script.js
const element = document.getElementById("second").textContent;
console.log(element);
This will return the element with the ID specified. The output of the console will be: 
getElementsByClassName()
This DOM method returns an array-like object containing all the child elements with the specified class names. Each element in the object can be accessed by its index:
// script.js
const element = document.getElementsByClassName("first");
console.log(element)
This will return all elements with the class name first. The output on the console will be: 
Similar to the querySelectorAll, this method is useful when you want to apply changes to multiple elements with the same class name. Let’s change the color:
// script.js
const element = document.getElementsByClassName("first");
Array.from(element).map((el) => (el.style.color = "red"));
In your webpage, the output becomes: 
getElementsByTagName()
This method is ideal for operations on a specific element as it returns an HTML collection of elements with specified tag names.
// script.js
const element = document.getElementsByTagName("p");
console.log(element)
On the console, the output will be logged as the following: 
Also, since element returns an array-like object, you can perform multiple changes at once by using any of the loop operators. Each element can also be accessed by its index, which starts at 0.
// script.js
const element = document.getElementsByTagName("p");
Array.from(element).map((el) => (el.style.color = "red"));
const last_item = element[2].textContent
console.log(last_item); // Another paragraph
The output results in the below: 
Methods for getting and setting content
These DOM methods accomplish two uses — they help us retrieve information from elements and allow us set the content dynamically.
innerHTML
This method retrieves and sets the HTML content of an element. It specifically retrieves the HTML inside the element, including text and tags, and can also replace the HTML.
Let’s employ one h1 tag for this use case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="h1">Hello World</h1>
</body>
<script src="/script.js"></script>
</html>
Next, we’ll write the following in our script:
// script.js
const element = document.getElementById("h1");
console.log(element.innerHTML);
element.innerHTML = "<h5>New Content</h5>";
console.log(element.innerHTML);
In our console, we will get the “Hello World” since we are retrieving the HTML content. Next, we’ll change the HTML tag to an h5 tag with new content. When we retrieve the new element, we see it has changed: 
textContent
As the name implies, this method gets and sets the text content of the node and its descendants. The best use case for this method is for getting and replacing the text content of an element without the HTML tags.
Let’s look at the use case below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="h1">This is <span>some</span> text!</h1>
</body>
<script src="/script.js"></script>
</html>
The above code renders a h1 tag with the text: “This is some text”
// script.js
const element = document.getElementById("h1");
console.log(element.textContent);
// change the content
element.textContent = "This is a new text";
console.log(element.textContent);
In our script.js file, we use the query method getElementById to retrieve the h1 tag. Next, we use the textContent method to change the content of our h1 text to “This is a new text”.
The output becomes the following: 
Attribute and style manipulation methods
This group includes methods that allow you to modify DOM elements' attributes, properties, and content.
add
This method adds a specified class to an element’s class list. You can use the add method to toggle CSS classes to change an element’s appearance.
In our HTML, let’s add a style:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.newClass {
color: green;
}
</style>
</head>
<body>
<h1 id="h1">This is <span>some</span> text!</h1>
</body>
<script src="/script.js"></script>
</html>
The result is just a class with a green text color. Nothing happens when we load our page because we haven’t assigned the style to any element yet. Next, let’s assign the style to our h1 element using the add method:
// script.js
let element = document.getElementById('h1');
element.classList.add('newClass');
Reload your page and you will see that the header’s color has changed: 
remove
This method removes a specified class from an element’s class list. The remove method takes out a CSS class to change the element’s appearance back to default.
// script.js
let element = document.getElementById('h1');
element.classList.remove('newClass');
createElement
This method creates a new HTML element with the specified tag name (e.g., div, p) and is essential for dynamically building elements on the page. You can create new paragraphs, buttons, or any other HTML element as needed:
// script.js
let newDiv = document.createElement('div');
appendChild
This method inserts a child element as the last child of a parent element and adds newly created elements (with the createElement method) to an existing element in the DOM; this allows us to build complex structures dynamically. After a child element or node has been created, use appendChild to add the new element to the end of the list of children of the specified node.
See example below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="h1">This is <span>some</span> text!</h1>
<div id="div"></div>
</body>
<script src="/script.js"></script>
</html>
This is what we have before we append any new element: 
Next, let’s create a new element and add it to the empty div above.
// script.js
const parentNode = document.getElementById("div");
const textElement = document.createTextNode("This is a text node");
const pTag = document.createElement("p");
const newElement = pTag.appendChild(textElement);
parentNode.appendChild(newElement);
We included a text node and appended it to a p tag that we created using the createElement method. Next, we append the p tag to our div, which we have targeted using the getElementById method. The output then shows on our page as seen below: 
setProperty
This method sets a specific style property on an element (e.g., color, font-size) and provides granular control over element styles. This lets you dynamically change the appearance of elements based on user interactions and other conditions.
The syntax of the setProperty method is:
element.style.setProperty(propertyName, value)
Where propertyName is the CSS property we want to target, and value indicates the values of the CSS property.
Look at the example below:
// script.js
const element = document.getElementById("h1");
element.style.setProperty("color", "red");
In the code above, we retrieve our element using its id: h1. Next, we use our setProperty method to change or set the color of the text content to red.
On our page, the output of the code is as shown: 
Event or event handling methods
Event methods handle and manipulate events, enabling interactivity in webpages. The essential methods under this category include addEventListener() and removeEventListener().
addEventListener()
This is one of the most important DOM methods that you will use. The method attaches an event listener to an element, allowing the element to respond to specific user interactions. An event is anything that happens in your system, program, or webpage. An event could be a click, a load, a focus, a keydown, or keyup event, and so on.
The addEventListener attaches to an element, a listener that listens to any of these events, and when the events happen, the listener triggers a specified interaction with that element.
The syntax for the addEventListener is the following:
addEventListener(type, listener)
Where type is the type of event you want to listen to, listener is the object that receives a notification or implements the event you want.
In our HTML, let’s add a button element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button>Click Me!</button>
</body>
<script src="/script.js"></script>
</html>
In our JavaScript file, let’s add a listener that shows a “Hello World” alert whenever the button is clicked:
// script.js
const buttonElement = document.querySelector("button");
buttonElement.addEventListener("click", () => {
alert("Hello World");
});
Using the querySelector, we get the button element. Then, we attach a click event to it. Whenever the button is clicked, our listener function is executed:
The output becomes:
removeEventListener()
Similar to the addEventListener, this method removes an event listener from an element.
The syntax for this method is below:
removeEventListener(type, listener)
Where type is the type of event you are listening to and listener is the function that implements the event you want.
Let’s see a real-world use case to see this method in action. Copy and replace your HTML with the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Canvas Drawing</h1>
<canvas
id="drawingCanvas"
width="500"
height="500"
style="border: 2px solid black"
></canvas>
<div>
<button id="startDrawingBtn">Start Drawing</button>
<button id="stopDrawingBtn">Stop Drawing</button>
</div>
</body>
<script src="/script.js"></script>
</html>
It’s nothing fancy — we have a canvas element we can draw on and two buttons that allow us to draw on the canvas or not. The main interactivity comes in our JavaScript below:
// script.js
let startButton = document.getElementById("startDrawingBtn");
let stopButton = document.getElementById("stopDrawingBtn");
let canvas = document.getElementById("drawingCanvas");
let ctx = canvas.getContext("2d");
let drawing = false;
// draw function
function draw(event) {
if (!drawing) return;
ctx.lineWidth = 5;
ctx.lineCap = "round";
ctx.strokeStyle = "blue";
ctx.lineTo(
event.clientX - canvas.offsetLeft,
event.clientY - canvas.offsetTop
);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(
event.clientX - canvas.offsetLeft,
event.clientY - canvas.offsetTop
);
}
// mousedown handler
function handleMouseDown(event) {
drawing = true;
ctx.beginPath();
canvas.addEventListener("mousemove", draw);
}
// mouseup handler
function handleMouseUp() {
drawing = false;
ctx.beginPath();
canvas.removeEventListener("mousemove", draw);
}
// Function to start drawing
function startDrawing() {
canvas.addEventListener("mousedown", handleMouseDown);
canvas.addEventListener("mouseup", handleMouseUp);
}
// Function to stop drawing
function stopDrawing() {
drawing = false;
canvas.removeEventListener("mousedown", handleMouseDown);
canvas.removeEventListener("mouseup", handleMouseUp);
}
// Our event listeners
startButton.addEventListener("click", startDrawing);
stopButton.addEventListener("click", stopDrawing);
We get our button and canvas elements using the getElementById method. Next, we have three events: mouseup, mousedown, and mousemove. These events will be used for our canvas drawing.
We define two functions to handle our drawing state:
- In the startDrawing function, we attach mousedown and mouseup events to the canvas to enable drawing when the mouse is held down and dragged. mousemove is used within mousedown to draw as the mouse moves
- In the stopDrawing function, we remove the mousedown, mouseup, and mousemove events to stop drawing using the removeEventListener method
Finally, we attach click events to our buttons to trigger startDrawing or stopDrawing event functions when clicked.
The output becomes the following: 
DOM methods cheat sheet
Below is a summary of the different DOM methods we have seen so far in this article. The table includes the syntax and function of each method:
| Name | Syntax | Function |
|---|---|---|
| Query or Select methods | document.querySelector(selector) | Selects the first element that matches the specified CSS selector. |
| document.querySelectorAll(selector) | Selects all element that matches the specified CSS selector. Returns a `NodeList`. | |
| document.getElementById(id) | Selects an element by its ID. | |
| document.getElementsByClassName(className) | Selects all elements that have the specified class name. Returns an HTMLCollection. | |
| document.getElementsByTagName(tagName) | Selects all elements that have the specified tag name. Returns an HTMLCollection. | |
| Get Content Methods | element.innerHTML | Gets or sets the HTML content of an element. |
| element.textContent | Gets or sets the text content of an element. | |
| Attribute and Style Manipulation Methods | element.classList.add(className) | Adds a class to the class list of an element. |
| element.classList.remove(className) | Removes a class from the class list of an element. | |
| document.createElement(tagName) | Creates a new element with the specified tag name. | |
| element.appendChild(childNode) | Adds or inserts a child element/node as the last child of a parent element. | |
| element.style.setProperty(propertyName, value) | Sets a new value to a specific style property on an element. | |
| Event Handling methods | element.addEventListener(event, handleFunction) | Attaches an event listener to an element, allowing the element to respond to specific user interactions. |
| element.removeEventListener(event, handleFunction) | Removes an event handler that has been attached to an element. |
结论
我们已经研究了基本的 DOM 方法并了解了每种方法的用例。掌握这些 DOM 方法不仅对于任何前端开发人员都至关重要，而且还使您能够创建动态和交互式 Web 应用程序。查询 DOM 元素、操作内容和属性以及处理事件和样式都提供了有效控制和增强用户体验的基础工具。
LogRocket：通过了解上下文更轻松地调试 JavaScript 错误
调试代码始终是一项繁琐的任务。但你越了解自己的错误，就越容易纠正它们。
LogRocket 允许您以新的、独特的方式理解这些错误。我们的前端监控解决方案跟踪用户与 JavaScript 前端的互动，使您能够准确查看用户的操作导致了错误。
LogRocket 记录控制台日志、页面加载时间、堆栈跟踪、带有标头 + 正文的慢速网络请求/响应、浏览器元数据和自定义日志。了解 JavaScript 代码的影响从未如此简单！
免费试用。
以上是探索前端开发的基本 DOM 方法的详细内容。更多信息请关注PHP中文网其他相关文章！