一個容易弄錯的.textContent和text()問題

最近在寫一些前端頁面,遇到需要通過點擊事件獲取被點擊對象的文本內容,正確代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Target</title>
</head>
<body>
    <div id="tom">
        TOmCat
        </div>
</body>

<script>
    $(document).ready(function() {
        $('#tom').click(function(e) {
            var strContent = $(e.currentTarget).text(); // 這裏要用.text()獲取文本內容

            alert(strContent); // output: TOmCat
        });
    });
</script>
</html>

我一頓搜索(soso),發現還有人說可以用textContent熟悉來獲取,我試了一下,直接alert出來是undefined ,可見只能用.text()來獲取被點擊對象的文本內容。
然後 .textContent屬性一般用於某個具體的對象,舉例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Target</title>
</head>
<body>
    <div id="tom">
        TOmCat
        <div class="tabs">
            <div class="tab-item">
                Item1
            </div>
            <div class="tab-item">
                Item2
            </div>
            <div class="tab-item">
                Item3
            </div>
        </div>
        </div>
</body>

<script>
    $(document).ready(function() {
        var objectTabItems = $('#tom .tabs div.tab-item');
        var num = objectTabItems.length;
        for(var i = 0; i < num; i++) {
            let strContent = objectTabItems[i].textContent;
                alert("this click is:" + strContent);
        }
    });
</script>
</html>

可以看出來.textContent是在取到某個具體元素對象的時候使用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章