通过类和 ID 获取元素内的元素 - JavaScript

Question

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

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

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

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

Answer 1

嗯，首先你需要用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>

Answer 2

你可以这样做：

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!");

Answer 3

如果这需要在 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!";
    }
}

Answer 4

最简单的方法是：

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

Answer 5

递归函数：

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

Answer 6

您也可以在 DOM 元素上使用 getElementById 或 getElementsByClassName。而不仅仅是document

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

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

Answer 7

您不应该使用 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

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