DOM获取元素 ​

• id获取元素
• 类获取元素
• 标签获取元素
• html5新增的方法获取元素
• 获取特殊元素

id获取元素 ​

在HTML文档中，可以使用id属性为元素分配唯一的标识符。可以使用JavaScript中的document.getElementById()方法来获取带有特定id的元素。该方法接受一个字符串参数，该参数是要查找的元素的id。例如，以下代码将获取具有“example”id的元素：

let exampleElement = document.getElementById("example");

在这个例子中，exampleElement变量将引用具有id为“example”的元素。然后，可以使用此变量来访问或操作该元素的属性和内容，例如：

// 更改元素的文本内容
exampleElement.textContent = "这是一个示例";
// 更改元素的样式
exampleElement.style.color = "red";
exampleElement.style.fontSize = "24px";

请注意，如果没有具有指定id的元素，则document.getElementById()方法将返回null。在使用该方法时，应始终检查返回值是否为null，以确保找到了要查找的元素。

类获取元素 ​

在HTML文档中，可以使用class属性为多个元素分配相同的标识符。可以使用JavaScript中的document.getElementsByClassName()方法来获取带有特定类的元素。该方法接受一个字符串参数，该参数是要查找的类名称。例如，以下代码将获取所有具有“example”类的元素：

let exampleElements = document.getElementsByClassName("example");

在这个例子中，exampleElements变量将引用所有具有“example”类的元素的HTMLCollection对象。HTMLCollection是一种类似数组的对象，其中包含满足条件的所有元素。然后，可以使用此对象访问或操作这些元素的属性和内容，例如：

// 更改所有具有“example”类的元素的文本内容
for (let i = 0; i < exampleElements.length; i++) {
  exampleElements[i].textContent = "这是一个示例";
}

// 更改第一个具有“example”类的元素的样式
exampleElements[0].style.color = "red";
exampleElements[0].style.fontSize = "24px";

请注意，如果没有具有指定类的元素，则document.getElementsByClassName()方法将返回空的HTMLCollection对象。在使用该方法时，应始终检查返回值的长度是否为0，以确保找到了要查找的元素。

标签获取元素 ​

在HTML文档中，可以使用元素标签名称来选择所有具有相同标签名称的元素。可以使用JavaScript中的document.getElementsByTagName()方法来获取具有特定标签名称的元素。该方法接受一个字符串参数，该参数是要查找的标签名称。例如，以下代码将获取所有具有“p”标签的元素：

let pElements = document.getElementsByTagName("p");

在这个例子中，pElements变量将引用所有具有“p”标签的元素的HTMLCollection对象。然后，可以使用此对象访问或操作这些元素的属性和内容，例如：

// 更改所有具有“p”标签的元素的文本内容
for (let i = 0; i < pElements.length; i++) {
  pElements[i].textContent = "这是一个段落";
}

// 更改第一个具有“p”标签的元素的样式
pElements[0].style.color = "red";
pElements[0].style.fontSize = "24px";

html5新增的方法获取元素 ​

HTML5新增了几种获取元素的方法，其中一些方法是querySelector()、querySelectorAll()和getElementById()的改进。这些新方法为开发人员提供了更灵活、更强大的选择器，从而更轻松地查找和选择文档中的元素。

• querySelector()方法:该方法接受一个CSS选择器作为参数，并返回第一个匹配该选择器的元素。例如，以下代码将获取具有“example”类的第一个段落元素：

let exampleElement = document.querySelector("p.example");

在这个例子中，选择器“p.example”匹配第一个带有类“example”的段落元素。

• querySelectorAll()方法:该方法与querySelector()方法类似，但它返回匹配指定选择器的所有元素的NodeList对象。例如，以下代码将获取所有具有“example”类的段落元素：

let exampleElements = document.querySelectorAll("p.example");

在这个例子中，选择器“p.example”匹配所有具有类“example”的段落元素，并返回一个NodeList对象。

• getElementById()方法的改进:在HTML5中，getElementById()方法支持具有name属性的元素的选择。这意味着可以使用document.getElementById()方法来获取具有指定名称属性的元素，而不仅仅是具有指定id属性的元素。例如，以下代码将获取具有name属性为“example”的元素：

let exampleElement = document.getElementById("example");

在这个例子中，如果文档包含具有id为“example”的元素，则该元素将被返回。如果文档没有具有id为“example”的元素，但包含具有name属性为“example”的元素，则具有name属性的元素将被返回。

获取一些特殊元素 ​

可以使用一些特殊的选择器来获取特定类型的元素，例如：

获取当前活动的元素（即具有焦点的元素）可以使用document.activeElement属性：

let activeElement = document.activeElement;

获取当前文档的根元素可以使用document.documentElement属性：

let rootElement = document.documentElement;

获取文档头部（head）元素可以使用document.head属性：

let headElement = document.head;

获取文档主体（body）元素可以使用document.body属性：

let bodyElement = document.body;

获取所有图片（img）元素可以使用document.images属性：

let imageElements = document.images;

获取所有表单（form）元素可以使用document.forms属性：

let formElements = document.forms;

这些特殊的选择器可以帮助开发人员快速获取特定类型的元素，并使用它们的属性和方法进行操作。