Javascript 以 ID 中的子元素为目标

Question

我目前正在学习 javascript 并且有一个问题。我试图仅针对 div id=title 中的 h1 标记我尝试了几种方法，将其用作参考站点：http: //www.ibm.com/developerworks/library/wa-jsanddom-pr/sidefile1 .html

但似乎没有任何效果，我基本上取回了值“未定义”，我想做的只是针对 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>

任何帮助是极大的赞赏。谢谢。

原文由 Nicholas Ritson 发布，翻译遵循 CC BY-SA 4.0 许可协议

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]"

这是 一个可以玩的工作小提琴。

原文由 James Hill 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您知道要修改的 h1 永远是第一个 h1 子级，您可以这样做：

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

原文由 BeaumontTaz 发布，翻译遵循 CC BY-SA 3.0 许可协议