如何通过Javascript访问HTML DOM中的Elements字段?

时间:2012-12-12 02:18:36

标签: javascript html dom

我是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

3 个答案:

答案 0 :(得分:3)

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

var h1 = document.getElementsByTagName(h1);

应该是:

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

您使用Firebug吗?如果没有,你应该。它会让你知道你有这个错误。

答案 1 :(得分:1)

这个网站真的很有用。 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>

答案 2 :(得分:0)

它应该是:

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

<强>解释

每当你使用getElements ...(注意s)你实际上得到一个数组。 在[0]之后使用var h1 = document.getElementsByTagName('h1')实际上意味着让我获得TagName ='h1'的第一个元素

你有其他选择要么在这个数组上循环然后使用h1[i](例如),要么在实际使用时选择该数组的正确成员 -

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

仅用于比较,当您使用getElementById时,您只获得一个元素,因此您可以直接使用它。