极客笔记如何获取HTML元素对象
在Web开发中，经常需要通过JavaScript来操作HTML元素对象，例如修改元素的样式、内容或者绑定事件等。本文将详细介绍如何通过JavaScript获取HTML元素对象，并提供多个示例代码来演示不同的获取方式。
通过ID获取元素对象
通过元素的ID属性可以直接获取对应的元素对象。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>通过ID获取元素对象</title>
</head>
<body>
<div id="demo">Hello, deepinout.com!</div>
<script>
var element = document.getElementById("demo");
console.log(element);
</script>
</body>
</html>
Output:
运行以上代码，控制台会输出<div id="demo">Hello, deepinout.com!</div>，表示成功获取到了ID为demo的元素对象。
通过类名获取元素对象
通过元素的类名可以获取所有具有相同类名的元素对象，返回一个类数组。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>通过类名获取元素对象</title>
</head>
<body>
<div class="demo">Hello, deepinout.com!</div>
<div class="demo">Welcome to deepinout.com!</div>
<script>
var elements = document.getElementsByClassName("demo");
console.log(elements);
</script>
</body>
</html>
Output:
运行以上代码，控制台会输出一个包含两个<div>元素的类数组，表示成功获取到了类名为demo的元素对象。
通过标签名获取元素对象
通过元素的标签名可以获取所有具有相同标签名的元素对象，返回一个类数组。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>通过标签名获取元素对象</title>
</head>
<body>
<div>Hello, deepinout.com!</div>
<p>Welcome to deepinout.com!</p>
<script>
var elements = document.getElementsByTagName("div");
console.log(elements);
</script>
</body>
</html>
Output:
运行以上代码，控制台会输出一个包含一个<div>元素的类数组，表示成功获取到了标签名为div的元素对象。
通过选择器获取元素对象
通过CSS选择器可以获取符合条件的元素对象，返回一个类数组。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>通过选择器获取元素对象</title>
<style>
.demo {
color: red;
}
</style>
</head>
<body>
<div class="demo">Hello, deepinout.com!</div>
<p class="demo">Welcome to deepinout.com!</p>
<script>
var elements = document.querySelectorAll(".demo");
console.log(elements);
</script>
</body>
</html>
Output:
运行以上代码，控制台会输出一个包含两个具有类名为demo的元素对象的类数组，表示成功获取到了符合选择器.demo的元素对象。
通过父元素获取子元素对象
通过父元素对象可以获取其所有子元素对象，返回一个类数组。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>通过父元素获取子元素对象</title>
</head>
<body>
<div id="parent">
<div>Hello, deepinout.com!</div>
<p>Welcome to deepinout.com!</p>
</div>
<script>
var parent = document.getElementById("parent");
var children = parent.children;
console.log(children);
</script>
</body>
</html>
Output:
运行以上代码，控制台会输出一个包含两个子元素对象的类数组，表示成功获取到了父元素parent的子元素对象。
通过父元素获取指定子元素对象
通过父元素对象和子元素的索引可以获取指定的子元素对象。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>通过父元素获取指定子元素对象</title>
</head>
<body>
<div id="parent">
<div>Hello, deepinout.com!</div>
<p>Welcome to deepinout.com!</p>
</div>
<script>
var parent = document.getElementById("parent");
var child = parent.children[1];
console.log(child);
</script>
</body>
</html>
Output:
运行以上代码，控制台会输出<p>Welcome to deepinout.com!</p>，表示成功获取到了父元素parent的第二个子元素对象。
通过父元素获取第一个子元素对象
通过父元素对象的firstElementChild属性可以获取第一个子元素对象。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>通过父元素获取第一个子元素对象</title>
</head>
<body>
<div id="parent">
<div>Hello, deepinout.com!</div>
<p>Welcome to deepinout.com!</p>
</div>
<script>
var parent = document.getElementById("parent");
var firstChild = parent.firstElementChild;
console.log(firstChild);
</script>
</body>
</html>
Output:
运行以上代码，控制台会输出<div>Hello, deepinout.com!</div>，表示成功获取到了父元素parent的第一个子元素对象。
通过父元素获取最后一个子元素对象
通过父元素对象的lastElementChild属性可以获取最后一个子元素对象。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>通过父元素获取最后一个子元素对象</title>
</head>
<body>
<div id="parent">
<div>Hello, deepinout.com!</div>
<p>Welcome to deepinout.com!</p>
</div>
<script>
var parent = document.getElementById("parent");
var lastChild = parent.lastElementChild;
console.log(lastChild);
</script>
</body>
</html>
Output:
运行以上代码，控制台会输出<p>Welcome to deepinout.com!</p>，表示成功获取到了父元素parent的最后一个子元素对象。
通过父元素获取兄弟元素对象
通过兄弟元素对象的previousElementSibling和nextElementSibling属性可以获取前一个和后一个兄弟元素对象。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>通过父元素获取兄弟元素对象</title>
</head>
<body>
<div id="parent">
<div>Hello, deepinout.com!</div>
<p>Welcome to deepinout.com!</p>
<div>Goodbye, deepinout.com!</div>
</div>
<script>
var parent = document.getElementById("parent");
var firstChild = parent.firstElementChild;
var nextSibling = firstChild.nextElementSibling;
var previousSibling = nextSibling.previousElementSibling;
console.log(previousSibling);
console.log(nextSibling);
</script>
</body>
</html>
Output:
运行以上代码，控制台会依次输出<p>Welcome to deepinout.com!</p>和<div>Goodbye,deepinout.com!</div>，表示成功获取到了父元素parent的前一个和后一个兄弟元素对象。
通过属性获取元素对象
通过元素对象的属性值可以获取对应的元素对象。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>通过属性获取元素对象</title>
</head>
<body>
<input type="text" id="input" value="deepinout.com">
<script>
var element = document.querySelector('[value="deepinout.com"]');
console.log(element);
</script>
</body>
</html>
Output:
运行以上代码，控制台会输出<input type="text" id="input" value="deepinout.com">，表示成功获取到了属性值为deepinout.com的元素对象。
通过表单获取元素对象
通过表单元素对象可以获取表单中的各个元素对象。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>通过表单获取元素对象</title>
</head>
<body>
<form id="form">
<input type="text" name="username" value="deepinout.com">
<input type="password" name="password" value="123456">
</form>
<script>
var form = document.getElementById("form");
var username = form.elements["username"];
var password = form.elements["password"];
console.log(username);
console.log(password);
</script>
</body>
</html>
Output:
运行以上代码，控制台会依次输出<input type="text" name="username" value="deepinout.com">和<input type="password" name="password" value="123456">，表示成功获取到了表单中的两个元素对象。
通过事件获取元素对象
通过事件对象可以获取触发事件的元素对象。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>通过事件获取元素对象</title>
</head>
<body>
<button onclick="getTarget(event)">Click me</button>
<script>
function getTarget(event) {
var target = event.target;
console.log(target);
}
</script>
</body>
</html>
Output:
运行以上代码，点击按钮后，控制台会输出<button onclick="getTarget(event)">Click me</button>，表示成功获取到了触发事件的按钮元素对象。
通过遍历获取元素对象
通过遍历DOM树可以获取所有符合条件的元素对象。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>通过遍历获取元素对象</title>
</head>
<body>
<ul>
<li>deepinout.com</li>
<li>deepinout.com</li>
<li>deepinout.com</li>
</ul>
<script>
var listItems = document.getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++) {
console.log(listItems[i]);
}
</script>
</body>
</html>
Output:
运行以上代码，控制台会依次输出三个<li>元素对象，表示成功获取到了所有<li>元素对象。