JavaScript(JS) DOM基础使用

19642 阅读 0 评论 164 点赞

前面一节我们知道了什么是DOM操作，本节我们将深入讲解标签的获取和操作。

在JS中，我们可以使用多种方式获取DOM元素，如：

1. 通过标签名获取元素:

使用document.getElementsByTagName方法，传入标签名，可以获取到一个元素集合。例如：

let elements = document.getElementsByTagName("div");

2. 通过类名获取元素:

使用document.getElementsByClassName方法，传入类名，可以获取到一个元素集合。例如：

let elements = document.getElementsByClassName("myClass");

3. 通过ID获取元素:

使用document.getElementById方法，传入元素的ID名称，可以获取到具有该ID的元素。例如：

let element = document.getElementById("myElement");

4. 使用CSS选择器获取元素:

使用querySelector和querySelectorAll方法可以使用CSS选择器获取元素。querySelector方法返回匹配的第一个元素，而querySelectorAll返回所有匹配的元素。例如：

let element = document.querySelector("#myElement");
let elements = document.querySelectorAll(".myClass");

在JS中，我们可以通过获取的元素修改它们对应的的内容、属性和样式等。

1. 修改元素内容和属性:

可以使用innerHTML和innerText属性修改元素的内容。innerHTML可以设置HTML内容，而innerText只能设置纯文本内容。例如：

let element = document.getElementById("myElement");
// 修改元素内容
element.innerHTML = "<strong>New content dotcpp.com</strong>";
element.innerText = "New text content dotcpp.com";
// 修改元素属性
element.setAttribute("src", "example.jpg");
element.setAttribute("class", "someClass anotherClass");

2. 添加和删除元素:

我们可以使用createElement方法创建新元素，使用appendChild方法将新元素添加到父元素中，使用removeChild方法删除元素。例如：

let parentElement = document.getElementById("parent");
// 添加新元素
let newElement = document.createElement("div");
newElement.innerHTML = "New element";
parentElement.appendChild(newElement);
// 删除元素
let removeElement = document.getElementById("remove");
parentElement.removeChild(removeElement);

3. 修改样式和类名:

可以使用style属性和className属性修改元素的样式和类名。例如：

let element = document.getElementById("myElement");
// 修改样式
element.style.color = "red";
element.style.backgroundColor = "#fff";
// 修改类名
element.className = "newClass";
element.classList.add("newClass");
element.classList.remove("oldClass");

实际操作：在HTML页面找到id=myBtn的按钮，并更改它的背景色为greenyellow:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    button {
      width: 300px;
      height: 200px;
      display: block;
      margin: 200px auto;
      background-color: rgba(0, 0, 0, 0.164);
      font-size: 50px;
    }
  </style>
</head>
<body>
  <button id="myBtn">按钮</button>
</body>
<script>
/* 获取标签 */
const myBtn=document.getElementById('myBtn')
/* 更改按钮背景色 */
myBtn.style.backgroundColor='greenyellow'
</script>
</html>

总结：通过获取标签和更改标签样式和内容，我们就可以使得页面按照我们的想法进行更改。