Question

我是javascript的新手。我创建了这个名为colorme的div。我可以通过javascript成功上色。现在假设我要更改...或等的背景，我如何通过Javascript访问它？（没有jquery）。

像document.getElementById（）可以在div上工作，我就可以了。现在我不能继续给所有元素赋予独特的id。如何到达或等内部元素？

<div id="colorme">
  <p>Blah Vblah Blah Content</p>
  <span>Blah Vblah Blah Content</span>
</div>

Answer 1

您可以使用您找到的元素作为getElementsByTagName的上下文。

var colorme = document.getElementById('colorme'),
    spans = colorme.getElementsByTagName('span');

请注意spans是一个NodeList - 类似于数组 - 包含span中的所有colorme元素。如果您想要第一个（实际上是代码示例中唯一的一个），请使用spans[0]。

Answer 2

您应该查看标准javascript中提供的许多DOM遍历函数。

教程：http://www.quirksmode.org/dom/intro.html

参考：http://reference.sitepoint.com/javascript/Node

和http://reference.sitepoint.com/javascript/Element

Answer 3

以下是三种方式：

如果您只关心体面的浏览器，document.querySelector（返回第一个匹配的节点）和document.querySelectorAll（返回NodeList） - 例如document.querySelector('#colorme p')。
HTMLElement.getElementsByTagName()（返回NodeList） - 例如document.getElementById('colorme').getElementsByTagName('p')[0]
HTMLElement.children等 - document.getElementById('colorme').children[0]（.firstChild可能是一个文本节点，很多有趣的DOM内容可以进入那里，quirksmode DOM简介链接到好东西）。

Answer 4

虽然答案确实为这个具体案例提供了很好的方法....

您面临的问题称为 DOM遍历。如您所知，DOM是一棵树，您实际上可以遍历树而不事先知道元素id / type / whatever。

基础知识如下

el.childNodes访问儿童列表
el.parentNode访问父元素
nextSibling和previousSibling用于下一个和上一个兄弟节点

有关详细信息，请参阅[MDC DOM页面]（

Answer 5

这很简单：getElementsByTagName（）？

Answer 6

您可以使用getElementsByTagName()

Answer 7

循环穿过孩子：

var div = document.getElementById('colorme');

var i, l, elem;

for (i = 0, l = div.childNodes.length; i < l; i++) {
    elem = div.childNodes[i];

    // Check that this node is an element
    if (elem.nodeType === 1) {
        elem.style.color = randomColorGenerator();
    }
}

Answer 8

在这种情况下，您可以使用：

var colormeDiv = document.getElementById('colorme');

var e1 = colormeDiv.getElementsByTagName('p');

var e2 = colormeDiv.getElementsByTagName('span');

获取'colorme' div。

中的两个元素

Answer 9

getElementById只是JavaScript的DOM方法之一。它返回一个HTMLElement DOM对象，然后您可以查询该对象以查找子元素，父元素和兄弟元素。您可以使用它来遍历HTML并找到所需的元素。这是一个reference for the JavaScript DOM HTMLObject。

Answer 10

<回答后，我意识到这不是你完全解释的问题的答案，但它是你帖子标题中提出的问题的答案！]

这样做的一个好方法是在引用文档的Javascript顶部声明一个全局变量，然后可以在任何地方使用（在每个函数中）：

<html>
<head>
<script type="text/javascript">

    // set a global var to acces the elements in the HTML document
    var doc = this;

    function testIt()
    {
        doc.blaat.innerHTML = 'It works!!';
    }
</script>
</head>
<body>
    <div id="blaat">Will this ever work..?!</div>
    <button onclick="testIt()">Click me and you'll see!</button>
</body>
</html>

当我得到'getElemenyById（）'时，我的第一印象就是它听起来像一个函数，它会迭代DOM的元素列表，直到找到你需要的元素;这需要一些时间。通过上面的示例，您只需直接访问该元素。我不确定我是否真的以这种方式节省CPU /加速，但至少感觉如此：）

使用javascript访问HTML元素而不使用getElementById

10 个答案: