你必须要会的DOM操作

思维导图

必须要会的DOM操作
|
|—— 获取指定的元素对象
|
|—— 编辑指定元素的内容
|—— 编辑指定元素的属性内容
|
|—— 设置DOM事件和定时器
1
2
3
4
5
6
7
8
1.1. 获取想要的元素
DOM操作返回的是一个对象, 浏览器渲染之后html标签也是都会转化为对象

通过id获取指定元素
由于id不可以重复, 所以找到了就会将找到的标签包装成一个对象返回给我们, 找不到就返回Null

let oDiv = document.getElementById(“box”);
console.log(oDiv);
console.log(typeof oDiv);
1
2
3
1.1.1. 通过class名称获取
由于class可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组

let oDivs = document.getElementsByClassName(“father”);
console.log(oDivs);
1
2
1.1.2. 通过标签名称获取
由于标签名称可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组

let oDivs = document.getElementsByTagName(“div”);
console.log(oDivs);
1
2
下面的两种最常用

1.1.3. 通过选择器获取指定的第一个元素
querySelector只会返回根据指定选择器找到的第一个元素

// let oDiv = document.querySelector("#box");
// let oDiv = document.querySelector(".father");
let oDiv = document.querySelector(“div>form”);
console.log(oDiv);
1
2
3
4
1.1.4. 通过选择器获取全部指定元素
querySelectorAll会返回指定选择器找到的所有元素

let oDivs = document.querySelectorAll(".father");
console.log(oDivs);
1
2
div #app .buttom

1.2. 对获取到的元素内容进行编辑
1.2.1. 获取元素内容
无论是innerHTML还是innerText都不会获取到所选择元素的本身这个标签
innerHTML获取的内容包含标签, innerText/textContent获取的内容不包含标签
textContent获取的内容不会去除两端的空格, innerText获取的内容会去除两端的空格，所以两者中最常用的是innerText

我是div

我是标题

let oDiv2 = document.querySelector(“h1”);
console.log(oDiv2.innerHTML);
console.log(oDiv2.innerText);
console.log(oDiv2.textContent);