JavaScript Basic Tutorial

JavaScript Objects

JavaScript Functions

JS HTML DOM

JS Browser BOM

AJAX Basic Tutorial

JavaScript Reference Manual

JS DOM Change HTML Content JS HTML DOM Methods

JS HTML DOM Selectors

JavaScript is most commonly used to get or modify the content or value of HTML elements and apply certain effects.

To do this, you must first find the element. There are many ways to do this:

to find HTML elements by ID
to find HTML elements by tag name
Find HTML elements through class name
Find HTML elements through CSS selectors
Find HTML elements through HTML object collections

to find HTML elements by ID

You can usegetElementById()The method selects elements based on the unique ID of the element.

This is the simplest way to find HTML elements in the DOM tree.

The following example selects an element with an ID attributeid="msg"elements:

Example

var x = document.getElementById("msg");

Test and see‹/›

If the element is found, this method will return the element as an object.

If the element is not found, myElement will contain null.

to find HTML elements by tag name

You can also usegetElementsByTagName()The method selects HTML elements by tag name.

This method returns a list similar to an array of all elements in the document with the specified tag name.

This example selects all<p>Element:

Example

var x = document.getElementsByTagName("p");

Test and see‹/›

Change the background color of all paragraph elements in the document:

Example

var x = document.getElementsByTagName("p");
for(let i = 0; i < x.length;++) {
　　　x[i].style.backgroundColor = "coral";
}

Test and see‹/›

This example selectsid="wrapper"elements, then select“wrapper”all elements inside<p>Element:

Example

var x = document.getElementById("wrapper");
var y = x.getElementsByTagName("p");

Test and see‹/›

Find HTML elements through class name

You can use thegetElementsByClassName()Method to select all elements with a specific class name.

This method returns a list similar to an array of all elements in the document with the specified class name.

This example returns all elements withclass="demo"List of elements:

Example

var x = document.getElementsByClassName("demo");

Test and see‹/›

Find HTML elements through CSS selectors

You can use thequerySelectorAll()Method to select elements that match the specified CSS selector (ID, class, type, etc.).

This method returns a list similar to an array of all elements that match the specified selector.

CSS selectors provide a very powerful and effective method for selecting HTML elements in the document.

Example

var x = document.querySelectorAll("div");

Test and see‹/›

This example returns elements with"note"All<div>List of elements:

Example

var x = document.querySelectorAll("div.note");

Test and see‹/›

Find HTML elements through HTML object collections

The top-level element of an HTML document can be used directly as a document property.

For example, you can use the property to access<html>Elementdocument.documentElement.

TheComponents can be accesseddocument.bodyProperty.

Example

var html = document.documentElement;
var body = document.body;

Test and see‹/›

Note:Ifdocument.bodyInUsed before a tag (for example, inInside <head>), which will return null instead of the body element.

You can also access the following HTML objects (and object collections):

Property	Description
document.anchors	Returns all elements with a name attribute<a>Element
document.applets	Return all<applet>Element(In HTML5(Deprecated)
document.baseURI	Returns the absolute base URI of the document
document.body	ReturnElement
document.cookie	Returns the cookie of the document
document.doctype	Returns the document type of the document
document.documentElement	Return<html>Element
document.documentMode	Returns the mode used by the browser
document.documentURI	Returns the URI of the document
document.domain	Return the domain name of the document server
document.domConfig	Deprecated;Return the DOM configuration
document.embeds	Return all<embed>Element
document.forms	Return all<form>Element
document.head	Return<head>Element
document.images	Return all<img>Element
document.implementation	Return the DOM implementation
document.inputEncoding	Return the encoding (character set) of the document
document.lastModified	Return the date and time of the document update
document.links	Return all elements with the href attribute<area>and<a>Element
document.readyState	Return the (loading) status of the document
document.referrer	Return the URI of the referer (link document)
document.scripts	Return all<script>Element
document.strictErrorChecking	Return whether strict error checking is enforced
document.title	Return<title>Element
document.URL	Return the complete URL of the document

JS DOM Change HTML Content JS HTML DOM Methods