通过DOM获取HTML元素的三种方式

- 日理万妓 2022-05-14 08:57 329阅读 0赞

转载自：[http://www.runoob.com/js/js-htmldom.html][http_www.runoob.com_js_js-htmldom.html]

![70][]

获取DOM元素的三种方法：

*  通过 id 找到 HTML 元素

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>菜鸟教程(runoob.com)</title>  
</head>  
<body>

<p id="intro">你好世界!</p>  
<p>该实例展示了 <b>getElementById</b> 方法!</p>  
<script>  
x=document.getElementById("intro");  
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");  
</script>

</body>  
</html>

*  通过标签名找到 HTML 元素

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>菜鸟教程(runoob.com)</title>  
</head>  
<body>

<p>你好世界!</p>  
<div id="main">  
<p> DOM 是非常有用的。</p>  
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>  
</div>  
<script>  
var x=document.getElementById("main");  
var y=x.getElementsByTagName("p");  
document.write('id="main"元素中的第一个段落为：' + y\[0\].innerHTML);  
</script>

</body>  
</html>

*  通过类名找到 HTML 元素

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>菜鸟教程(runoob.com)</title>  
</head>  
<body>

<p class="intro">你好世界!</p>  
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>  
<script>  
x=document.getElementsByClassName("intro");  
document.write("<p>文本来自 class 为 intro 段落: " + x\[0\].innerHTML + "</p>");  
</script>  
<p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>  
</body>  
</html>

[http_www.runoob.com_js_js-htmldom.html]: http://www.runoob.com/js/js-htmldom.html
[70]: /images/20220514/3423b36430314913bb270e871c282d9d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，329人围观）

还没有评论，来说两句吧...

相关阅读

相关通过反射获取类的三种方式

一、通过类全限定名进行获取Class.forName("classFullName"); Class c=Class.forName("com.mysql.jdbc.

男娘i/ 2024年02月19日 17:34/ 0 赞/ 66 阅读

相关 DOM操作-获取元素的方式

DOM-文档对象模型 DOM（Document Object Model）：文档对象模型其实就是操作 html 中的标签的一些能力，或者说是一整套操作文档流的属性和方法

待我称王封你为后i/ 2023年10月14日 22:33/ 0 赞/ 154 阅读

相关 DOM操作-获取元素的方式

DOM—文档对象模型 ●DOM（Document Object Model）：文档对象模型 ●其实就是操作 html 中的标签的一些能力 ●或者说是一整套操作文档

雨点打透心脏的1/2处/ 2023年09月27日 18:44/ 0 赞/ 133 阅读

相关获取Dom元素方式

1.document.getElementById(); 2.document.getElementsByName(); 3.document.getE

谁借莪１个温暖的怀抱￠/ 2022年06月05日 06:18/ 0 赞/ 334 阅读

相关 JavaScript-获取DOM元素的三种方式

JavaScript-获取DOM元素的三种方式一、根据标签名（返回数组）例：var allInouts=document.getElementsByTagNam

旧城等待，/ 2022年05月28日 08:50/ 0 赞/ 312 阅读

相关通过DOM获取HTML元素的三种方式

转载自：[http://www.runoob.com/js/js-htmldom.html][http_www.runoob.com_js_js-htmldom.html]

- 日理万妓/ 2022年05月14日 08:57/ 0 赞/ 330 阅读

相关 HTML中获取Dom元素的方法

HTML中获取Dom元素的方法 1.getElementsByTagName()方法：获取标签，获取的值是一个数组形式；然后再通过数组下标来准确得到自己想要的值

亦凉/ 2022年01月27日 01:27/ 0 赞/ 706 阅读

相关 JS获取元素对象的三种方式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

梦里梦外;/ 2021年12月12日 16:53/ 0 赞/ 1040 阅读

相关 DOM快速入门——DOM获取元素对象的6种方式

目录：一、为什么要获取页面元素？二、获取元素的5种方式： 1.根据id获取元素 2.根据标签名获取元素

港控/mmm°/ 2021年11月10日 09:52/ 0 赞/ 561 阅读

相关总结js获取DOM元素的方式

1. 根据id属性的值获取元素,返回来的是一个元素对象2. 根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

小灰灰/ 2020年04月21日 02:36/ 0 赞/ 1102 阅读