Application examples of javascript for DOM (1)

Application examples of javascript for DOM (1)_DOM

WBOY

Release： 2016-05-16 17:54:15

Original

1072 people have browsed it

I believe that most people who come here to learn JavaScript mainly want to use it to create some practical and useful interactive effects with DOM elements in the page. So I will only teach you the most practical and useful javascript applications here. But the prerequisite is that everyone should have some basic knowledge of javascript or jquery programming. Well, no more nonsense.
Today’s first article will teach you how to use JavaScript to get the DOM element in the page. This is very important. I will compare it to JQuery.
If the element in the page has an ID attribute

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

If I want to get an element under the parent element

Copy code The code is as follows:

< ;span>

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 a simple method var b = document.getElementById("dom ").childNodes[0] But there will be problems under FF, we will discuss this later

Get a set of elements in the page

Copy code The code is as follows:

JQ’s 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 equivalent to the above because it cannot be used directly like JQ above. A for loop is required to use together. If I use it individually, for example, I only use the first li, I only need var c = document.getElementById("dom").getElementsByTagName("li")[0], and the second one is var c = document.getElementById(" dom").getElementsByTagName("li")[1], and so on. Because DOM elements are stored in array form in JS.

The above is fairly easy to understand. What I am going to talk about now is commonly used by everyone. But the most troublesome attribute to obtain in native JS is the class attribute,

Native JS method: This is a bit troublesome. You need to write a function. Because native JS does not provide a method to directly obtain the class, we need to write the function like this first.

Copy code The code is as follows:

function $class(domclass){ 
var odiv = document. body.getElementByTagName("*"); 
var a; 
for(var i = 0;iif(odiv.className ==domclass){ 
 a = odiv 
} 
return a; 
} 
} 

 

It’s very simple to use this function to get it. Just var d = $class("dom" );

Let me talk about the meaning of this function,
var odiv = document.body.getElementByTagName("*");
This sentence means to get all the DOM elements in the page

Copy code The code is as follows:

for(var i = 0;iif(odiv.className ==domclass){ 
a = odiv 
} 

 

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

So using var d = $class("dom"); is equivalent In var d = a;

(By the way, className is an attribute of this JS that is the class that gets the name of the DOM element)

Okay, I will post this much today. It's relatively general. There must be a lot that you don't understand. If you don't understand, just ask. I will explain it one by one. You can also tell me what interaction effects you want to learn, and I will try my best to satisfy you.