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]对于它来说就是这样 - 它就像一个数组）。

然后，您可以使用.textContent更改html。

targetDiv.textContent = "Goodbye world!";

＆＃13;

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

＆＃13;

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

＆＃13;

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

解释：

您获得的元素为id="foo"。
然后，您会找到该对象中包含class="bar"。
返回类似于数组的nodeList，因此您引用该nodeList中的第一项
然后，您可以设置该项目的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 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 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}]`);
}

Answer 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

如果你想要任何删除编辑任何操作，那么只需添加＆＃34;。＆＃34;落后并进行操作

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

6 个答案: