我是 JavaScript 新手。我创建了这个名为 colorme 的 div。我可以通过javascript成功地为它着色。现在假设我想更改<p>...</p> 或<span> 等的背景，我如何通过Javascript 访问它？ （没有 jquery）。
像 document.getElementById() 一样可以在 div 上工作，我可以达到它。现在我不能继续为所有元素提供唯一的 ID。我如何到达 <p> 或 <span> 等内部元素？
<div id="colorme">
<p>Blah Vblah Blah Content</p>
<span>Blah Vblah Blah Content</span>
</div>
【问题讨论】：
标签： javascript dom
您可以将找到的元素用作getElementsByTagName 的上下文。
var colorme = document.getElementById('colorme'),
spans = colorme.getElementsByTagName('span');
请注意，spans 是一个 NodeList——类似于数组——包含colorme 中的所有span 元素。如果您想要第一个（实际上，代码示例中的唯一一个），请使用spans[0]。
【讨论】：
您应该查看标准 javascript 中提供的许多 DOM 遍历函数。
教程：http://www.quirksmode.org/dom/intro.html
【讨论】：
虽然答案确实为这种特定情况提供了很好的方法......
您面临的问题称为 DOM 遍历。如您所知，DOM 是一棵树，您实际上可以在不事先知道元素 id/type/whatever 的情况下遍历树。
基本情况如下
el.childNodes 访问儿童列表el.parentNode 访问父元素nextSibling 和 previousSibling 用于下一个和上一个兄弟节点有关详细信息，请参阅 [MDC DOM 页面](
【讨论】：
这里有三种方式：
如果你只关心体面的浏览器，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 介绍是好东西）。
【讨论】：
很简单：getElementsByTagName()？
【讨论】：
你可以使用getElementsByTagName()
【讨论】：
循环遍历孩子：
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();
}
}
【讨论】：
div.children，而不必检查nodeType。 children 集合仅包含 Element 对象，而 childNodes 包含所有节点类型（元素、文本节点、cmets 节点等）。
在这种情况下，您可以使用：
var colormeDiv = document.getElementById('colorme');
var e1 = colormeDiv.getElementsByTagName('p');
var e2 = colormeDiv.getElementsByTagName('span');
获取 'colorme' div 中的两个元素。
【讨论】：
getElementById 只是 JavaScript 的 DOM 方法之一。它返回一个 HTMLElement DOM 对象，然后您可以查询该对象以查找子元素、父元素和兄弟元素。您可以使用它来遍历您的 HTML 并找到您需要的元素。这是reference for the JavaScript DOM HTMLObject。
【讨论】：
[回答后，我意识到这不是对您完全解释的问题的回答，而是对您帖子标题中提出的问题的回答！]
这样做的一个好方法是在您的 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/提高速度，但至少感觉是这样 :)
【讨论】：