Javascript HTML DOM選擇

Question

我有一個關於使用JavaScript選擇HTML元素的問題。

這是我的代碼：

Java腳本

<script>
    function changeText() { 
        document.getElementsByClassName("CentralContainer")[0].getElementsByClassName("PlayFlowSelect")[0].childNodes[1].innerHTML = "Custom Stream";
                }
</script>

的HTML

<div class="CentralContainer">
        <div class = "PlayFlowSelect">
            <input type="image" src="./Home Page Resources/ArrowLeftIcon.png" onclick="changeText()">
            <h2> Top Stories </h2>
            <input type="image" src="./Home Page Resources/ArrowRightIcon.png" onclick="alert('Trigger Upload Page')">
        </div>

由於某種原因，我在JavaScript中的選擇路徑未選擇h2 innerHTML。 我不確定為什么...有什么幫助嗎？

Answer 1

如注釋中所建議， childNodes屬性包括所有子節點，包括文本節點，這意味着您想要的h2將是childNodes[3] 。

您可以使用.children屬性來獲取元素子級：

function changeText() { 
    document.getElementsByClassName("CentralContainer")[0]
            .getElementsByClassName("PlayFlowSelect")[0]
            .children[1].textContent = "Custom Stream";
}

但是，正如其他答案和評論所建議的那樣，這不是最干凈或最可靠的方法。

Answer 2

您可以對其稍作更改，以通過標簽名稱獲取H2元素

document.getElementsByClassName("CentralContainer")[0].
getElementsByClassName("PlayFlowSelect")[0].
getElementsByTagName('h2')[0].innerHTML;

讀取位清除器（IMO），然后讀取更多數組節點索引，並避免使用其他ID

Answer 3

給<h2>標記一個ID並調用getElementById()

function changeText() { 
        document.getElementById("header").innerHTML = "test";
}

<div class="CentralContainer">
        <div class = "PlayFlowSelect">
            <input type="image" src="./Home Page Resources/ArrowLeftIcon.png" onclick="changeText()">
            <h2 id="header"> Top Stories </h2>
            <input type="image" src="./Home Page Resources/ArrowRightIcon.png" onclick="alert('Trigger Upload Page')">
        </div>
</div>

希望這會有所幫助。 最好的祝福