虛拟dom與真實dom區别?你可能知道，獲取和設置 DOM 元素内部文本可以用這兩個屬性：Node.textContent 和 Element.innerText，我來為大家講解一下關于虛拟dom與真實dom區别?跟着小編一起來看一看吧!

虛拟dom與真實dom區别

你可能知道，獲取和設置 DOM 元素内部文本可以用這兩個屬性：Node.textContent 和 Element.innerText。

乍一看，它們似乎做着完全相同的事情，但它們之間有一些微妙但重要的區别。今天，我們來看看它們的作用，以及它們的異同之處。

廢話不說，直接看代碼。

比如下面這個 DOM 元素。

<p id="sandwich">I love a good tuna sandwich!</p>

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;

如果元素内部還有其他标簽，它們都會忽略。

<p id="sandwich">I love a good <strong>tuna</strong> sandwich!</p>

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

另外，這兩個屬性都能用于設置元素内部文本。

// 替換文本 // <p id="sandwich">Hello, world!</p> sandwich.textContent = 'Hello, world!'; // 也可以追加 // <p id="sandwich">Hello, world! And hi, Universe!</p> sandwich.innerText = ' And hi, Universe!';

看上去做着同樣的事情，那麼它們有什麼區别？

• Node.textContent 屬性獲取全部文本内容，包括元素内部那些未渲染到頁面的内容。
• Element.innerText 返回渲染出來的文本，類似于可以用光标和鍵盤選中的文本部分。

舉個例子就清楚了。

<div class="greeting"> <style type="text/css"> p { color: rebeccapurple; } </style> <p hidden>This is not rendered.</p> <p>Hello world!</p> </div>

let greeting = document.querySelector('.greeting'); /* 返回 p {color: rebeccapurple;} This is not rendered. Hello world! */ let text1 = greeting.textContent; // 返回 "Hello world!" let text2 = greeting.innerText;

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!