JS operation DOM element (I) -- six ways to obtain DOM nodes

JS operation dom Elements （ One ）—— obtain DOM Six ways of nodes

js obtain Dom Common methods of nodes ： Element nodes , Attribute node , Text node .

1. adopt ID obtain （getElementById）
2. adopt name attribute （getElementsByName）
3. By tag name （getElementsByTagName）
4. By class name （getElementsByClassName）
5. Get an element through a selector （querySelector）
6. Get a set of elements through a selector （querySelectorAll）
7. obtain html Methods （document.documentElement）
   document.documentElement It's about getting html This label's
8. obtain body Methods （document.body） document.body It's about getting body This label's .

1.getElementById() — id Selected elements 
    var getid=document.getElementById('id name ')
2.getElementsByClassName() —  Class name selected element 
    var getclass=document.getElementsByClassName(' Class name ')
3.getElementsByTagName() —  Tag name selected element 
 	var gettag=document.getElementsByTagName(' Tag name ')
4.getElementsByName() —  adopt name Attribute get element 
    var getname=document.getElementsByName('name name ') 

	 Next, get the writing method and css The selector of is written in the same way 
5.querySelector() —  Get an element accurately  
    var f=document.querySelector("#tabelList li:nth-child(2)")
6.querySelectorAll() Get all elements that meet the conditions such as class name or tag name 
    var g=document.querySelectorAll('.box p>span')

1、getElementById() — adopt id Selected elements

The context must be document.
Parameters must be passed , Parameter is string type , Is to get the element id.
The return value only gets one element , No return found null.

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

2、getElementsByName — adopt name Attribute get element

Generally used in form elements

The context must be document. Content
Parameters must be passed , The parameter is to get the element name attribute .
The return value is an array of classes , Return empty array not found .

function funa() {
    
	var selectDiv = document.getElementsByName("status");
    selectDiv[0].checked = true;
    //  here selectDiv yes NodeList Node object 
    // console.log(selectDiv)
}
funa()


document.getElementsByName('name')

3、getElementsByTagName() — Select the element by the tag name

The context can be document, It can also be an element , Note that this element must exist .
The parameter is to get the tag name attribute of the element , Case insensitive .
The return value is an array of classes , Return empty array not found

function func() {
    
    var selectTag = document.getElementsByTagName(" Tag name ");
    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)
    }
}

4、getElementsByClassName() — Select the element by class name

The context can be document, It can also be an element .
The parameter is the class name of the element .
The return value is an array of classes , Return empty array not found .

function func() {
    
    var selectClass = document.getElementsByClassName(" Class name ");
    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

4、querySelector and queryselectorAll

Get the notation and... In the parentheses of the element css Selector Write the same way

5-1 querySelector() — Get an element accurately

The context can be document, It can also be an element .
Parameters are selectors , Such as ：”div .className”.
The return value only gets the first element .

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

document.querySelector('.animated')

5-2 queryselectorAll() — Get a set of elements through a selector

Get all elements that meet the conditions such as class name or tag name

The context can be document, It can also be an element .
Parameters are selectors , Such as ：”div .className”.
The return value is an array of classes .

function func() {
    
	var selectDiv = document.querySelectorAll(".text ul>li");
	// here selectDiv Is an array , Stored li
    selectDiv[0].style.color = "red";
    // Print out as NodeList object  --  It's a collection of nodes , have access to  Array.from()  Convert it to an array 
    console.log(selectDiv) 
}
func()


document.querySelector('.animated')

6、document.title and document.body

function fund() {
    
	document.title = " This is a title Elements ";
    document.body.innerHTML = "<p style='color: red'> This is a body Elements </p>";
}

notes ：getElementByTagName Can operate dynamically created Dom, and getElementById Can not be