Comparison between innerText and textContent#
Summary as follows:
- The line breaks of the text obtained by innerText are preserved;
- innerText cannot retrieve hidden text;
- innerText has relatively poorer performance;
Due to the special characteristics, compatibility differences, performance issues, and considerations of actual development requirements, it is not recommended to use innerText. It is recommended to use textContent to retrieve text content.
var text = dom.textContent
If your project needs to be compatible with IE8 browser, use the following code:
var text = dom.textContent || dom.innerText
Note: The v-text directive in Vue updates the element's textContent.
Comparison between getAttribute and dataset object#
For example, consider the following HTML:
<button id="button" data-author="zhangxinxu">Who is the author?</button>
Both getAttribute and dataset object can be used to retrieve the value of the data-author attribute:
button.getAttribute('data-author') // zhangxinxu
button.dataset.author // zhangxinxu
The difference lies in the case sensitivity. The getAttribute method is case-insensitive, while the dataset object must be accessed in lowercase, for example:
<button id="button" data-AUTHOR="zhangxinxu">Who is the author?</button>
button.getAttribute('DATA-author') // zhangxinxu
button.dataset.AUTHOR // undefined
button.dataset.author // zhangxinxu
If a custom attribute contains multiple word groups, the dataset object property value needs to be accessed using camel case:
<button id="button" data-article-author="zhangxinxu">Thank you for reading!</button>
button.getAttribute('data-article-author') // zhangxinxu
button.dataset.articleAuthor // zhangxinxu
Comparison between getElementById and querySelector#
In general, these two methods are equivalent, but it is recommended to use the getElementById() method because it has the strongest fault tolerance and is less likely to cause interruption in JS execution.
Assuming the ID of an element is unknown and passed as a parameter, but this string parameter can be various. Let's say the string is 'thanksForShare!', now run the following code:
document.getElementById('thanksForShare!') // runs normally
document.querySelector('#thanksForShare!') // throws an error
The getElementById() method safely returns null, but the querySelector() method throws an error:
VM309:1 Uncaught DOMException: Failed to execute ‘querySelector’ on ‘Document’: ‘#thanksForShare!’ is not a valid selector.
This means that when using the querySelector() method, we need to validate the selector inside it for legality or handle it with try...catch, otherwise it will affect the entire JavaScript code. Therefore, it is recommended to use the getElementById() method to retrieve DOM elements.