Accessing DOM Elements
The DOM model represents a document with a logical tree . The tree structure is called a node-tree. Each branch of the tree ends in a node, and each node contains objects. All nodes can be accessed through the tree. Their contents can be modified or deleted , and new elements can be created.Document Object
The Document Object represents the HTML document itself. It describes the objects (or nodes) that make up the document structure, and the interfaces that enable document objects to be accessed and manipulated by scripts and programs. It gives developers a way of representing everything on a web page so that the contents of the web page is accessible via a common set of properties and methods.DOM Methods
The most common way to select an element is the document.getElementById method. Each element in a HTML document can have an optional ID attribute, which must be unique. This method takes a ID string and returns the reference to the element with the ID, or null if there is no such element. The getElementById() and getElementsByTagName() were the two methods from DOM standard and the HTML5 specification adds three new methods for accessing elements, getElementsByClassName(), querySelector(), and querySelectorAll().- getElementById() - Finding by ID
- getElementsByClassName()- Finding by Class
- getElementsByTagName() - Finding by Tag
- querySelector() - Finding by Selector (single)
- querySelectorAll() - Finding by Selector (all)
getElementById()
Javascript provides a document.getElementById() method, which is the easiest way to access an element from the DOM tree structure. It will return the element that has the ID attribute with the specified value.
document.getElementById('heading')
Browser ViewDocument Object Model
<html>
<body>
<h1 id="heading">Access this text....</h1>
<button onclick="changeIt()">Get Value</button>
<script>
function changeIt() {
var title_element = document.getElementById('heading').innerHTML;
alert(title_element);
}
</script>
</body>
</html>
getElementsByTagName()
The getElementsByTagName() method returns a collection of an elements' child elements with the specified tag name, as a NodeList object. Browser ViewParagraph 1
Paragraph 2
<html>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<button onclick="count()">Get Value</button>
<script>
function count() {
var cnt = document.getElementsByTagName("p");
alert(cnt.length); }
</script>
</body>
</html>
getElementsByClassName()
The getElementsByClassName() returns an array-like object of all child elements which have all of the given class names.
document.getElementsByClassName("ClassName");
Browser ViewParagraph 1
Paragraph 2
<html>
<body>
<p class="testClass">Paragraph 1</p>
<p class="testClass">Paragraph 2</p>
<button onclick="count()">Change Value</button>
<script>
function count() {
var tmpClass = document.getElementsByClassName("testClass");
alert(tmpClass.length);
tmpClass[0].innerHTML ="First Paragraph changed !!";
}
</script>
</body>
</html>
The above program first alert 2, the number of p elements, and then it change the first p element's text to "First Paragraph changed !!".
Modern browsers have APIs called querySelector() and querySelectorAll() . They find one or more elements matching a CSS selector. These methods queries a HTML document for DOM elements that match a CSS selector. It is built-in browser support for the selector query features that made javascript libraries so popular.querySelector() example
querySelector() returns the first element within the document that matches the specified group of selectors, or null if no matches are found.
Browser ViewParagraph 1
Paragraph 2
<html>
<body>
<p id="qSelector">Paragraph 1</p>
<p id="qSelector1">Paragraph 2</p>
<button onclick="change()">Change Value</button>
<script>
function change() {
document.querySelector("#qSelector").innerHTML ="First Paragraph";
}
</script>
</body>
</html>
querySelectorAll() example
querySelectorAll() returns a list of the elements that match the specified group of selectors in source order. Since it is a static collection, the modification of the document has no effect on the collection. Browser Viewdiv content 1
Paragraph 2
<html>
<body>
<div class="div_">div content 1</div>
<p class="p_">Paragraph 2</p>
<button onclick="change()">Change Value</button>
<script>
function change() {
var elements = document.querySelectorAll(".div_,.p_");
elements[0].innerHTML = "div content changed";
elements[1].innerHTML = "Paragraph changed";
}
</script>
</body>
</html>
Related Topics