Heim > Artikel > Web-Frontend > Erkundung wesentlicher DOM-Methoden für die Frontend-Entwicklung

Erkundung wesentlicher DOM-Methoden für die Frontend-Entwicklung

WBOYOriginal: 2024-08-01 06:46:53385Durchsuche

Geschrieben von Chimezie Innocent✏️

Eine reibungslose Webseite, die sich dynamisch an die Aktionen der Benutzer anpasst, während sie ihren bevorzugten Online-Shop oder eine andere Website durchsuchen, ist der Schlüssel für die Bereitstellung des bestmöglichen Erlebnisses. Doch was ist die Grundlage dafür, dass Nutzer bei Bedarf auf all diese wichtigen Inhalte zugreifen können?

Mit HTML geschriebene Textdateien weisen Webbrowsern an, wie die dynamischen Inhalte angezeigt werden sollen, die Benutzer erwarten, und die Art und Weise, wie auf Webseiteninhalte zugegriffen und diese geändert werden, wird als Document Object Model oder DOM bezeichnet:

Exploring essential DOM methods for frontend development

Das DOM schließt die Lücke zwischen Ihrer HTML-Struktur und JavaScript und ermöglicht Ihnen die dynamische Änderung und Interaktion mit Ihren Webseiten. Einige Methoden können verwendet werden, um das DOM zu ändern und mit ihm zu interagieren. Diese Methoden werden als DOM-Methoden bezeichnet. DOM-Methoden sind für die Frontend-Entwicklung von entscheidender Bedeutung, da sie eine dynamische Interaktion mit Webseiten ermöglichen und so den Benutzern ein reibungsloseres Surferlebnis bieten.

Wenn Sie die in diesem Artikel beschriebenen spezifischen DOM-Methoden beherrschen, können Sie ein umfassendes Benutzererlebnis schaffen. Es gibt viele DOM-Methoden, aber in diesem Artikel werden nur wesentliche DOM-Methoden für die Frontend-Entwicklung und die damit verbundenen Anwendungsfälle untersucht. Zusätzlich habe ich am Ende des Artikels eine Tabelle mit den Namen, Syntaxen und Funktionen der hier behandelten DOM-Methoden bereitgestellt.

Einige DOM-Methoden werden für ähnliche Aufgaben verwendet. Wenn wir sie also gruppieren, können wir besser verstehen, was sie tun. Wir werden uns auch Anwendungsfälle dieser DOM-Methoden ansehen, um herauszufinden, wie sie am besten eingesetzt werden können.

Erkunden Sie Abfrage- oder ausgewählte DOM-Methoden

Diese DOM-Methoden werden verwendet, um bestimmte Elemente im DOM-Baum oder HTML zu finden und darauf zuzugreifen.

querySelector()

An erster Stelle in der Liste der Abfragemethoden steht der querySelector. Diese Methode wählt das erste Element aus, das einem angegebenen CSS-Selektor oder einer Gruppe von Selektoren entspricht. Wenn keine Übereinstimmungen gefunden werden, wird ein Nullwert zurückgegeben. Es verwendet alle gültigen CSS-Selektoren, um ein Element zu finden.

Sehen wir uns das folgende Beispiel an:

// 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>

Der obige Code rendert eine Seite mit einem h1-Tag, drei div-Elementen und drei Absatz-p-Tags. Wir werden diesen Beispielcode für die meisten unserer Beispielanwendungsfälle verwenden.

Wenn Sie bemerkt haben, haben zwei der Divs ein Klassenattribut und auch denselben Klassennamen, während das andere ein ID-Attribut hat.

Wie wir bereits erklärt haben, findet ein querySelector das erste Element, das mit dem CSS-Selektor übereinstimmt. Das bedeutet, dass wir mit dieser Methode die Klasse, die ID und sogar ihre Tags verwenden können, um ein Element zu finden. Siehe unten:

// 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);

Von oben finden wir Elemente mithilfe der Tag-Namens-, Klassen- und ID-Attribute. Die resultierenden Ausgaben auf der Konsole lauten: Exploring essential DOM methods for frontend development

Wir haben „Hello World“ nur erhalten, weil wir den TextContent protokollieren, wie oben gezeigt, und gleichzeitig das vollständige innerHTML der Divs erhalten. Außerdem haben wir zwei Divs mit demselben Klassennamen, in unserem Konsolenprotokoll wird jedoch nur eines angezeigt. Dies liegt daran, dass querySelector ausschließlich das erste Element mit dem angegebenen CSS-Selektor abruft.

Noch etwas: Wir könnten noch weiter gehen und komplexe Selektoren mit der Methode querySelector verwenden. Da alle CSS-Selektorzeichenfolgen gültig sind, können wir sogar Negationsselektoren verwenden. Sehen Sie sich den folgenden Anwendungsfall an, um zu sehen, wie wir eine kleine Änderung in unserem HTML vornehmen können:

// 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>

Wir haben den p-Tags in den ersten Divs einen Klassenattributabsatz und dem ersten p-Tag einen weiteren Klassenhauptabsatz hinzugefügt:

// 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);

Dies ist die resultierende Ausgabe: Exploring essential DOM methods for frontend development Da wir auf untergeordnete DOM-Elemente zugreifen können, indem wir zuerst das übergeordnete Element angeben und dann tiefer in der DOM-Hierarchie vorgehen, können wir mit div p auf den ersten Absatz zugreifen, wobei div der übergeordnete Knoten ist und p ist der untergeordnete Knoten.

Außerdem haben wir bei der zweiten Abfrage dieses Mal den zweiten Absatz anstelle des ersten erhalten. Dies liegt daran, dass wir in unserem CSS-Selektor das erste Element erhalten, das nicht die Hauptklasse ist.

querySelectorAll()

An zweiter Stelle in der Liste der Abfragemethoden steht querySelectorAll. Diese DOM-Methode ruft eine statische NodeList ab oder gibt sie zurück, die alle DOM-Elemente enthält, die mit dem angegebenen Selektor oder den angegebenen Selektorgruppen übereinstimmen. Diese Methode eignet sich zum Auswählen oder Abfragen mehrerer Elemente derselben Klasse.

Hinweis: Eine NodeList ist einfach eine Sammlung von Knoten. querySelectorAll() gibt eine statische NodeList zurück, was bedeutet, dass Änderungen im DOM keinen Einfluss auf den Inhalt der Sammlung haben.

Sehen Sie sich den Anwendungsfall unten an:

// 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: Exploring essential DOM methods for frontend development 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: Exploring essential DOM methods for frontend development

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: Exploring essential DOM methods for frontend development

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: Exploring essential DOM methods for frontend development 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: Exploring essential DOM methods for frontend development

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: Exploring essential DOM methods for frontend development 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: Exploring essential DOM methods for frontend development

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: Exploring essential DOM methods for frontend development

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: Exploring essential DOM methods for frontend development

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: Exploring essential DOM methods for frontend development

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: Exploring essential DOM methods for frontend development 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: Exploring essential DOM methods for frontend development

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: Exploring essential DOM methods for frontend development

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:

Webpage with ‘Hello World’ heading, three paragraphs, a ‘Click Me!’ button, and an alert box saying ‘Hello World’.

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: Exploring essential DOM methods for frontend development

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.

Abschluss

Wir haben uns wesentliche DOM-Methoden angesehen und Anwendungsfälle für jede gesehen. Die Beherrschung dieser DOM-Methoden ist nicht nur für jeden Frontend-Entwickler von entscheidender Bedeutung, sondern ermöglicht Ihnen auch die Erstellung dynamischer und interaktiver Webanwendungen. Das Abfragen von DOM-Elementen, das Bearbeiten von Inhalten und Attributen sowie der Umgang mit Ereignissen und Stilen stellen die grundlegenden Werkzeuge dar, um das Benutzererlebnis effektiv zu steuern und zu verbessern.

LogRocket: JavaScript-Fehler einfacher beheben, indem Sie den Kontext verstehen

Das Debuggen von Code ist immer eine mühsame Aufgabe. Aber je besser Sie Ihre Fehler verstehen, desto einfacher ist es, sie zu beheben.

LogRocket ermöglicht es Ihnen, diese Fehler auf neue und einzigartige Weise zu verstehen. Unsere Frontend-Überwachungslösung verfolgt die Benutzerinteraktion mit Ihren JavaScript-Frontends, um Ihnen die Möglichkeit zu geben, genau zu sehen, was der Benutzer getan hat, was zu einem Fehler geführt hat.

Exploring essential DOM methods for frontend development

LogRocket zeichnet Konsolenprotokolle, Seitenladezeiten, Stack-Traces, langsame Netzwerkanfragen/-antworten mit Headern + Textkörpern, Browser-Metadaten und benutzerdefinierte Protokolle auf. Es wird nie einfacher sein, die Auswirkungen Ihres JavaScript-Codes zu verstehen!

Probieren Sie es kostenlos aus.

Das obige ist der detaillierte Inhalt vonErkundung wesentlicher DOM-Methoden für die Frontend-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Python-Abdeckung praktisch verstehenNächster Artikel：Python-Abdeckung praktisch verstehen

In Verbindung stehende Artikel

Mehr sehen