Javascript HTML DOM选择

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

这是我的密码：

Javascript

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

函数changeText（）{
document.getElementsByClassName（“CentralContainer”）[0]。getElementsByClassName（“PlayFlowSelect”）[0]。childNodes[1]。innerHTML=“自定义流”；
}

HTML

头条新闻

出于某种原因，我的javascript中的选择路径没有选择HTML。我不知道为什么。。。有什么帮助吗？

给

标记一个ID并调用

getElementById（）

函数changeText（）{
document.getElementById（“header”）.innerHTML=“test”；
}
头条新闻

希望这有帮助。

---

致以最诚挚的问候

正如评论中所建议的那样，

childNodes

属性包括所有子节点，包括文本节点，这意味着您想要的

h2

将是

childNodes[3]

您可以使用该属性仅获取元素子元素：

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

---

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

您可以稍微更改它，以通过标记名获得H2元素

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

---

读取稍微干净一点（IMO）的数组节点索引，然后读取更多的数组节点索引，并避免附加id

可能您正在选择一个文本节点（元素之间的空格）。尝试获取已检索节点的

节点类型

。我认为这样选择元素不是一个好主意。如果出于某种原因，您在

标记之前放置了其他html元素，则代码将无法正常工作。类似于@atmd的答案在我看来更好。我同意——从长远来看，这可能会破裂。JLRishe的答案很好地解释了为什么它目前不起作用，并且在本例中是正确的答案。使用会更好，因为您可以只使用

document.querySelectorAll（'.CentralContainer.PlayFlowSelect h2'）

@JamesThorpe好的，我同意。JLRishe解释了它工作的真正原因，但如果我必须这样做，我会按照MD的方式来做。textContent和innerHTML之间的区别是什么？区别在于

el.textContent='Hi！'

将在页面中显示

Hi

，而

el.innerHTML='Hi！'将显示Hi！在页面中。最好的做法是避免
innerHTML
，除非您特别将值视为HTML<代码>innerHTML

会产生漏洞和其他问题的风险。

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

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