javascript - 如何通过 Javascript 访问 HTML DOM 中的 Elements 字段？

Question

我是 HTML DOM 操作的新手。即使是简单的例子，我也失败了。

这是我的代码：

<h1>head 1</h1>
<h2>head 2</h2>
<script type="text/javascript">
var h1 = document.getElementsByTagName('h1');
alert("tagName : "+h1.getTagName());
h1.parentNode.removeChild(h1);
</script>
<h3>head 3</h3>

上面的代码甚至没有弹出任何“警报”。

我也试过：

alert("nodeType: "+h1.nodeType);
alert("nodeName: "+h1.nodeName);
alert("nodeValue: "+h1.nodeValue);
alert("tagName: "+h1.tagName);

不过，他们都反应过来了undefined。

Answer 1

您忘记了参数周围的引号：

var h1 = document.getElementsByTagName(h1);

应该：

var h1 = document.getElementsByTagName('h1');

你使用萤火虫吗？如果不是，你应该。它会让你知道你有这个错误。

Answer 2

这个网站真的很有用。 http://www.w3schools.com/jsref/dom_obj_node.asp

一旦掌握了它，请务必使用 jquery 或其他一些库来处理 dom（让生活更轻松）：http: //jquery.com/

<h1>head 1</h1>
<h2>head 2</h2>
<script type="text/javascript">
var h1 = document.getElementsByTagName('h1')[0];
alert("tagName : "+h1.localName);
h1.parentNode.removeChild(h1);
</script>
<h3>head 3</h3>

Answer 3

它应该是：

var h1 = document.getElementsByTagName('h1')[0];

解释：

每当您使用 getElements...（注意 s）时，您实际上都会得到一个数组。[0]在它之后使用它var h1 = document.getElementsByTagName('h1')实际上意味着让我得到第一个带有 TagName = 'h1' 的元素

您的其他选项是在此数组上循环然后使用h1[i]（例如）或在实际使用时选择该数组的正确成员 -

alert("tag name: ",h1[0]);

只是为了比较，当你使用时getElementById你只得到一个元素，因此你可以直接使用它。