Example of javascript DOM-specific applications (1)

I believe most people may want to learn javascript here, but they still want to use it to combine the DOM elements on the page for some practical and useful interaction effects. So here I will only teach you the most practical and useful javascript applications. But it is recommended that you have some basic javascript or jquery programming. No more nonsense.
In the first article today, we will teach you how to use javascript to obtain dom elements on pages. This is important. I will compare it with JQuery.
If the element on the page is the ID attribute
<Div id = "dom"> </div>

JQ method: $ ("# dom "),
Native js method: var a = document. getElementById ("dom"); this a is equivalent to $ ("# dom ");

If I want to obtain an element under a parent element
Copy codeThe Code is as follows:
<Div id = "dom">
<Span> </span>
</Div>

JQ method: $ ("# dom span "),
Native js method: var B = document. getElementById ("dom"). getElementsByTagName ("span") [0]; this B is equivalent to $ ("# dom span ")
In fact, there is also a simple method var B = document. getElementById ("dom"). childNodes [0] But there will be problems in FF. We will discuss it later.

Obtain a group of elements on the page
Copy codeThe Code is as follows:
<Div id = "dom">
<Ul>
<Li> </li>
<Li> </li>
<Li> </li>
<Ul>
</Div>

JQ method: $ ("# dom ul li") or $ ("# dom li") or $ ("# dom> li "),
Native JS method: var c = document. getElementById ("dom"). getElementsByTagName ("li"); but this c is not the same as above, because it cannot be directly used as JQ above. You must use the for loop to use it together. For example, if I only use the first li, I only need var c = document. getElementById ("dom "). getElementsByTagName ("li") [0], the second is var c = document. getElementById ("dom "). getElementsByTagName ("li") [1], and so on. Because DOM elements are stored as arrays in JS.

The above are still easy to understand. What I want to talk about now is commonly used by everyone. However, the most troublesome attribute to be obtained in native JS is the class attribute,
<Div class = "dom">
</Div>

JQ method: Very simple $ (". dom ");
Native JS method: this is a bit of a hassle. You need to write a function. Because native JS does not provide a method to directly obtain the class. So we need this. Write the function first.
Copy codeThe Code is as follows:
Function $ class (domclass ){
Var odiv = document. body. getElementByTagName ("*");
Var;
For (var I = 0; I <odiv. length; I ++ ){
If (odiv. className = domclass ){
A = odiv
}
Return;
}
}

It is easy to use this function to obtain it. You only need var d = $ class ("dom ");

Let me talk about the meaning of this function,
Var odiv = document. body. getElementByTagName ("*");
Obtain all DOM elements on the page.
Copy codeThe Code is as follows:
For (var I = 0; I <odiv. length; I ++ ){
If (odiv. className = domclass ){
A = odiv
}

This is to traverse all the elements on the page and compare them with their classes. If it is the same as the domclass parameter we passed in, we will give this element to;
Return a; return

Therefore, using var d = $ class ("dom"); is equivalent to var d =;

(By The Way, className is an attribute of this JS to get the class named by the DOM element)

Okay, so many messages are sent today. I think I write in general terms. There must be a lot of things you don't understand. If you don't understand, you can directly ask. I will explain them one by one. You can also tell me what interaction effects you want to learn. I will try my best to satisfy you.