JS获取DOM节点的六种方式

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

1、getElementById() — id选中元素

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

2、getElementByClassName() — 类名选中元素

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

3、getElementByTagName() — 标签名选中元素

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

4、querySelector和queryselectorAll

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

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

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

4-2 queryselectorAll() — 获取符合类名或者标签名等条件的的所有元素

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

5、getElementByName — 通过name属性获取元素

一般使用在表单元素中

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

6、document.title和document.body

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

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