知道這兩個 DOM 屬性區別的，頭髮應該不多了吧？
阿新 • • 發佈：2021-02-24
你可能知道，獲取和設定 DOM 元素內部文字可以用這兩個屬性：`Node.textContent` 和 `Element.innerText`。
乍一看，它們似乎做著完全相同的事情，但它們之間有一些微妙但重要的區別。今天，我們來看看它們的作用，以及它們的異同之處。
廢話不說，直接看程式碼。
## 相同之處
比如下面這個 DOM 元素。
```
I love a good tuna sandwich!
``` `Node.textContent` 和`Element.innerText`屬性都能獲取`#sandwich` 元素內部的文字。 ``` 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; ``` 如果元素內部還有其他標籤，它們都會忽略。 ```I love a good tuna sandwich!
Hello, world!
sandwich.textContent = 'Hello, world!'; // 也可以追加 //Hello, world! And hi, Universe!
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; ``` 這下總算知道區別了！又躺學了一個知識點~ 本文首發於公眾號 1024譯站 ![](https://img2020.cnblogs.com/blog/121167/202009/121167-20200914095203786-71350