如何利用传统的方式在HTML中获取DOM元素


本文摘自PHP中文网,作者逆旅行人,侵删。

2021040714430632439.jpg

JS中DOM是JavaScript学习中的重要组成部分,DOM元素的获取更是打通HTMLJS的重要桥梁,本文带大家一起来看一看传统的方式获取DOM元素。

1.getElementById() 方法

返回对拥有指定 id 的第一个对象的引用

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

       <ul id="list" onclick="getValue()>

           <li class="item">item1</li>

           <li class="item">item2</li>

           <li class="item">item3</li>

           <li class="item">item4</li>

           <li class="item">item5</li>

       </ul>

 </body>

</html>

1

2

3

4

5

6

7

8

<script>

function getValue()

  {

  var x=document.getElementById("id")

  alert(x.innerHTML)

  }

</script>

 </script>

2.getElementsByName()方法

返回带有指定名称的对象的集合。

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<body>

       <ul >

           <li class="item" name="item">item1</li>

           <li class="item" name="item">item2</li>

           <li class="item" name="item">item3</li>

           <li class="item" name="item">item4</li>

           <li class="item" name="item">item5</li>

       </ul>

 </body>

</html>

1

2

3

4

5

6

<script>

 

  var x=document.getElementsByName("item");

  alert(x.length);

  

 </script>

3.getElementsByTagName() 方法

返回带有指定标签名的对象的集合。

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<body>

       <ul >

           <li >item1</li>

           <li >item2</li>

           <li >item3</li>

           <li >item4</li>

           <li >item5</li>

       </ul>

 </body>

</html>

1

2

3

4

5

6

<script>

 

  var x=document.getElementsByTagName("li");

  alert(x.length);

  

 </script>

推荐:《2021年js面试题及答案(大汇总)》

以上就是如何利用传统的方式在HTML中获取DOM元素的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html可以引入Html

Html添加遮罩效果

Html空格代码怎么写

Html文件的中文乱码问题与在浏览器中的显示问题

图文详解Html中有序列表、无序列表和自定义列表的区别

Html和asp之间的区别是什么

Html怎么修改文件

Html中的短语标签是什么?有哪些?

jquery实现带弹窗和次数的转盘抽奖(代码)

Html怎么点击按钮跳转页面

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...