Maison > interface Web > js tutoriel > le corps du texte

Comprendre le modèle objet de document (DOM)

Susan Sarandon
Libérer: 2024-10-13 06:18:02
original
753 Les gens l'ont consulté

Understanding the Document Object Model (DOM)

The Document Object Model (DOM) is a crucial concept for web developers, as it defines the structure of a document and allows for dynamic interaction with HTML and XML documents. This guide will help you understand the DOM, its structure, and how to manipulate it using JavaScript.

What is the DOM?

  • Definition: The DOM is a programming interface for web documents. It represents the document as a tree of objects, allowing scripts to update the content, structure, and style of a document while it's being viewed.
  • Tree Structure: The DOM represents a document as a tree of nodes. Each node represents a part of the document, such as an element, attribute, or text.

DOM Structure

Node Types

  1. Document Node: The root of the DOM tree. Represents the entire document.
  2. Element Node: Represents an HTML element (e.g.,
    ,

    , ).

  3. Text Node: Represents the text within an element.
  4. Attribute Node: Represents the attributes of an element (e.g., class, id).
  5. Comment Node: Represents comments in the HTML.

Example DOM Tree

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>
Copier après la connexion

DOM Representation:

Document
├── html (Element)
│   ├── head (Element)
│   │   └── title (Element)
│   │       └── "My Page" (Text)
│   └── body (Element)
│       ├── h1 (Element)
│       │   └── "Hello, World!" (Text)
│       └── p (Element)
│           └── "This is a paragraph." (Text)
Copier après la connexion

Accessing the DOM

Selecting Elements

  • getElementById: Selects a single element by its ID.
  const element = document.getElementById('myId');
Copier après la connexion
  • getElementsByClassName: Returns a live HTMLCollection of elements with the specified class name.
  const elements = document.getElementsByClassName('myClass');
Copier après la connexion
  • getElementsByTagName: Returns a live HTMLCollection of elements with the specified tag name.
  const elements = document.getElementsByTagName('div');
Copier après la connexion
  • querySelector: Selects the first element that matches a CSS selector.
  const element = document.querySelector('.myClass');
Copier après la connexion
  • querySelectorAll: Returns a static NodeList of all elements that match a CSS selector.
  const elements = document.querySelectorAll('div.myClass');
Copier après la connexion

Manipulating Elements

  • Changing Content:
  const element = document.getElementById('myId');
  element.textContent = 'New Content';
Copier après la connexion
  • Changing Attributes:
  const element = document.getElementById('myId');
  element.setAttribute('class', 'newClass');
Copier après la connexion
  • Changing Styles:
  const element = document.getElementById('myId');
  element.style.color = 'blue';
Copier après la connexion
  • Creating and Appending Elements:
  const newElement = document.createElement('div');
  newElement.textContent = 'I am a new div';
  document.body.appendChild(newElement);
Copier après la connexion
  • Removing Elements:
  const element = document.getElementById('myId');
  element.parentNode.removeChild(element);
Copier après la connexion

DOM Events

Events are actions or occurrences that happen in the browser, and you can respond to them with event handlers.

Adding Event Listeners

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button clicked!');
});
Copier après la connexion

Common Events

  • click: Triggered when an element is clicked.
  • mouseover: Triggered when the mouse hovers over an element.
  • keydown: Triggered when a key is pressed down.
  • submit: Triggered when a form is submitted.

Conclusion

Understanding the DOM is essential for web development, as it provides a way to interact with and manipulate web pages. Mastering DOM manipulation will allow you to create dynamic and interactive web applications.

Feel free to dive deeper into the documentation and experiment with the various methods and properties available in the DOM API. Happy coding!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!