获取元素
-
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
7document.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 获取的是静态集合。
这句话是的难点在于对静态和动态的理解，什么是静态，什么是动态？
简单的说就是，动态就是选出的元素会随文档改变，静态是取出来之后就和文档的改变无关了。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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
var newElement = document.createElement("tagName");
-
插入元素到指定位置
1
2parentElement.appendChild(newElement); // 在子元素末尾插入
parentElement.insertBefore(newElement, referenceElement); // 在指定元素之前插入 -
删除元素
1
parentElement.removeChild(childElement);
获取元素自定义属性和文本内容
-
获取/设置元素的属性值
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']
-
获取/设置元素的文本内容
1
2var 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
5element = document.getElementById('myDiv');
// 直接设置样式
element.style.color = 'blue';
element.style.backgroundColor = 'yellow';
element.style.fontSize = '20px';