按类和ID获取元素内部元素 - JavaScript

Question

好吧,之前我曾经涉猎过JavaScript,但我写的最有用的东西是CSS样式切换器.所以我对此有些新意.假设我有这样的HTML代码:

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

我怎么改变"Hello world!" 到"再见世界!" ？我知道document.getElementByClass和document.getElementById如何工作,但我想更具体.对不起,如果之前有人询问过.

Answer 1

好吧,首先你需要选择具有类似功能的元素getElementById.

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

getElementById只返回一个节点,但getElementsByClassName返回一个节点列表.因为只有一个具有该类名的元素(据我所知),你可以得到第一个(这[0]就是它就像一个数组).

然后,您可以更改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>

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. 它返回一个类似于数组的nodeList,因此您引用该nodeList中的第一个项
4. 然后,您可以设置该innerHTML项目以更改其内容.

注意事项:一些较旧的浏览器不支持getElementsByClassName(例如旧版本的IE).如果失踪,该功能可以填充到位.

这是我建议使用具有内置CSS3选择器支持的库而不是担心浏览器兼容性的地方(让其他人完成所有工作).如果你只想要一个图书馆来做那个,那么Sizzle会很棒.在Sizzle,这将是这样做的:

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

jQuery内置了Sizzle库,在jQuery中,这将是:

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

Answer 3

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

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

Answer 4

如果需要在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 5

最简单的方法是：

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