Question

我正在学习javascript并有一个问题。我试图只在div id = title中定位h1标签我尝试了几种方法，将其作为参考网站使用：http://www.ibm.com/developerworks/library/wa-jsanddom-pr/sidefile1.html

但似乎没有任何工作，我回到了值“undefined” 基本上我想要做的只是针对h1并将文本更改为其他内容。我怎么做？这是沿着正确的道路走，还是有不同的方式去做？

<div id="title">
    <h1>Javascript Lesson 1</h1>
    <p>The basics</p>
</div>

<script>
var title = document.getElementById('title');
    var titleHeading = title.firstChild;
    console.log (title.value);
</script>

非常感谢任何帮助。感谢。

Answer 1

看看Element.getElementsByTagName。

var titleElement = document.getElementById("title");
var titleChildren = titleElement.getElementsByTagName("H1");

// Do something with children.
// In your example code, you'll only have one element returned
console.log(titleChildren[0].innerHTML);

// To change the text, simply access the innerHTML property
titleChildren[0].innerHTML = "[New Value]"

这是a working fiddle to play with。

Answer 2

如果您知道要修改的h1将始终是第一个h1孩子，您可以执行以下操作：

<script>
document.getElementById('title').getElementsByTagName("h1")[0].innerHTML = "New Name";
</script>

Answer 3

<div>的第一个孩子（在您的示例中）是一个文本节点。文本节点没有value属性。即使您删除<div>和<h1>之间的空格以使其成为第一个子节点，<h1>仍然没有value属性。它具有的是具有节点值“Javascript Lesson 1”的子文本节点。

您想要的是检索对该文本节点的引用及其值。有不同的方法来做到这一点。例如：

<div id="title">
  <h1>Javascript Lesson 1</h1> <!-- White space before <h1> -->
  <p>The basics</p>
</div>

<script>
  var title = document.getElementById('title');
  var titleHeading = title.childNodes[1];
  console.log (titleHeading.firstChild.nodeValue);
</script>

或：

<div id="title"
 ><h1>Javascript Lesson 1</h1> <!-- No white space -->
  <p>The basics</p>
</div>

<script>
  var title = document.getElementById('title');
  var titleHeading = title.firstChild;
  console.log (titleHeading.firstChild);
</script>

或：

<div id="title">
  <h1>Javascript Lesson 1</h1>
  <p>The basics</p>
</div>

<script>
  var title = document.getElementById('title');
  var titleHeading = title.getElementsByTagName('h1')[0];
  console.log (titleHeading.innerHTML);
</script>

或上述的一些排列。

Answer 4

您可以使用Document.querySelectorAll（）返回一组子级。这是两个示例：

var matches = document.querySelectorAll("iframe[data-src]");
var matches = document.querySelectorAll("div.note, div.alert");

如您所见，它几乎类似于JQuery。注意第二个示例中的逗号。 jQuery将在此处使用空格。这些示例摘自developer.mozilla.org。

如果您不想要集合，那么（如果您想要一个元素）document.querySelector("#myCSSSelector");是您想要的。

Javascript定位ID中的子元素

4 个答案: