标签:Javascript  编程
发布于 2023-11-26 22:19 |更新于 2023-11-26 22:19

JS DOM 操作

获取元素

  • get

    • <span style="font-weight: bold;" data-type="strong">getElementById()</span> ​:返回对拥有指定 id 的第一个对象的引用

      1
      2
      3
      4
      5
      6
      7
      <div id="myElement">Hello, World!</div>

      <script>
      var element = document.getElementById("myElement");
      console.log(element.textContent); // 输出: Hello, World!
      </script>

    • <span style="font-weight: bold;" data-type="strong">getElementsByName()</span> ​:返回带有指定名称 name 的对象的集合。返回的是元素的 数组 ,而不是一个元素(由于 name 不唯一)

      1
      2
      3
      4
      5
      6
      7
      8
      <input type="text" name="username">
      <input type="text" name="username">

      <script>
      var elements = document.getElementsByName("username");
      console.log(elements.length); // 输出: 2
      </script>

    • getElementsByTagName() ​:返回带有指定标签名的对象集合

      1
      2
      3
      4
      5
      6
      7
      8
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>

      <script>
      var paragraphs = document.getElementsByTagName("p");
      console.log(paragraphs.length); // 输出: 2
      </script>

    • <span style="font-weight: bold;" data-type="strong">getElementsByClassName</span>​ :返回文档中所有指定类名的元素集合

      1
      2
      3
      4
      // 获取单个类
      var x = document.getElementsByClassName("example");
      // 可以获取同时包含 "example" 和 "color" 类名的所有元素,并修改它的颜色:
      var x = document.getElementsByClassName("example color");
  • query

    • querySelector() ​ :返回文档中匹配指定 CSS 选择器第一个元素

      1
      2
      3
      4
      5
      6
      7
      document.querySelector("p")      //获取文档中第一个 <p> 元素:
      document.querySelector("#demo") //获取文档中id="demo"的元素
      document.querySelector(".example"); //获取文档中第一个 class="example" 的元素
      document.querySelector("p.example"); //获取文档中 class="example"的第一个 <p> 元素
      ......
      // 还可以写CSS的并集选择器、复合选择器等等。按照css规范来实现。

    • querySelectorAll() ​:返回文档中匹配的 CSS 选择器所有元素节点列表

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      </ul>

      <script>
      var listItems = document.querySelectorAll("li");
      console.log(listItems.length); // 输出: 3
      </script>

ℹ get 和 query 的区别

getXXXByXXX 获取的是动态集合,querySelector 获取的是静态集合。

这句话是的难点在于对静态和动态的理解,什么是静态,什么是动态?

简单的说就是,动态就是选出的元素会随文档改变,静态是取出来之后就和文档的改变无关了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
<div id="test">
<p v-model="aa">text</p>
<p>text</p>
</div>
</body>
<script>
var querySelector = document.querySelector('#test')
var getElementById = document.getElementById('test')
console.log(querySelector === getElementById) // true
var querySelectorAll = document.querySelectorAll('p')
for(let i=0;i < querySelectorAll.length;i++){
querySelector.appendChild(document.createElement('p'))
}
console.log(querySelectorAll.length)
//值为2,动态添加元素并没有使querySelectorAll发生变化

var getElementsByTagName = document.getElementsByTagName('p')
for(let i=0;i < 3;i++){
getElementById.appendChild(document.createElement('p'))
}
console.log(getElementsByTagName.length)
//值为4+3=7,每次动态添加元素都使getElementsByTagName发生了变化
</script>

⚠️ 备注:这两种方法都不能查找伪类元素。

创建、插入、删除元素

  1. 创建新元素

    1
    var newElement = document.createElement("tagName");
  2. 插入元素到指定位置

    1
    2
    parentElement.appendChild(newElement); // 在子元素末尾插入
    parentElement.insertBefore(newElement, referenceElement); // 在指定元素之前插入
  3. 删除元素

    1
    parentElement.removeChild(childElement);

获取元素自定义属性和文本内容

  1. 获取/设置元素的属性值

    1
    2
    3
    4
    5
    6
    7
    // 默认属性的获取
    element.getAttribute('class');
    element.getAttribute('style');
    element.getAttribute('id');
    // 自定义属性的设置和获取
    element.setAttribute('data-custom', 'new value');
    element.getAttribute('data-custom');

    自定义属性还可以通过element.dataset['custom']​获取

    1
    element.dataset['custom']
  2. 获取/设置元素的文本内容

    1
    2
    var textContent = element.textContent;
    element.textContent = "new text";

操作元素样式

  • 操作class

    1
    2
    3
    4
    5
    6
    7
    8
    // 添加 class
    element.classList.add("class")
    // 移除 class
    element.classList.remove("class")
    // 切换 class,有则移除,无则添加
    element.classList.toggle("class")
    //检测是否存在 class
    element.classList.contains("class")
  • 直接操作style

    1
    2
    3
    4
    5
    element = document.getElementById('myDiv');
    // 直接设置样式
    element.style.color = 'blue';
    element.style.backgroundColor = 'yellow';
    element.style.fontSize = '20px';