通过类和ID获取元素里面的元素 – JavaScript

好吧，之前我已经涉足JavaScript，但是我写的最有用的东西是CSS样式切换器。 所以我对这个有点新鲜 比方说，我有这样的HTML代码：

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

我将如何改变“Hello world！” 到“再见的世界！” ？ 我知道如何document.getElementByClass和document.getElementById工作，但我想得到更具体的。 对不起，如果这之前已经问过。

Answer 1

那么，首先你需要用像getElementById这样的函数来select元素。

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

getElementById只返回一个节点，但getElementsByClassName返回一个节点列表。 由于只有一个具有该类名称的元素（据我所知），你可以得到第一个元素（这就是[0]所用的元素 – 就像一个数组）。

然后，你可以用.innerHTML改变html。

 targetDiv.innerHTML = "Goodbye world!"; 

 var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0]; targetDiv.innerHTML = "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!"; } 

或者，如果你想用更less的错误检查和更简洁的方法来做到这一点，可以这样做：

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

解释：

1. 你得到id="foo"的元素。
2. 然后，您可以find该对象中包含class="bar" 。
3. 这返回一个类似数组的nodeList，所以你引用该节点列表中的第一个项目
4. 然后，您可以设置该项目的innerHTML来更改其内容。

注意事项：一些旧的浏览器不支持getElementsByClassName （例如旧版本的IE）。 如果失踪，该function可以被删除。

---

这是我build议使用内置CSS3select器支持的库，而不是自己担心浏览器兼容性（让其他人完成所有工作）。 如果你只想要一个图书馆来做到这一点，那么Sizzle将会很好地工作。 在嘶嘶声，这将是这样做的：

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

---

jQuery的内置和jQuery的Sizzle库，这将是：

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

Answer 3

如果这需要在IE 7或更低版​​本中工作，则需要记住getElementsByClassName在所有浏览器中都不存在。 正因为如此，你可以创build你自己的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

recursion函数：

 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 

如果你想删除编辑任何操作，只需添加“。” 背后，做这个行动