极客笔记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元素的类名。我们还可以通过用空格分隔它们来搜索多个类名（例如，getElementByClassName(“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）的集合。该集合可通过索引值（从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 selectors);
示例
在下面的示例中，我们选择所有具有类名为“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>