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

最新推荐文章于 2025-05-16 15:18:00 发布
原创 最新推荐文章于 2025-05-16 15:18:00 发布 · 3.7k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Dom #html

本文介绍了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 方法的使用方法：

第三段的文本: DOM 很有用！

第三段的文本: 我在学习，我相信我能学好！





document.getElementById()
07-21
document.getElementById()对象和使用方法
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById
09-06
在HTML文档对象模型（DOM）中，有三种主要方法用于查找HTML元素：`document.all`，`getElementById()`，`getElementsByName()` 和 `getElementsByTagName()`。这些方法各有其特性和适用场景，理解它们的区别对于编写...
html中getElementById() 方法
徊忆羽菲
03-15 2870
html中getElementById方法定义和用法语法说明获取元素的value获取元素的innerHTML 定义和用法 getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。 语法 document.getElementById(id) 说明 HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。 不过，如果您需要查找文档中的一个特定的元素
querySelectorAll 和 getElementByClassName 的区别是啥
最新发布
徐三岁的博客
05-16 336
HTMLCollection（getElementsByClassName）是动态的，而 NodeList（querySelectorAll）是静态的。
学习document.getElementById()的使用
chuangnzh的专栏
11-12 2248
定义和用法getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。语法document.getElementById(id)说明HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。不过，如果您需要查找文档中的一个特定
getElementById获取元素
leechoy
06-12 4791
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
html dom getelementbyid,HTML DOM getElementById()用法及代码示例
weixin_33634886的博客
06-19 592
getElementById()方法返回具有给定ID的元素，该元素将传递给函数。此功能广泛用于网页设计中，以更改任何特定元素的值或获取特定元素。如果传递给函数的ID没有退出，则返回null。用法:document.getElementById( element_ID )参数：该函数接受单个参数element_ID，该参数用于保存element的ID。返回值：它返回给定ID的对象。如果不存在具有给定...
JS简单获得节点元素的方法示例
11-28
本示例主要展示了几种简单的JS方法来获取页面上的元素，并提供了代码实践。 首先，我们关注`getElementById()`方法，这是最常用的一种获取元素的方式。在示例中，变量`d`被赋值为`document.getElementById('d')`的...
Document:getElementsByName()使用方法及示例
12-11
与 `getElementById()` 方法不同，后者通过元素的唯一 `id` 查找单个元素，而 `getElementsByName()` 返回的是一个包含所有匹配 `name` 的元素的 **NodeList 集合**，而不是单个元素。由于在 HTML 中，多个元素可以...
js中的getAttribute方法使用示例
12-04
至此，我们已经向大家介绍了两种检索特定元素节点的办法：一种是使用getElementById()方法，另一种是使用getElementsByTagName()方法。在找到那个元素后，我们就可以利用getAttribute()方法把它的各种属性的值查询...
JavaScript实现事件的中断传播和行为阻止方法示例
11-29
// document.getElementsByTagName('a')[0].onclick = function (ev) { // alert('点击'); // ev.preventDefault(); // W3C标准取消事件效果 // // alert('已经拦截'); // }; ``` 在这个例子中，我们为三个...
HTML DOM getElementById() 方法
weixin_34410662的博客
04-21 260
定义和用法 getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。 语法 document.getElementById(id) 说明 HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。 不过，如果您需要查找文档中的一个特定...
document.getElementById()方法使用
热门推荐
酣睡的熊㊣的技术博客
02-07 36万+
document.getElementById使用 语法：oElement = document .getElementById ( sID ) 参数：sID――必选项。字符串 (String) 。 返回值：oElemen――对象 (Element) 。 说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一
HTML中document.getElementById()方法的操作
weixin_30773135的博客
05-05 1421
转自：http://blog.youkuaiyun.com/pyffcwj/article/details/7240232/ obj = document.getElementById("cc") 其中： obj 是一个对象(Object) 　　　id是一个字符串(String) 意思是： 通过选取页面中的id:cc, 来返回它的第一个的对象（对象是有length和value属性之说的） ...
javascript基础知识 getElementById
qrj20112的专栏
11-17 330
通过ID获取元素 在网页中我们通过id先找到标签然后进行操作。 语法：  document.getElementById(“id”)  例子： Old Header前面 否则会报elementId is null错误-->              var elementId=document.getElementById("hid");
通过ID获取元素getElementById
aomichen2432的博客
08-11 356
语法: document.getElementById(“id”) 结果:null或[object HTMLParagraphElement]. 除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。 不过，最有效的方法是 getElementById()。 实例： ...
【WEB开发.js】getElementById ：通过元素id属性获取HTML元素
m0_56800366的博客
11-25 2193
是 JavaScript 中常用的一个 DOM 方法，用于通过元素的id属性获取文档中对应的 HTML 元素。这个方法返回的是一个包含该元素的引用，如果没有找到指定的元素，则返回null。
getElementById用法
liuzp111的专栏
04-09 1081
这标题 点击标题，会提示出它的值。
JavaScript DOM操作：getElementById、getElementsByTagName与getElementsByClassName解析
"这篇文档详细解释了JavaScript中的几种常用DOM操作方法，包括getElementById、getElementsByTagName和getElementsByClassName。通过一个简单的HTML测试页面来演示这些方法的用法，并展示了它们在实际应用中的效果。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值