Html Element / javascript access

# Web Site Writing Basics

# javascript

# Access htmlElement

The HTML Element reference in JavaScript is a basic step to manage and modify the content, structure, and format of web pages (DOM Manipulation). The most common methods are as follows:

HTML Element Reference Method in JavaScript

There are several main methods in the document object used to select Elements:

1.Select from ID

This is the most straightforward method and should be used when wanting to choose a single Element that defines a unique id:

Method: document.getElementById ('elementId')

Result: Send back a single Element. Or null if not found.

Example:

JavaScript

const myDiv = document.getElementById ('main-content');

/ / myDiv will refer to < div id = "main-content" >...< / div >

2. Select from Class (class)

Used to select all Elements with the specified class name:

Method: document. getElementsByClassName ('className')

Result: Send back the HTMLCollection of all Element matches (array-like, but not).

Example:

JavaScript

const item = document getElementsByClassName ('list-item');

/ / Items will be a collection of < li > with class = "list-item."

3. Select from Tag Name

Use to select all Elements with the specified Tag name (e.g. div, p, a, button):

Method: document. getElementsByTagName ('tagName')

Result: Send back the HTMLCollection of all Element matches.

Example:

JavaScript

const paragraph = document getElementsByTagName ('p');

/ / paragraphs will be a collection of all < p > on the page.

4. Select using CSS Selector (Query Selector)

This is the most flexible and popular method today. Because complex CSS Selector can be used:

A. Select the matching first Element.

Method: document.querySelector ('selector')

Result: Send back the first Element that matches Selector or null if not found.

Example:

JavaScript

/ / Select the first Element with class as' active'

Const activeElement = document.querySelector ('.active');

/ / Select the button with ID as' submit-btn '.

Const submitButton = document.querySelector ('# submit-btn ');

/ / Select < p > inside < div >.

const firstNestedP = document.querySelector ('div > p');

B. Select all Element matches.

Method: document.querySelectorAll ('selector')

Results: Send back the NodeList of all Elements that match the Selector (array-like and can use methods such as forEach () directly).

Example:

JavaScript

/ / Select all < a > with attribute target = "_ blank"

Const externalLinks = document.querySelectorAll ('a [target = "_ blank"]');

/ / Select all Elements with class as' highlight 'and with tag as' span '.

Const highlightedSpans = document.querySelectorAll ('span.highlights');

Recommended usage summary

Scenario Recommended Method Reason

Select Single Element with ID document.getElementById () fastest and to the point for ID

Select Single Element With Selector Complex document.querySelector () Most Flexible For General Selector

Select Multi Element with Class or other Selector document.querySelectorAll (). Use CSS Selector fully and return a more intuitive NodeList than HTMLCollection.