프론트엔드 개발을 위한 필수 DOM 방법 탐색
- WBOY원래의
- 2024-08-01 06:46:53385검색
작가: Chimezie Innocent✏️
사용자가 즐겨찾는 온라인 상점이나 기타 사이트를 탐색할 때 사용자의 작업에 따라 동적으로 작동하는 원활한 웹페이지는 최고의 경험을 제공하는 데 핵심입니다. 하지만 사용자가 필요에 따라 이 모든 중요한 콘텐츠에 액세스할 수 있는 기반 역할을 하는 것은 무엇일까요?
HTML을 사용하여 작성된 텍스트 파일은 웹 브라우저에 사용자가 기대하는 동적 콘텐츠를 표시하는 방법을 지시하며, 웹페이지 콘텐츠에 액세스하고 수정하는 방식을 DOM(문서 개체 모델)이라고 합니다.
DOM은 HTML 구조와 JavaScript 사이의 격차를 해소하여 웹페이지를 동적으로 수정하고 상호 작용할 수 있도록 해줍니다. DOM을 수정하고 상호 작용하는 데 일부 메서드를 사용할 수 있으며 이러한 메서드를 DOM 메서드라고 합니다. DOM 메소드는 웹페이지와의 동적 상호작용을 가능하게 하여 사용자에게 보다 원활한 웹 브라우징 경험을 제공하므로 프런트엔드 개발에 매우 중요합니다.
이 기사에 제공된 특정 DOM 메소드를 익히면 풍부한 사용자 경험을 만들 수 있습니다. 많은 DOM 메서드가 있지만 이 문서에서는 프런트엔드 개발에 필수적인 DOM 메서드와 관련 사용 사례만 살펴보겠습니다. 또한 기사 하단에 여기서 다루는 DOM 메서드의 이름, 구문 및 기능이 포함된 표를 제공했습니다.
일부 DOM 메소드는 유사한 작업에 사용되므로 이들을 그룹화하면 해당 메소드가 수행하는 작업을 더 잘 이해하는 데 도움이 됩니다. 또한 이러한 DOM 메소드의 사용 사례를 살펴보고 이를 가장 잘 활용하는 방법을 알아볼 것입니다.
쿼리 탐색 또는 DOM 메소드 선택
이러한 DOM 메소드는 DOM 트리 또는 HTML에서 특정 요소를 찾고 액세스하는 데 사용됩니다.
쿼리선택기()
쿼리 메서드 목록의 첫 번째는 querySelector입니다. 이 메서드는 지정된 CSS 선택자 또는 선택자 그룹과 일치하는 첫 번째 요소를 선택합니다. 일치하는 항목이 없으면 null을 반환합니다. 유효한 모든 CSS 선택기를 사용하여 요소를 찾습니다.
아래 예를 살펴보겠습니다.
// 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>
위 코드는 h1 태그, 3개의 div 요소, 3개의 단락 p 태그가 있는 페이지를 렌더링합니다. 우리는 대부분의 예시 사용 사례에 이 샘플 코드를 사용할 것입니다.
알다시피 두 개의 div에는 클래스 속성과 동일한 클래스 이름이 있고 다른 하나에는 ID 속성이 있습니다.
앞서 설명했듯이 querySelector는 CSS 선택기와 일치하는 첫 번째 요소를 찾습니다. 이는 클래스, ID 및 해당 태그를 활용하여 이 메서드로 요소를 찾을 수 있음을 의미합니다. 아래를 참조하세요:
// 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);
위에서 태그 이름, 클래스, ID 속성을 사용하여 요소를 찾습니다. 콘솔의 결과 출력은 다음과 같습니다. 
위에서 볼 수 있듯이 textContent를 기록하는 동시에 div의 전체 innerHTML을 가져오기 때문에 "Hello World"만 얻었습니다. 또한 동일한 클래스 이름을 가진 두 개의 div가 있지만 콘솔 로그에는 하나만 표시됩니다. 이는 querySelector가 지정된 CSS 선택기를 사용하여 첫 번째 요소만 검색하기 때문입니다.
한 가지 더: 더 나아가 querySelector 메소드와 함께 복잡한 선택기를 사용할 수 있습니다. 모든 CSS 선택기 문자열이 유효하므로 부정 선택기를 사용할 수도 있습니다. HTML을 약간 변경하는 방법을 보려면 아래 사용 사례를 참조하세요.
// 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>
첫 번째 div의 p 태그에 클래스 속성 단락을 추가하고 첫 번째 p 태그에 main 클래스를 하나 더 추가했습니다.
// 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);
결과 출력은 다음과 같습니다. 
먼저 상위 요소를 지정한 다음 DOM 계층 구조 아래로 더 깊이 내려가서 DOM 하위 요소에 액세스할 수 있으므로 div가 상위 노드인 div p를 사용하여 첫 번째 단락에 액세스할 수 있습니다. p는 자식 노드입니다.
게다가 두 번째 쿼리에서는 이번에 첫 번째 문단 대신 두 번째 문단이 나왔습니다. 이는 CSS 선택기에서 기본 클래스가 아닌 첫 번째 요소를 가져오기 때문입니다.
쿼리선택기모두()
쿼리 메소드 목록의 두 번째는 querySelectorAll입니다. 이 DOM 메소드는 지정된 선택기 또는 선택기 그룹과 일치하는 모든 DOM 요소를 포함하는 정적 NodeList를 가져오거나 반환합니다. 이 방법은 동일한 클래스의 여러 요소를 선택하거나 쿼리하는 데 유용합니다.
참고: NodeList는 단순히 노드 모음입니다. querySelectorAll()은 정적 NodeList를 반환합니다. 즉, DOM의 모든 변경 사항이 컬렉션 내용에 영향을 미치지 않습니다.
아래 사용 사례를 살펴보세요.
// 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 메서드를 마스터하는 것은 모든 프런트엔드 개발자에게 중요할 뿐만 아니라 이를 통해 동적 및 대화형 웹 애플리케이션을 만들 수 있는 능력도 부여합니다. DOM 요소 쿼리, 콘텐츠 및 속성 조작, 이벤트 및 스타일 처리 등은 모두 사용자 경험을 효과적으로 제어하고 향상시키는 기본 도구를 제공합니다.
LogRocket: 컨텍스트를 이해하여 JavaScript 오류를 더 쉽게 디버깅합니다.
코드 디버깅은 항상 지루한 작업입니다. 하지만 오류를 더 많이 이해할수록 오류를 수정하는 것이 더 쉬워집니다.
LogRocket을 사용하면 이러한 오류를 새롭고 독특한 방식으로 이해할 수 있습니다. 당사의 프런트엔드 모니터링 솔루션은 JavaScript 프런트엔드에 대한 사용자 참여를 추적하여 오류를 초래한 사용자의 행동을 정확하게 확인할 수 있는 기능을 제공합니다.
LogRocket은 콘솔 로그, 페이지 로드 시간, 스택 추적, 헤더 + 본문이 포함된 느린 네트워크 요청/응답, 브라우저 메타데이터 및 사용자 정의 로그를 기록합니다. JavaScript 코드의 영향을 이해하는 것은 결코 쉬운 일이 아닙니다!
무료로 사용해 보세요.
위 내용은 프론트엔드 개발을 위한 필수 DOM 방법 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!