Tools Tags
directory
HTML DOM access
Access HTML DOM - Find HTML elements.
Accessing HTML elements (nodes)
Accessing HTML elements is equivalent to accessing nodes
You can access HTML elements in different ways:
By using the getElementById() method
By using the getElementsByTagName() method
By using the getElementsByClassName() method
getElementById() method
getElementById() method returns the element with the specified ID:
Syntax
The following example gets the element with id="intro":
Instance
<html><!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementById</b> method!</p>
<script>
x=document.getElementById("intro");
document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>");
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
getElementsByTagName() method
getElementsByTagName() Returns all elements with the specified tag name.
Syntax
The following example returns Contains a list of all <p> elements in the document:
Instance
<html><!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
<script>
x=document.getElementsByTagName("p");
document.write("Text of first paragraph: " + x[0].innerHTML);
</script>
</body>
</html>Run Example»
Click "Run" Example" button to view online examples
The following example returns a list containing all <p> elements in the document, and these <p> elements should be descendants of the element with id="main" ( Children, grandchildren, etc.):
Instance
<html><!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method</p>
</div>
<script>
x=document.getElementById("main").getElementsByTagName("p");
document.write("First paragraph inside the div: " + x[0].innerHTML);
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view online Example
The getElementsByClassName() Method
If you want to find all HTML elements with the same class name, use this method:
The above example returns a list of all elements containing class="intro":
Note:getElementsByClassName() does not work in Internet Explorer 5,6,7,8.
Related videos
![Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum]](https://img.php.cn/upload/course/000/000/035/5d27fb58823dc974.jpg)
Hot AI Tools
Undress images for free
Online AI tool for removing clothes from photos.
AI-powered app for creating realistic nude photos
AI image generator for creative art from text prompts.
AI powered investment research for smarter decisions
Hot Article
Hot Topics
20536
7
13640
4
Popular tool
Easy-to-use and free code editor
Chinese version, very easy to use
Powerful PHP integrated development environment
Visual web development tools
God-level code editing software (SublimeText3)