Html之getElementById()方法&getElementsByTagName()方法示例

最新推荐文章于 2025-05-16 15:18:00 发布

反者道之动-弱者道之用

最新推荐文章于 2025-05-16 15:18:00 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： 012W3C标准文章标签： Dom html

本文链接：https://blog.youkuaiyun.com/jinhoward/article/details/53245967

012W3C标准专栏收录该内容

10 篇文章

订阅专栏

本文介绍了HTML DOM中常用的方法如getElementById等，以及重要的属性如innerHTML和nodeName，并通过实例展示了如何使用这些方法和属性来操作HTML元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

- getElementById(id) - 获取带有指定 id 的节点（元素）
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点

代码示例：

<!DOCTYPE html>
<html>
<body>

<p id="Example">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>

<script>
x=document.getElementById("Example");
document.write("<p>Example段落的文本：" + x.innerHTML + "</p>");
</script>

</body>
</html>

运行结果：

Hello World!

本例演示 getElementById 方法！

Example段落的文本：Hello World!

============================================================================================================

nodeName 属性

nodeName 属性规定节点的名称。

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

注释：nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

nodeName&nodeValue的使用方法：

<!DOCTYPE html>
<html>
<body>

<p id="Example">Hello World!</p>

<script>
x=document.getElementById("Example");
txt=document.getElementById("Example").innerHTML;
document.write("<p>"+"The text is:"+txt+"</p>");

document.write("</br>");
document.write("<p>示例节点的nodeValue:"+x.nodeValue +"</p>");
document.write("<p>示例节点的子节点的nodeValue:"+x.firstChild.nodeValue +"</p>");


document.write("</br>");
document.write("<p>示例节点的nodeName:"+x.nodeName+ "</p>");
document.write("<p>示例节点的子节点的nodeName:"+x.firstChild.nodeName+ "</p>");


document.write("</br>");
document.write("<p>示例节点的类型:"+x.nodeType+"</p>");
document.write("<p>示例节点的第一个子节点的类型:"+x.firstChild.nodeType+"</p>");
</script>

</body>
</html>

示例运行结果：

Hello World!

The text is:Hello World!

示例节点的nodeValue:null

示例节点的子节点的nodeValue:Hello World!

示例节点的nodeName:P

示例节点的子节点的nodeName:#text

示例节点的类型:1

示例节点的第一个子节点的类型:3

<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法的使用方法：</p>
<p>DOM 很有用！</p>
<p>我在学习，我相信我能学好！</p>

<script>

document.write("</br>");
x=document.getElementById("intro");
document.write("<p>getElementById Return Value is：" + x + "</p>");
document.write("<p>getElementById Return Value's NodeName’：" + x.nodeName + "</p>");
document.write("<p>getElementById Return Value's NodeValue’：" + x.nodeValue + "</p>");


document.write("</br>");
document.write("<p>getElementById Return Value's childNode's NodeValue is：" + x.firstChild.nodeValue + "</p>");
document.write("<p>Id为intro段落的文本值为：" + x.innerHTML + "</p>");


document.write("</br>");
<!--这里的TagName就是标签名称，html的标签 -->
tagNameList=document.getElementsByTagName("p");
document.write("<p>第一段的文本: " + tagNameList[0].innerHTML +"</p>");
document.write("<p>第二段的文本: " + tagNameList[1].innerHTML +"</p>");
document.write("<p>第三段的文本: " + tagNameList[2].innerHTML +"</p>");
document.write("<p>第三段的文本: " + tagNameList[3].innerHTML +"</p>");

document.write("</br>");
<!--这里的TagName就是标签名称，html的标签 -->

</script>

</body>
</html>

运行结果：

Hello World!

本例演示 getElementById 方法的使用方法：

DOM 很有用！

我在学习，我相信我能学好！

getElementById Return Value is：[object HTMLParagraphElement]

getElementById Return Value's NodeName’：P

getElementById Return Value's NodeValue’：null

getElementById Return Value's childNode's NodeValue is：Hello World!

Id为intro段落的文本值为：Hello World!

第一段的文本: Hello World!

第二段的文本: 本例演示 getElementById 方法的使用方法：