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

document.getElementsByTagName 返回的是一個 HTMLCollection，這個集合可以通過索引訪問到特定的元素。要區分和識別從 document.getElementsByTagName 返回的元素，可以使用以下幾種方法：

使用索引：可以通過索引直接訪問 HTMLCollection 中的元素。
檢查元素的屬性：如 id、class 等屬性，這些屬性可以幫助識別特定的元素。
使用 for 迴圈或 Array.prototype.forEach：迭代 HTMLCollection，並根據元素的屬性進行操作。
以下是一個具體範例：

範例 HTML 和部分視圖

_PartialView.cshtml

<div id="partial-content">
    <p id="para1">第一個段落</p>
    <p class="highlight">第二個段落</p>
    <p id="para3">第三個段落</p>
</div>

主視圖 (Index.cshtml)
在主視圖中，我們加載部分視圖並在成功加載後區分和識別段落元素：

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');

                        // 使用 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>

分析
按索引訪問：可以通過索引直接訪問 HTMLCollection 中的元素，如 paragraphs[0] 代表第一個段落。
檢查屬性：使用 id 和 class 屬性來區分和識別元素。在這個例子中，我們使用了 id 屬性來改變第一個段落的顏色，使用了 class 屬性來改變具有 highlight 類的段落的顏色。
使用迴圈：使用 for 迴圈遍歷 HTMLCollection 中的所有段落，並根據元素的屬性進行不同的操作。
這樣可以確保在部分視圖加載完成後，能夠正確地區分和識別特定的元素並進行操作。

Google Code Prettify

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