SoFunction
Updated on 2025-04-10

Common methods of JavaScript document object

In web development,documentObjects are the bridge connecting JavaScript to web content. BydocumentObjects, developers can dynamically access and modify the structure, content and style of web pages, thereby achieving rich interactive effects.

1. Document object overview

1. What is a document object

documentAn object is an object created by the browser for each loaded web page, representing the entire HTML or XML document. It is the root node of the Document Object Model (DOM), providing an interface to operate documents. passdocumentObjects, developers can:

  • Access and modify elements and content in the page.
  • Respond to user interaction events.
  • Dynamically update the structure and style of the page.

2. Source of document object

When the browser loads an HTML document, the document is parsed and the corresponding DOM tree is generated.documentThe object is the root node of this DOM tree, representing the entrance to the entire document. The global object of each browser window (or tab page) iswindow,anddocumentyeswindowThe properties of the object can be passedOr use directlydocumentCome visit.

2. Common properties of document objects

documentObjects provide rich attributes to facilitate developers to obtain various information about documents. Here are some commonly used properties:

  • : Get or set the title of the document, i.e.<title>Content in the tag.
  • : Returns the full URL of the document.
  • : Get or set the domain name of the document.
  • : Returns the URL of the document linked to the current document.
  • : Cookies used to get or set the current document.

3. Common methods of document objects

documentObjects provide a variety of methods that allow developers to manipulate document content dynamically. Here are some commonly used methods:

1. Get elements

getElementById(id): According to the elementidGet the corresponding element.

const header = ('header');

getElementsByClassName(className): Get all elements containing the specified class name and return a real-time HTMLCollection.

const items = ('item');

getElementsByTagName(tagName): Get all elements of the specified tag name and return a real-time HTMLCollection.

const paragraphs = ('p');

querySelector(selector): Returns the first element that matches the specified CSS selector.

const firstItem = ('.item');

querySelectorAll(selector): Returns all elements matching the specified CSS selector, returning a static NodeList.

const allItems = ('.item');

2. Create and delete elements

createElement(tagName): Creates an element node named by the specified tag name.

const newDiv = ('div');

createTextNode(text): Create a text node containing the specified text.

const textNode = ('Hello, world!');

appendChild(node): Add a node as the last child of the specified parent node.

const parent = ('parent');(newDiv);

removeChild(node): Remove a child node from the DOM.

const child = ('child');(child);

3. Event handling

addEventListener(type, listener): Add an event listener for the specified element.

const button = ('myButton');
('click', function() {
  alert('Button clicked!');
});

removeEventListener(type, listener): Removes the specified event listener.

function handleClick() {
  alert('Button clicked!');
}
('click', handleClick);
// Remove event listener('click', handleClick);

IV. The actual application of document object

1. Dynamically update content

passdocumentObjects, developers can dynamically modify web page content. For example, update the text of a paragraph:

const paragraph = ('intro');
 = 'Welcome to our website!  ';

2. Form Verification

Before submitting the form, usedocumentThe object obtains the value entered by the user and performs verification:

const form = ('signupForm');
('submit', function(event) {
  const username = ('username').value;
  if (username === '') {
    alert('The username cannot be empty!  ');
    (); // Block form submission  }
});

3. Dynamic style switching

passdocumentObjects, developers can modify the style of elements to achieve dynamic effects:

const themeButton = ('themeButton');
('click', function() {
  ('dark-theme');
});

5. Things to note

Performance Considerations: Frequent operating of DOMs can cause performance issues. To improve performance, it is recommended to minimize direct operations on the DOM, or to merge multiple modifications into one operation before the operation.
Security: When processing user input, appropriate verification and escape must be performed to prevent XSS (cross-site scripting) attacks.
Compatibility: Although most modern browsers support standard properties and methods of document objects, browser compatibility is still important when using certain features.

This is the end of this article about the detailed explanation of JavaScript document object. For more related JavaScript document object content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!