JS操作dom元素（一）——获取DOM节点的六种方式

JS操作dom元素（一）——获取DOM节点的六种方式

js获取Dom节点常见的方法：元素节点，属性节点，文本节点。

1. 通过ID获取（getElementById）
2. 通过name属性（getElementsByName）
3. 通过标签名（getElementsByTagName）
4. 通过类名（getElementsByClassName）
5. 通过选择器获取一个元素（querySelector）
6. 通过选择器获取一组元素（querySelectorAll）
7. 获取html的方法（document.documentElement）
   document.documentElement是专门获取html这个标签的
8. 获取body的方法（document.body） document.body是专门获取body这个标签的。

1.getElementById() — id选中元素
    var getid=document.getElementById('id名字')
2.getElementsByClassName() — 类名选中元素
    var getclass=document.getElementsByClassName('类名')
3.getElementsByTagName() — 标签名选中元素
 	var gettag=document.getElementsByTagName('标签名')
4.getElementsByName() — 通过name属性获取元素
    var getname=document.getElementsByName('name名') 

	下面获取元素括号中的写法和css的选择器写法相同
5.querySelector() — 精准的获取某个元素 
    var f=document.querySelector("#tabelList li:nth-child(2)")
6.querySelectorAll()获取符合类名或者标签名等条件的的所有元素
    var g=document.querySelectorAll('.box p>span')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1、getElementById() — 通过id选中元素

上下文必须是document。
必须传参数，参数是string类型，是获取元素的id。
返回值只获取到一个元素，没有找到返回null。

function func() {
    var selectId = document.getElementById("id名字");
	selectId.style.color = "blue";
}
func();
1
2
3
4
5

2、getElementsByName — 通过name属性获取元素

一般使用在表单元素中

上下文必须是document。内容
必须传参数，参数是是获取元素的name属性。
返回值是一个类数组，没有找到返回空数组。

function funa() {
	var selectDiv = document.getElementsByName("status");
    selectDiv[0].checked = true;
    // 此时selectDiv是NodeList节点对象
    // console.log(selectDiv)
}
funa()


document.getElementsByName('name')
1
2
3
4
5
6
7
8
9
10

3、getElementsByTagName() — 通过标签名选中元素

上下文可以是document，也可以是一个元素，注意这个元素一定要存在。
参数是是获取元素的标签名属性，不区分大小写。
返回值是一个类数组，没有找到返回空数组

function func() {
    var selectTag = document.getElementsByTagName("标签名");
    selectTag.style.color = "blue";
}
func();


var obj = document.getElementsByTagName('div');
for(let i = 0; i<obj.length; i++){
    obj[i].onclick = function(e){
        console.log(i)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4、getElementsByClassName() — 通过类名选中元素

上下文可以是document，也可以是一个元素。
参数是元素的类名。
返回值是一个类数组，没有找到返回空数组。

function func() {
    var selectClass = document.getElementsByClassName("类名");
    selectClass.style.color = "blue";
}
func();


var obj1 = document.getElementsByClassName('animated')
// console.log
0:div.app.animated
1:div#login.login.animated.rubberBand
2:div#reg.reg.animated.shake
3:div#kefu.kefu.animated.swing
4:div#LoginState.state.animated.bounce
5:div.loginState.animated
6:div.regState.animated
7:div.pop.animated
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4、querySelector和queryselectorAll

获取元素括号中的写法和css的选择器写法相同

5-1 querySelector() — 精准的获取某个元素

上下文可以是document，也可以是一个元素。
参数是选择器，如：”div .className”。
返回值只获取到第一个元素。

function funb() {
	var selectDiv = document.querySelector("#list li:nth-child(3)");
    selectDiv.style.color = "red";
    // console.log(selectDiv)
}
funb()

document.querySelector('.animated')
1
2
3
4
5
6
7
8

5-2 queryselectorAll() —通过选择器获取一组元素

获取符合类名或者标签名等条件的的所有元素

上下文可以是document，也可以是一个元素。
参数是选择器，如：”div .className”。
返回值是一个类数组。

function func() {
	var selectDiv = document.querySelectorAll(".text ul>li");
	//此时selectDiv是一个数组，存放着li
    selectDiv[0].style.color = "red";
    //打印出为NodeList对象 -- 是节点的集合,可以使用 Array.from() 将其转换为数组
    console.log(selectDiv) 
}
func()


document.querySelector('.animated')
1
2
3
4
5
6
7
8
9
10
11

6、document.title和document.body

function fund() {
	document.title = "这是title元素";
    document.body.innerHTML = "<p style='color: red'>这是body元素</p>";
}
1
2
3
4

注：getElementByTagName可以操作动态创建的Dom，而getElementById不可以