innerText、textContent、wholeText、nodeValue、data

Posted on Edited on In Views: Disqus:

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        span {
            display: none;
        }
    </style>
</head>

<body>
    <p><!--commenteStart-->Hello <span>world</span> <span>world</span>!!!<!--commenteEnd--></p>

    <script>
        var innerText = document.getElementsByTagName("p")[0].innerText;
        console.log(innerText);
        var textContent = document.getElementsByTagName("p")[0].textContent;
        console.log(textContent);
        var wholeText = document.getElementsByTagName("p")[0].childNodes[1].wholeText;
        console.log(wholeText);
        var nodeValue = document.getElementsByTagName("p")[0].firstChild.nodeValue;
        console.log(nodeValue);
        var data = document.getElementsByTagName("p")[0].firstChild.data;
        console.log(data);
    </script>
</body>

</html>

於 console 端的執行結果如圖

 

說明：

1、innerText

innerText 是用來取得或設定一個元素裡可視文字。

 

2、textContent

textContent 是用來取得或設定一個元素裡可視文字，也包含隱藏字。

 

3、wholeText

wholeText 是用來取得一個節點裡可視文字。

 

4、nodeValue

nodeValue 是用來取得或設定一個節點裡可視文字，也包含註解元素，但不包含隱藏字。

 

5、data

data 是用來取得或設定一個節點裡可視文字，也包含註解元素，但不包含隱藏字。