179

好吧，我以前涉足过 JavaScript，但我写过的最有用的东西是 CSS 样式切换器。所以我对此有些陌生。假设我有这样的 HTML 代码：

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

我将如何更改Hello world!为Goodbye world!？

我知道如何document.getElementsByClassName工作document.getElementById，但我想更具体一些。抱歉，如果之前有人问过这个问题。

4

8 回答 8

310

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

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

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

然后，您可以使用.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>

于 2011-10-19T00:47:49.983 回答
18

你可以这样做：

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. 这将返回一个类似数组的节点列表，因此您引用该节点列表中的第一项
  4. 然后，您可以设置该innerHTML项目的 以更改其内容。

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

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

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

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

$("#foo .bar").html("Goodbye world!");
于 2011-10-19T00:46:59.317 回答
7

如果这需要在 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!";
    }
}
于 2011-10-19T00:53:10.663 回答
6

最简单的方法是：

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}]`);
}
于 2017-10-27T22:47:32.067 回答
4

递归函数：

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);
        }
    }
}
于 2015-10-18T13:17:56.427 回答
1

你也可以在 DOM 元素上使用getElementByIdor 。getElementsByClassName而不仅仅是document

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
targetDiv.textContent = "Goodbye world!";
<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

于 2021-11-15T21:33:25.033 回答
0

我们还可以通过 querySelector 使用 CSS 选择器

var targetDiv = document.querySelector('#foo .bar');
targetDiv.textContent = "Goodbye world!";
于 2022-03-02T18:43:30.340 回答
-6

您不应该使用document.getElementByID，因为它仅适用于客户端控制哪些 id 是固定的。您应该使用 jquery 代替，如下例所示。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                                                                                                             
<div id="foo">
   <div class="bar"> 
          Hello world!
     </div>
</div>

用这个 ：

$("[id^='foo']").find("[class^='bar']")

// do not forget to add script tags as above

如果您想要任何删除编辑任何操作，那么只需添加“。” 后面做操作

于 2015-08-01T18:22:11.413 回答