Javascript HTML DOM 选择

Question

我有一个关于使用 javascript 选择 HTML 元素的问题。

这是我的代码:

Javascript

<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 insideHTML。我不知道为什么......有什么帮助吗？

Answer 1

正如评论中所建议的，childNodes 属性包含所有 个子节点，包括文本节点，这意味着您想要的 h2将是childNodes[3]。

您可以使用.children属性只获取元素子元素:

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

但正如其他答案和评论所暗示的那样，这不是最干净或最可靠的方法。