我有一个关于使用 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。我不知道为什么......有什么帮助吗?
最佳答案
正如评论中所建议的,childNodes
属性包含所有 个子节点,包括文本节点,这意味着您想要的 h2
将是childNodes[3]
。
您可以使用.children
属性只获取元素子元素:
function changeText() {
document.getElementsByClassName("CentralContainer")[0]
.getElementsByClassName("PlayFlowSelect")[0]
.children[1].textContent = "Custom Stream";
}
但正如其他答案和评论所暗示的那样,这不是最干净或最可靠的方法。
关于Javascript HTML DOM 选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28071096/