Skip to main content

查找元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

【通过 id 查找 HTML 元素】​

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找id="intro"元素：

var x = document.getElementById("intro");
<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>

实例：https://www.runoob.com/try/try.php?filename=try_dom_getelementbyid

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。 如果未找到该元素，则 x 将包含 null。

【通过标签名查找 HTML 元素】​

本例查找 id="main"的元素，然后查找id="main"元素中的所有<p>元素：

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

实例：https://www.runoob.com/try/try.php?filename=try_dom_getelementsbytagname

【通过类名找到 HTML 元素】​

本例通过  getElementsByClassName  函数来查找 class="intro" 的元素：

var x = document.getElementsByClassName("intro");
<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>

笔记​

getElementsByTagName 和 getElementsByClassName 这两个方法查找多个 dom 元素，返回的是 htmlcollection 类型，是伪数组而不是真数组，故不能使用数组的方法。 我们可以使用数组原型配合 slice 方法，利用 call，apply，bind 方法将伪数组转为真数组。 p

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
console.log(y); //在控制台我们可以看到原型proto为htmlcollection，是伪数组
//伪数组转为真数组方法1
console.log(Array.prototype.slice.call(y)); //在控制台我们可以看到原型proto为Array(0)，是真数组

//伪数组转为真数组方法2
console.log(Array.prototype.slice.apply(y)); //在控制台我们可以看到原型proto为Array(0)，是真数组

//伪数组转为真数组方法3
console.log(Array.prototype.slice.bind(y)()); //在控制台我们可以看到原型proto为Array(0)，是真数组

image.png

获取子元素​

父元素.firstElementChild; - 获取父元素中第一个子元素 父元素.lastElementChild; - 获取父元素中最后一个子元素

获取相邻兄弟元素​

元素.previousElementSibling; - 获取元素的上一个兄弟元素 元素.nextElementSibling; - 获取元素的下一个兄弟元素