JS中
的DOM
是JavaScript学习中的重要组成部分,DOM元素
的获取更是打通HTML
与J
S
的重要桥梁,本文带大家一起来看一看传统的方式获取DOM
元素。
1.getElementById() 方法
返回对拥有指定 id 的第一个对象的引用
<!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>
<script> function getValue() { var x=document.getElementById("id") alert(x.innerHTML) } </script> </script>
2.getElementsByName()方法
返回带有指定名称的对象的集合。
<!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>
<script> var x=document.getElementsByName("item"); alert(x.length); </script>
返回带有指定标签名的对象的集合。
<!DOCTYPE html> <html> <body> <ul > <li >item1</li> <li >item2</li> <li >item3</li> <li >item4</li> <li >item5</li> </ul> </body> </html>
<script> var x=document.getElementsByTagName("li"); alert(x.length); </script>
推荐:《2021年js面试题及答案(大汇总)》
Atas ialah kandungan terperinci 如何利用传统的方式在HTML中获取DOM元素. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!