知道這兩個(gè)DOM屬性區(qū)別的，頭發(fā)應(yīng)該不多了吧？
你可能知道，獲取和設(shè)置 DOM 元素內(nèi)部文本可以用這兩個(gè)屬性：Node.textContent 和 Element.innerText。
乍一看，它們似乎做著完全相同的事情，但它們之間有一些微妙但重要的區(qū)別。今天，我們來看看它們的作用，以及它們的異同之處。
廢話不說，直接看代碼。
相同之處
比如下面這個(gè) DOM 元素。
- I love a good tuna sandwich!
Node.textContent 和Element.innerText屬性都能獲取#sandwich 元素內(nèi)部的文本。
- 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;
如果元素內(nèi)部還有其他標(biāo)簽，它們都會忽略。
- 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;
另外，這兩個(gè)屬性都能用于設(shè)置元素內(nèi)部文本。
- // 替換文本
- // Hello, world!
- sandwich.textContent = 'Hello, world!';
-
- // 也可以追加
- // Hello, world! And hi, Universe!
- sandwich.innerText += ' And hi, Universe!';
不同之處
看上去做著同樣的事情，那么它們有什么區(qū)別?
- Node.textContent 屬性獲取全部文本內(nèi)容，包括元素內(nèi)部那些未渲染到頁面的內(nèi)容。
- Element.innerText 只返回渲染出來的文本，類似于可以用光標(biāo)和鍵盤選中的文本部分。
舉個(gè)例子就清楚了。
-
-
- p {
- color: rebeccapurple;
- }
-
- This is not rendered.
-
Hello world!
- let greeting = document.querySelector('.greeting');
-
- /* 返回
- p {color: rebeccapurple;}
- This is not rendered.
- Hello world!
- */
- let text1 = greeting.textContent;
-
- // 返回 "Hello world!"
- let text2 = greeting.innerText;
這下總算知道區(qū)別了!又躺學(xué)了一個(gè)知識點(diǎn)~
本文轉(zhuǎn)載自微信公眾號「1024譯站」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系1024譯站公眾號。
分享題目：知道這兩個(gè)DOM屬性區(qū)別的，頭發(fā)應(yīng)該不多了吧？
分享網(wǎng)址：
http://uogjgqi.cn/article/dpgjjph.html
