HTML | DOM 选择类型属性

HTML和DOM选择类型属性用于在JavaScript中访问和操作HTML和DOM元素。这些属性可以帮助开发人员通过JavaScript与HTML页面进行交互。

元素选择器

• document.getElementById(id) : 返回具有指定id的元素。

// 获取id为"myDiv"的元素
var myDiv = document.getElementById("myDiv");

• document.getElementsByTagName(name) : 返回带有指定标签名称的所有元素的 NodeList 对象。

// 获取所有的p元素
var elements = document.getElementsByTagName("p");

• document.getElementsByClassName(name) : 返回带有指定类名的所有元素的 NodeList 对象。

// 获取所有具有"class1"类的元素
var elements = document.getElementsByClassName("class1");

• element.getElementsByTagName(name) : 返回带有指定标签名称的所有后代元素的 NodeList 对象。

// 获取id为"myDiv"的元素的所有p元素
var myDiv = document.getElementById("myDiv");
var elements = myDiv.getElementsByTagName("p");

• element.getElementsByClassName(name) : 返回带有指定类名的所有后代元素的 NodeList 对象。

// 获取id为"myDiv"的元素所有具有"class1"类的元素
var myDiv = document.getElementById("myDiv");
var elements = myDiv.getElementsByClassName("class1");

属性选择器

• document.querySelector(selectors) : 返回文档中匹配指定CSS选择器的第一个元素。

// 获取id为"myDiv"的元素
var myDiv = document.querySelector("#myDiv");

• document.querySelectorAll(selectors) : 返回文档中匹配指定CSS选择器的所有元素的 NodeList 对象。

// 获取所有的p元素
var elements = document.querySelectorAll("p");

伪类选择器

• element:first-child : 选择element元素的第一个子元素。

<div>
  <p>第一个p元素</p>
  <p>第二个p元素</p>
</div>

/* 选择第一个p元素 */
div p:first-child {
  color: red;
}

• element:last-child : 选择element元素的最后一个子元素。

<div>
  <p>第一个p元素</p>
  <p>第二个p元素</p>
</div>

/* 选择第二个p元素 */
div p:last-child {
  color: red;
}

• element:nth-child(n) : 选择element元素的第n个子元素。

<div>
  <p>第一个p元素</p>
  <p>第二个p元素</p>
  <p>第三个p元素</p>
</div>

/* 选择第二个p元素 */
div p:nth-child(2) {
  color: red;
}

以上是HTML和DOM选择类型属性的简单介绍，它们是JavaScript中与HTML页面交互的主要方式。熟练使用这些属性可以大大提高开发工作的效率。