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

好吧，我以前涉足过 JavaScript，但是我写过的最有用的东西是 CSS 样式切换器。所以我还是个新手。假设我有这样的 HTML 代码:

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

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

我知道 document.getElementsByClassName和 document.getElementById是如何工作的，但是我想知道更多的细节。如果以前有人问过这个问题，我很抱歉。

552302 次浏览
小开

你可以这样做:

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!");
小开
最佳答案

首先，您需要使用像 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>

小开

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

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

如果您想要任何删除编辑任何操作，那么只需在后面添加“ .”并执行操作

小开

递归函数:

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

最简单的方法是:

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

你也可以在 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>

小开

我们还可以在 querySelector 中使用 CSS 选择器

var targetDiv = document.querySelector('#foo .bar');
targetDiv.textContent = "Goodbye world!";

提交答案