解释各种类型的 HTML DOM 方法
我们有六种不同的 HTML DOM 方法，可用于使用 JavaScript 访问或操作 HTML 元素 -
HTML DOM getElementById() 方法
HTML DOM getElementsByClassName() 方法
HTML DOM getElementsByName() 方法
HTML DOM getElementsByTagName() 方法
HTML DOM querySelector() 方法
HTML DOM querySelectorAll() 方法
现在，让我们通过适当的示例讨论上述 HTML DOM 方法。
HTML DOM getElementById()
HTML getElementId() 方法用于访问或操作使用其"id"获取 HTML 元素。此方法接受"id"作为参数，并返回具有指定 id 的 DOM 元素的引用。
注意 − "id" 应该是唯一的，但如果有两个或多个 HTML 元素具有相同的"id"，则 getElementById() 将返回第一个元素。
语法
以下是 HTML DOM getElementById() 方法的语法 −
document.getElementById(HTMLelementID);
"HTMLelementID"是元素的 id 值。如果具有特定 id 的元素不存在，则返回 null。
示例
在下面的示例中，我们尝试使用 HTML DOM getElementById() 方法获取具有指定"id"的元素。
<html>
<body>
<h2>The getElementsById() Method</h2>
<h4 id="demo1"></h4>
<p id="demo2"></p>
<script>
document.getElementById("demo1").innerHTML = "Tutorialspoint";
document.getElementById("demo2").innerHTML = "Simply Easy Learning at your fingertips";
</script>
</body>
</html>
HTML DOM getElemenstByClassName()
HTML getElementByClassName() 用于返回具有指定类名的 HTML 元素集合。该 HTML 集合是一个 HTML 元素数组，我们可以使用索引值(从 0 开始)访问它们。
注意 − 我们可以使用 length 属性返回集合中的元素数量。
语法
以下是 HTML getElementByClassName() 方法的语法 −
document.getElementsByClassName(classname);
"classname"是 HTML 元素的类名。我们还可以通过空格分隔来搜索多个类名(例如，getElementsByClassName("demo dummy"))。
示例
在下面的示例中，我们使用 HTML getElementByClassName() 方法获取所有 class = "demo" 的 HTML 元素。然后，我们更改集合中第三个元素的文本。
<!DOCTYPE html>
<html>
<body>
<h2>The getElementsByClassName() Method</h2>
<h4 class="demo">Welcome</h4>
<h4 class="demo">To</h4>
<h4 class="demo">Tutorialspoint</h4>
<h4 class="demo">Family</h4>
<script>
const divs = document.getElementsByClassName("demo");
collection[2].innerHTML = "Tutorix";
</script>
</body>
</html>
HTML DOM getElementsByName()
HTML getElementsByName() 方法用于返回具有指定名称的 HTML 元素集合(NodeList)。此 NodeList(类似数组的集合)可以通过索引值(从 0 开始)访问。
注意 - 我们可以使用 length 属性返回集合中的节点数。
语法
以下是 HTML getElementsByName() 的语法 -
document.getElementsByName(name);
"name"指定 HTML 元素 name 属性的值。
示例
在下面的示例中，我们使用 HTML getElementsByName() 方法获取所有名称为"gender"的 HTML 元素的长度。
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function totalgenders(){
var genders = document.getElementsByName("gender");
alert("Total Genders: "+genders.length);
}
</script>
<form>
Male:<input type="radio" name="gender" value="male">
Female:<input type="radio" name="gender" value="female">
</form>
Click here to get the total number of genders:
<input type="button" onclick="totalgenders()" value="Click">
</body>
</html>
HTML DOM getElementsByTagName()
HTML getElementsByTagName() 方法用于返回具有指定标签名称的 HTML 元素集合。该 HTML 集合是一个类似数组的 HTML 元素集合，我们可以使用索引值(从 0 开始)来访问它们。
语法
以下是 HTML getElementsByTagName() 的语法 -
document.getElementsByTagName(tagname);
"tagname"是 HTML 元素的标签名。
注意− 如果我们向此方法传递"*"，它将返回文档中的所有 HTML 元素。
示例
在这里，我们获取所有带有标签名"li"的 HTML 元素，并获取列表中的第二个 li 元素 −
<!DOCTYPE html>
<html>
<body>
<h2>The getElementsByTagName() Method</h2>
<p>An Ordered list:</p>
<ol>
<li>Apple</li>
<li>Kiwi</li>
<li>Pear</li>
<li>Cherry</li>
</ol>
<p>The second li element is:</p>
<p id="demo"></p>
<script>
const collection = document.getElementsByTagName("li");
document.getElementById("demo").innerHTML = collection[1].innerHTML;
</script>
</body>
</html>
HTML DOM querySelector()
HTML querySelector() 方法用于返回与 CSS 选择器匹配的第一个 HTML 元素。
语法
以下是 HTML querySelector() 方法的语法 -
document.querySelector(CSS selectors);
示例
在下面的示例中，我们使用 HTML querySelector() 方法获取第一个 <div> 元素 -
<!DOCTYPE html>
<html>
<body>
<h1>The querySelector() Method</h1>
<div>Tutorialspoint</div>
<div>Simply Easy Learning at your fingertips.</div>
<script>
document.querySelector("div").style.backgroundColor = "seagreen";
</script>
</body>
</html>
HTML DOM querySelectorAll()
HTML querySelectorAll() 方法将返回所有与 CSS 选择器匹配的 HTML 元素。
语法
以下是 HTML querySelectorAll() 的语法 -
document.querySelectorAll(CSS 选择器);
示例
在下面的示例中，我们选择所有 class = "demo" 的元素，并为这些元素添加颜色。
<!DOCTYPE html>
<html>
<body>
<h1>The querySelector() Method</h1>
<h2 class = "demo">Tutorialspoint</h2>
<p class = "demo">Simply Easy Learning at your fingertips.</p>
<script>
const allElements = document.querySelectorAll(".demo");
for (let i = 0; i < allElements.length; i++) {
allElements[i].style.color = "seagreen";
}
</script>
</body>
</html>
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
