JS id选择器|极客笔记

JS id选择器

在 JavaScript (JS) 编程中，id 选择器是一种常用的选择元素的方法。通过使用 id 属性，我们可以精确地选择并操作 HTML 文档中的特定元素。

本文将详细介绍 JS 中的 id 选择器，包括其基本语法、用法示例以及一些常见问题的解答。通过阅读本文，你将能够更好地理解和应用 id 选择器来操作网页元素。

1. 基本语法

在 JS 中，使用 id 选择器需要通过 document.getElementById() 方法来获取具有指定 id 属性值的元素。该方法会返回一个代表该元素的对象，通过这个对象我们可以对该元素进行操作。

document.getElementById(id)

其中，id 是指元素的 id 属性值，需要以字符串的形式传入。

2. 用法示例

下面通过一些实际的示例来演示如何使用 id 选择器来实现常见的操作。

2.1. 获取元素并修改其样式

首先，我们可以使用 id 选择器来获取指定 id 的元素，并修改其样式。例如，我们有一个 HTML 文档如下：

<!DOCTYPE html>
<html>
<head>
<style>
#myElement {
  color: red;
  font-weight: bold;
}
</style>
</head>
<body>

<h1 id="myElement">Hello World!</h1>
<p>This is a paragraph.</p>

</body>
</html>

上述代码中，我们有一个具有 id 属性值为 “myElement” 的 h1 元素，其样式设置为红色并加粗。

现在，我们可以使用 id 选择器来获取该元素，并修改其样式。下面是相应的 JS 代码示例：

// 获取元素
var element = document.getElementById("myElement");

// 修改样式
element.style.color = "blue";
element.style.fontSize = "20px";

在上述示例中，我们首先通过 id 选择器获取具有 id 属性值为 “myElement” 的元素，并将其赋值给变量 element。然后，我们通过修改 element.style 对象的属性来设置元素的样式。在本例中，我们将其文字颜色修改为蓝色，并设置字体大小为 20 像素。

2.2. 获取输入框的值

另一个常见的用法是获取输入框的值并进行操作。例如，我们有一个输入框如下：

<!DOCTYPE html>
<html>
<body>

<input type="text" id="myInput" value="Hello World!">

<p>点击按钮查看输入框的值：</p>

<button onclick="displayInputValue()">点击我</button>

<script>
function displayInputValue() {
  // 获取输入框的值
  var inputValue = document.getElementById("myInput").value;

  // 弹出框显示值
  alert("输入框的值是：" + inputValue);
}
</script>

</body>
</html>

上述代码中，我们有一个具有 id 属性值为 “myInput” 的输入框，并设置默认值为 “Hello World!”。接下来，我们定义了一个 displayInputValue 函数，当点击按钮时会调用该函数。

该函数首先通过 id 选择器获取到具有 id 属性值为 “myInput” 的输入框元素，并使用 .value 属性获取输入框的值。然后，我们使用 alert() 函数来显示输入框的值。

2.3. 动态创建元素

除了获取和修改已有元素，id 选择器还可以与 JS 的 DOM 操作配合使用来动态创建元素。例如，我们可以使用 id 选择器获取到容器元素，并在该容器中添加一个新的元素。下面是一个示例代码：

<!DOCTYPE html>
<html>
<body>

<div id="myContainer">
  <h2>我的容器</h2>
</div>

<button onclick="addNewElement()">点击我</button>

<script>
function addNewElement() {
  // 创建新元素
  var newElement = document.createElement("p");

  // 设置新元素的文本内容
  var textNode = document.createTextNode("这是一个新的段落。");
  newElement.appendChild(textNode);

  // 将新元素添加到容器中
  var container = document.getElementById("myContainer");
  container.appendChild(newElement);
}
</script>

</body>
</html>

上述代码中，我们首先使用 id 选择器获取具有 id 属性值为 “myContainer” 的容器元素，并将其赋值给变量 container。

然后，我们定义了一个 addNewElement 函数，该函数会在点击按钮时被调用。在函数中，我们首先创建了一个新的 p 元素，并使用 .createElement() 方法来实现。然后，我们使用 .createTextNode() 方法创建了一个文本节点，并将其添加到新元素中。最后，我们使用 .appendChild() 方法将新元素添加到容器元素中。

以此方法，我们可以通过动态创建元素来实现更加灵活的页面操作。