通过类和ID - JavaScript获取元素内的元素
通过类和ID - JavaScript获取元素内的元素
提问于 2011-10-19 08:45:10
好吧，我以前曾经涉足过JavaScript，但我写过的最有用的东西是一个样式切换器。所以我对此还是个新手。假设我有这样的HTML代码：
<div id="foo">
<div class="bar">
Hello world!
</div>
</div>如何将Hello world!更改为Goodbye world!
我知道document.getElementsByClassName和document.getElementById是如何工作的，但我想说得更具体一些。如果之前有人问过这个问题，很抱歉。
回答 6
Stack Overflow用户
回答已采纳
发布于 2011-10-19 08:47:50
首先，您需要使用像getElementById这样的函数来选择元素。
var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];getElementById只返回一个节点，但getElementsByClassName返回一个节点列表。因为只有一个元素具有那个类名(据我所知)，所以您可以只获取第一个元素(这就是[0]的用途-它就像一个数组)。
然后，您可以使用.textContent更改html。
targetDiv.textContent = "Goodbye world!";
var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
targetDiv.textContent = "Goodbye world!";<div id="foo">
<div class="bar">
Hello world!
</div>
</div>
Stack Overflow用户
发布于 2011-10-19 08:53:11
如果这需要在IE7或更低版本中工作，你需要记住getElementsByClassName并不是在所有的浏览器中都存在。因此，您可以创建自己的getElementsByClassName，也可以尝试这样做。
var fooDiv = document.getElementById("foo");
for (var i = 0, childNode; i <= fooDiv.childNodes.length; i ++) {
childNode = fooDiv.childNodes[i];
if (/bar/.test(childNode.className)) {
childNode.innerHTML = "Goodbye world!";
}
}Stack Overflow用户
发布于 2017-10-28 06:47:32
最简单的方法是：
function findChild(idOfElement, idOfChild){
let element = document.getElementById(idOfElement);
return element.querySelector('[id=' + idOfChild + ']');
}或者更好的可读性：
findChild = (idOfElement, idOfChild) => {
let element = document.getElementById(idOfElement);
return element.querySelector(`[id=${idOfChild}]`);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7815374
复制相关文章
相似问题