JavaScript Basics Simple Rollup (i): element acquisition

In a page script, if you want to manipulate a page element, we're going to get this element

The first thing you need to know about the DOM before you get the element is the Document Object model.

In the DOM, the elements are represented as nodes, and each node is an object, and the special effects we write usually are the properties of the modified node object, which is the legendary DOM operation.

And the node tree is actually the tree of the parent-child relationship of the element, so don't think it's too complicated.

This element node of the native JS can not be directly manipulated, only through the Document object to obtain

For example, I want to get elements by element ID Name:

document.getElementById ("Idname")

This is a way many people like, because it belongs to the shortest word. But people who have worked or have a certain knowledge of the reserve know that the ID name of the element is relatively small, so this situation is really used when the relatively few

In general, the layout of the class name is more, of course, through the class name to get the elements of the case is:

Document.getelementsbyclassname ("ClassName")

The element it gets is not a single, but a collection of elements (Htmlcollection), and if you want to get a single concrete element, add a subscript [num] after getting it.

But Getelementsbyclassname is not a good property, ie9,ff5+ the following browsers do not have this property, this is a very painful problem, all also use less.

If you must get the element through the class attribute, you can also write its compatibility method:

1 functionGetClass (obj,classname) {2       varHtmlcollection = [];3       varHtmlarr = document.getElementsByTagName ("*");4        for(vari=0;i){5             if(Htmlarr[i] = =className) {6 Htmlcollection.push (Htmlarr[i]);7            }    8       }9       returnhtmlcollection;

In addition to the class name and ID name, but also can be obtained through the tag, the method is also very simple, get to the element, as the class name gets the same as the existence of the collection, if you want to access a single to be obtained by subscript

The code is as follows:

document.getElementsByTagName ("TagName");

These methods are more or less have their own shortcomings, either too long, or can not directly obtain the desired element, if the parent-child relationship is more complex, the probability of one acquisition is relatively small

Why many people like to use JQ, because the JQ operation element through the $ () connection selector can be, do not worry, JS also has a similar method:

Document.queryselectorall ("select")

This method is convenient to obtain directly from the selector, the return value nodelist;

These are the most commonly used methods of acquiring elements, but this method is obtained from the document, if the structure is very complex, these methods are obviously not enough

Don't worry, Dom gives us a lot of node operations, and we'll see you in the next chapter.

My first article, first from the simple start, after the next update, if there are any suggestions, mistakes or want to communicate directly with me can add my qq:3106788893

JavaScript Basics Simple Rollup (i): element acquisition