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

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

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

我将如何更改“ Hello world！” 向“再见的世界！” ？我知道document.getElementByClass和document.getElementById的工作方式，但我想更具体一点。抱歉，以前是否有人问过。

好吧，首先您需要选择具有的功能的元素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>

您可以这样做：

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

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

如果要删除任何编辑操作，则只需添加“。” 后面做手术