好吧，首先您需要选择具有类似函数的元素getElementById。

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];

getElementById只返回一个节点，但getElementsByClassName返回一个节点列表。由于只有一个具有该类名的元素（据我所知），您可以只获取第一个元素（这[0]就是它的用途——它就像一个数组）。

然后，您可以使用 .html 更改 html .textContent。

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>

你可以这样做：

var list = document.getElementById("foo").getElementsByClassName("bar");
if (list && list.length > 0) {
    list[0].innerHTML = "Goodbye world!";
}

或者，如果您想以更少的错误检查和更简洁的方式完成它，可以像这样在一行中完成：

document.getElementById("foo").getElementsByClassName("bar")[0].innerHTML = "Goodbye world!";

在解释：

1. 你用id="foo".
2. 然后，您会找到包含在该对象中的具有class="bar".
3. 这将返回一个类似数组的 nodeList，因此您引用该 nodeList 中的第一项
4. 然后您可以设置该innerHTML项目的 以更改其内容。

警告：一些较旧的浏览器不支持getElementsByClassName（例如较旧版本的 IE）。如果缺少该功能，可以将其填充到位。

这就是我建议使用具有内置 CSS3 选择器支持的库的地方，而不是自己担心浏览器兼容性（让其他人完成所有工作）。如果你只想要一个图书馆来做到这一点，那么 Sizzle 会很好用。在 Sizzle 中，这将是这样完成的：

Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";

jQuery 内置了 Sizzle 库，在 jQuery 中，这将是：

$("#foo .bar").html("Goodbye world!");

如果这需要在 IE 7 或更低版本中工作，您需要记住 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!";
    }
}

最简单的方法是：

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}]`);
}

递归函数：

function getElementInsideElement(baseElement, wantedElementID) {
    var elementToReturn;
    for (var i = 0; i < baseElement.childNodes.length; i++) {
        elementToReturn = baseElement.childNodes[i];
        if (elementToReturn.id == wantedElementID) {
            return elementToReturn;
        } else {
            return getElementInsideElement(elementToReturn, wantedElementID);
        }
    }
}