Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "what is the difference between the two DOM attributes". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Something in common

For example, the following DOM element.

I love a good tuna sandwich!

Both the Node.textContent and Element.innerText attributes can get the text inside the # sandwich element.

Let sandwich = document.querySelector ('# sandwich'); / / returns "I love a good tuna sandwich!" Let text1 = sandwich.textContent; / / also returns "I love a good tuna sandwich!" Let text2 = sandwich.innerText

If there are other tags inside the element, they will be ignored.

I love a good tuna sandwich!

/ / returns "I love a good tuna sandwich!" Let textHTML1 = sandwich.textContent; / / also returns "I love a good tuna sandwich!" Let textHTML2 = sandwich.innerText

In addition, both attributes can be used to set the internal text of the element.

/ / replace the text / / Hello, world!

Sandwich.textContent = 'Hello, Worldwide world; / / you can also append / / Hello, world! And hi, Universe!

Sandwich.innerText + = 'And hi, Universeware'

Differences

They seem to be doing the same thing, so what's the difference between them?

The Node.textContent attribute gets all the text content, including those inside the element that are not rendered to the page.

Element.innerText returns only the rendered text, similar to parts of the text that can be selected with the cursor and keyboard.

For example, it will be clear.

P {color: rebeccapurple;} This is not rendered.

Hello world!

Let greeting = document.querySelector ('.greeting'); / * returns p {color: rebeccapurple;} This is not rendered. Hello world! * / let text1 = greeting.textContent; / / returns "Hello world!" Let text2 = greeting.innerText;, that's all for "what's the difference between the two DOM attributes?" Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.