获取HTML元素的id|极客笔记

获取HTML元素的id

在网页开发中，HTML元素的id属性是用来唯一标识一个元素的。通过id属性，我们可以方便地获取到特定的HTML元素，从而对其进行操作或者修改。本文将详细介绍如何通过JavaScript来获取HTML元素的id，并提供多个示例代码。

1. 通过getElementById方法获取元素

在JavaScript中，我们可以使用document.getElementById()方法来获取指定id的HTML元素。该方法会返回一个表示指定元素的对象，我们可以通过该对象来操作该元素。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<h1 id="title">Hello, deepinout.com!</h1>

<script>
var element = document.getElementById("title");
console.log(element);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，控制台会输出表示<h1>元素的对象，我们可以通过该对象来操作<h1>元素。

2. 通过querySelector方法获取元素

除了getElementById方法外，我们还可以使用document.querySelector()方法来获取指定选择器的HTML元素。通过该方法，我们可以使用CSS选择器语法来获取元素。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<h2 id="subtitle">Welcome to deepinout.com!</h2>

<script>
var element = document.querySelector("#subtitle");
console.log(element);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，控制台会输出表示<h2>元素的对象，我们同样可以通过该对象来操作<h2>元素。

3. 通过getElementsByClassName方法获取元素

除了通过id属性来获取元素外，我们还可以通过class属性来获取元素。使用document.getElementsByClassName()方法可以获取指定类名的所有元素。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<p class="content">This is a paragraph on deepinout.com!</p>

<script>
var elements = document.getElementsByClassName("content");
console.log(elements);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，控制台会输出一个包含表示<p>元素的对象的集合，我们可以通过遍历该集合来操作每个<p>元素。

4. 通过getElementsByTagName方法获取元素

除了通过id和class属性来获取元素外，我们还可以通过标签名来获取元素。使用document.getElementsByTagName()方法可以获取指定标签名的所有元素。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
var elements = document.getElementsByTagName("li");
console.log(elements);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，控制台会输出一个包含表示<li>元素的对象的集合，我们同样可以通过遍历该集合来操作每个<li>元素。

5. 通过querySelectorAll方法获取元素

除了querySelector方法外，我们还可以使用document.querySelectorAll()方法来获取指定选择器的所有HTML元素。通过该方法，我们可以使用CSS选择器语法来获取元素。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<div class="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

<script>
var elements = document.querySelectorAll(".container p");
console.log(elements);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，控制台会输出一个包含表示<p>元素的对象的集合，我们可以通过遍历该集合来操作每个<p>元素。

6. 通过getAttribute方法获取元素的id属性值

除了直接获取元素对象外，我们还可以通过getAttribute()方法来获取元素的指定属性值。通过该方法，我们可以获取元素的id属性值。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<div id="container">This is a container</div>

<script>
var element = document.getElementById("container");
var id = element.getAttribute("id");
console.log(id);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，控制台会输出container，即<div>元素的id属性值。

7. 通过classList属性获取元素的类名

除了获取元素的id属性值外，我们还可以通过classList属性来获取元素的类名。通过该属性，我们可以获取元素的所有类名，并进行操作。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<div class="box red">This is a red box</div>

<script>
var element = document.querySelector(".box");
var classes = element.classList;
console.log(classes);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，控制台会输出一个包含box和red的DOMTokenList对象，我们可以通过该对象来操作元素的类名。

8. 通过parentNode属性获取元素的父元素

除了获取元素本身外，我们还可以通过parentNode属性来获取元素的父元素。通过该属性，我们可以获取元素的直接父元素。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<div id="parent">
  <div id="child">This is a child element</div>
</div>

<script>
var childElement = document.getElementById("child");
var parentElement = childElement.parentNode;
console.log(parentElement);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，控制台会输出表示<div id="parent">元素的对象，即child元素的父元素。

9. 通过children属性获取元素的子元素

除了获取元素的父元素外，我们还可以通过children属性来获取元素的所有子元素。通过该属性，我们可以获取元素的所有直接子元素。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
var listElement = document.getElementById("list");
var children = listElement.children;
console.log(children);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，控制台会输出一个包含表示<li>元素的对象的集合，即list元素的所有子元素。

10. 通过previousElementSibling和nextElementSibling属性获取元素的相邻元素

除了获取元素的父元素和子元素外，我们还可以通过previousElementSibling和nextElementSibling属性来获取元素的前一个和后一个相邻元素。通过这两个属性，我们可以获取元素的相邻元素。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<ul>
  <li>Item 1</li>
  <li id="target">Item 2</li>
  <li>Item 3</li>
</ul>

<script>
var targetElement = document.getElementById("target");
var previousElement = targetElement.previousElementSibling;
var nextElement = targetElement.nextElementSibling;
console.log(previousElement);
console.log(nextElement);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，控制台会输出表示<li>元素的对象，即target`元素的前一个和后一个相邻元素。

11. 通过firstElementChild和lastElementChild属性获取元素的第一个和最后一个子元素

除了获取元素的所有子元素外，我们还可以通过firstElementChild和lastElementChild属性来获取元素的第一个和最后一个子元素。通过这两个属性，我们可以获取元素的第一个和最后一个子元素。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
var listElement = document.getElementById("list");
var firstChild = listElement.firstElementChild;
var lastChild = listElement.lastElementChild;
console.log(firstChild);
console.log(lastChild);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，控制台会输出表示<li>元素的对象，即list元素的第一个和最后一个子元素。

12. 通过innerHTML属性获取元素的HTML内容

除了获取元素本身外，我们还可以通过innerHTML属性来获取元素的HTML内容。通过该属性，我们可以获取元素内部的HTML代码。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<div id="content">
  <p>This is a paragraph</p>
</div>

<script>
var contentElement = document.getElementById("content");
var htmlContent = contentElement.innerHTML;
console.log(htmlContent);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，控制台会输出<p>This is a paragraph</p>，即content元素内部的HTML代码。

13. 通过innerText属性获取元素的文本内容

除了获取元素的HTML内容外，我们还可以通过innerText属性来获取元素的文本内容。通过该属性，我们可以获取元素内部的文本内容，而不包括HTML标记。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<div id="text">This is some text</div>

<script>
var textElement = document.getElementById("text");
var textContent = textElement.innerText;
console.log(textContent);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，控制台会输出This is some text，即text元素内部的文本内容。

14. 通过setAttribute方法设置元素的属性值

除了获取元素的属性值外，我们还可以通过setAttribute()方法来设置元素的属性值。通过该方法，我们可以设置元素的指定属性值。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<div id="box">This is a box</div>

<script>
var boxElement = document.getElementById("box");
boxElement.setAttribute("class", "red");
console.log(boxElement);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，box元素的类名会被设置为red，我们可以通过控制台查看box元素的类名是否已经被修改。

15. 通过removeAttribute方法移除元素的属性值

除了设置元素的属性值外，我们还可以通过removeAttribute()方法来移除元素的指定属性值。通过该方法，我们可以移除元素的指定属性。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<div id="box" class="red">This is a red box</div>

<script>
var boxElement = document.getElementById("box");
boxElement.removeAttribute("class");
console.log(boxElement);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，box元素的类名red会被移除，我们可以通过控制台查看box元素的类名是否已经被移除。

16. 通过addEventListener方法为元素添加事件监听器

除了操作元素的属性值外，我们还可以通过addEventListener()方法为元素添加事件监听器。通过该方法，我们可以为元素添加各种事件，如点击事件、鼠标移入事件等。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<button id="btn">Click me</button>

<script>
var btnElement = document.getElementById("btn");
btnElement.addEventListener("click", function() {
  alert("Button clicked!");
});
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，点击按钮后会弹出一个提示框，说明按钮被点击了。

17. 通过style属性修改元素的样式

除了添加事件监听器外，我们还可以通过style属性来修改元素的样式。通过该属性，我们可以直接操作元素的CSS样式。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<div id="box">This is a box</div>

<script>
var boxElement = document.getElementById("box");
boxElement.style.backgroundColor = "red";
boxElement.style.color = "white";
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，box元素的背景颜色会变为红色，文字颜色会变为白色。

18. 通过createElement方法创建新元素

除了操作现有元素外，我们还可以通过createElement()方法创建新元素。通过该方法，我们可以动态地向页面中添加新的HTML元素。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<div id="container"></div>

<script>
var containerElement = document.getElementById("container");
var newElement = document.createElement("p");
newElement.innerText = "This is a new paragraph";
containerElement.appendChild(newElement);
</script>

</body>
</html>

Output:

获取HTML元素的id

运行以上代码，页面中会动态添加一个新的<p>元素，并显示文本This is a new paragraph。

19. 通过removeChild方法移除元素

除了创建新元素外，我们还可以通过removeChild()方法移除元素。通过该方法，我们可以动态地从页面中移除指定的HTML元素。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<div id="container">
  <p>This is a paragraph</p>
</div>

<script>
var containerElement = document.getElementById("container");
var paragraphElement = containerElement.querySelector("p");
containerElement.removeChild(paragraphElement);
</script>

</body>
</html>

运行以上代码，页面中的<p>元素会被移除，即container元素中的段落文本会消失。

20. 通过cloneNode方法复制元素

除了移除元素外，我们还可以通过cloneNode()方法复制元素。通过该方法，我们可以复制指定的HTML元素，并在页面中添加副本。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<div id="original">Original element</div>

<script>
var originalElement = document.getElementById("original");
var cloneElement = originalElement.cloneNode(true);
document.body.appendChild(cloneElement);
</script>

</body>
</html>

Output:

获取HTML元素的id