In javascript, we have so many methods for accessing elements but, There are five important or common methods-
- document.getElementByid
- document.getElementByTageName
- document.getElementByClassName
- document.queryselector
- document.queryselectorall
1. Document.getElementByid
The document method getElementByid() returns an element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they’re a useful way to get access to a specific element quickly.
Syntax= getElementById(id)
2.Document.getElementByTageName
The getElementsByTagenamemethod of document interface returns an htmlcollection of elements with the given tag name. The complete document is searched, including the root node. returned htmlcollection
is live, meaning that it updates itself automatically to stay in sync with the DOM tree without having to call document.getElementsByTagName()
again.
Syntax= getElementsByTagName(name)
3.document.getElementByClassName
The getElementByClassName() method of document interface returns an array-like object of all child elements which have all of the given class name(s).
When called on the document object, the complete document is searched, including the root node. You may also call The getElementByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class name(s).
Synta= getElementsByClassName(names)
4. document.queryselector
.The document method queryselector(0 returns the first element within the document that matches the specified selector, or group of selectors. If no matches are found, null
is returned. The matching is done using depth-first pre-order traversal of the document’s nodes starting with the first element in the document’s markup and iterating through sequential nodes by order of the number of child nodes.
Syntax= querySelector(selectors)
5. document.queryselectorall
The document method queryselectorall() returns a static (not live) representing a list of the document’s elements that match the specified group of selectors.
Syntax= querySelectorAll(selectors)