asp.net: getElementsByTagName

在部分視圖（Partial View）中使用 document.getElementsByTagName 無法正確獲取元素時，可能的原因有以下幾種：

DOM 還未準備好：如果你嘗試在 DOM 尚未完全加載時訪問元素，可能會出現 undefined。
範圍問題：在 AJAX 加載部分視圖時，新的元素可能尚未添加到 DOM 中，導致選擇器無法找到它們。
元素不存在：確保你的部分視圖包含了你想要選擇的元素。
要解決這些問題，可以使用 jQuery 的 ready 方法或在 AJAX 請求完成後運行你的 JavaScript 代碼。以下是一個完整的範例：

1. HTML 和 JavaScript
假設我們有一個部分視圖 _PartialView.cshtml，其中包含一些元素：

_PartialView.cshtml
html

<div id="partial-content">
    <p>部分視圖的內容</p>
    <p>更多內容</p>
</div>

主視圖 (Index.cshtml) 在主視圖中，我們有一個按鈕，用於觸發 AJAX 加載部分視圖，並在成功加載後操作部分視圖中的元素： html

@{
    ViewData["Title"] = "Home Page";
}

<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"]</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <h1>首頁</h1>
    <button id="load-partial" class="btn btn-primary">加載部分視圖</button>
    <div id="main-content"></div>

    <script>
        $(document).ready(function () {
            $('#load-partial').click(function () {
                $.ajax({
                    url: '@Url.Action("GetPartialView", "Home")',
                    type: 'GET',
                    success: function (result) {
                        $('#main-content').html(result);

                        // 確保在部分視圖加載完成後運行代碼
                        var paragraphs = document.getElementsByTagName('p');
                        console.log(paragraphs); // 應該能夠正確獲取元素

                        // 如果要使用 jQuery
                        // var paragraphs = $('#main-content').find('p');
                        // console.log(paragraphs);
                    },
                    error: function (xhr, status, error) {
                        console.error('Error loading partial view:', status, error);
                    }
                });
            });
        });
    </script>
</body>
</html>

2. 控制器 (HomeController.cs)
確保控制器返回部分視圖：

csharp

using Microsoft.AspNetCore.Mvc;

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public IActionResult GetPartialView()
    {
        return PartialView("_PartialView");
    }
}

總結
這樣做可以確保在部分視圖加載完成後，元素存在於 DOM 中，並且 JavaScript 可以正確地選擇和操作這些元素。使用 jQuery 的 success 回調來運行代碼，可以確保操作僅在部分視圖完全加載並添加到 DOM 中後進行。

@{ ViewData["Title"] = "Home Page"; } <!DOCTYPE html> <html> <head> <title>@ViewData["Title"]</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <h1>首頁</h1> <button id="load-partial" class="btn btn-primary">加載部分視圖</button> <div id="main-content"></div> <script> $(document).ready(function () { $('#load-partial').click(function () { $.ajax({ url: '@Url.Action("GetPartialView", "Home")', type: 'GET', success: function (result) { $('#main-content').html(result); // 獲取所有段落元素 var paragraphs = document.getElementsByTagName('p'); // 使用 for 迴圈遍歷所有段落 for (var i = 0; i < paragraphs.length; i++) { var paragraph = paragraphs[i]; console.log(paragraph); // 根據 id 進行操作 if (paragraph.id === 'para1') { paragraph.style.color = 'red'; } else if (paragraph.classList.contains('highlight')) { paragraph.style.color = 'blue'; } else { paragraph.style.color = 'green'; } } }, error: function (xhr, status, error) { console.error('Error loading partial view:', status, error); } }); }); }); </script> </body> </html>

asp.net

Google Code Prettify

在部分檢視中為何document.getElementsByTagName 只能取得undefined

document.getElementsByTagName 取回的資料要如何區分識別