js获取html(获取HTML页面中的元素文本内容 – 简易教程)

Introduction

JavaScript is a popular programming language used to develop web-based applications. It is capable of manipulating HTML elements on a web page, creating animations, and responding to user interactions. One of the tasks that JavaScript can easily accomplish is getting the content of an HTML element on a page. In this article, we'll explore different techniques to retrieve HTML elements' text content using JavaScript.

Using getElementById()

The getElementById() method allows you to retrieve an HTML element's text content by its unique ID. The method begins by creating a reference to the element using its ID and then accessing the reference's innerHTML property. Let's take a look at an example of this technique:

var element = document.getElementById('myElement');

var elementText = element.innerHTML;

In this example, we first create a reference to an HTML element with the ID "myElement". We then access the element's text content using the innerHTML property and store it in the variable 'elementText'. This technique is useful when you need to retrieve the text content of a single element on a page.

Using querySelector()

The querySelector() method allows you to retrieve an HTML element's text content by specifying its CSS selector. The method begins by creating a reference to the element using its selector and then accessing the reference's innerHTML property. Let's take a look at an example of this technique:

var element = document.querySelector('.myClass');

var elementText = element.innerHTML;

In this example, we use the querySelector() method to create a reference to an HTML element with the class "myClass". We then access the element's text content using the innerHTML property and store it in the variable 'elementText'. This technique is useful when you need to retrieve the text content of an element that matches a specific CSS selector.

Using getElementsByTagName()

The getElementsByTagName() method allows you to retrieve an array of all HTML elements on a page with a specified tag name. You can then iterate through this array to access each element's text content using the innerHTML property. Let's take a look at an example of this technique:

var elementArray = document.getElementsByTagName('p');

for (var i = 0; i < elementArray.length; i++) {
    var elementText = elementArray[i].innerHTML;
}

In this example, we use the getElementsByTagName() method to retrieve an array of all the 'p' elements on the page. We then loop through this array and access each element's text content using the innerHTML property and store it in the variable 'elementText'. This technique is useful when you need to retrieve the text content of multiple elements on a page with the same tag name.

Using getElementsByClassName()

The getElementsByClassName() method allows you to retrieve an array of all HTML elements on a page with a specified class name. You can then iterate through this array to access each element's text content using the innerHTML property. Let's take a look at an example of this technique:

var elementArray = document.getElementsByClassName('myClass');

for (var i = 0; i < elementArray.length; i++) {
    var elementText = elementArray[i].innerHTML;
}

In this example, we use the getElementsByClassName() method to retrieve an array of all the elements with the class "myClass" on the page. We then loop through this array and access each element's text content using the innerHTML property and store it in the variable 'elementText'. This technique is useful when you need to retrieve the text content of multiple elements on a page with the same class name.

Conclusion

In this article, we explored different techniques to retrieve HTML elements' text content using JavaScript. We discussed using getElementById(), querySelector(), getElementsByTagName(), and getElementsByClassName(). Each technique has its advantages and disadvantages depending on the scenario in which it's applied. By knowing the available techniques, you can choose the right method for your web application's requirements.