Heim  >  Artikel  >  Web-Frontend  >  So erhalten Sie DOM-Elemente in HTML mit herkömmlichen Methoden

So erhalten Sie DOM-Elemente in HTML mit herkömmlichen Methoden

autoload
autoloadOriginal
2021-04-07 14:44:151955Durchsuche

So erhalten Sie DOM-Elemente in HTML mit herkömmlichen Methoden

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

3.getElementsByTagName() 方法

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

<!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面试题及答案(大汇总)

Das obige ist der detaillierte Inhalt vonSo erhalten Sie DOM-Elemente in HTML mit herkömmlichen Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn