Analysis of javascript DOM application (2)

In fact, the native JS also has these attributes. Similar to JQ, but less than JQ. However, it is a little more difficult to use than JQ. This is mainly because of the FF browser, because FF will treat your line feed as a DOM element. For example
Copy codeThe Code is as follows:
<Div id = "dom">
<Div> </div>
<Div> </div>
</Div>

I use native JS to obtain sub-elements under the element with ID dom. The method described in Chapter 1 is var a = document. getElementById ("dom"). getElementsByTagName ("div"); no problem. Alert (. length) the prompt is 2, but now we can use another method to obtain the var B = document. getElementById ("dom "). childNodes; if so alert (B. length) There is no problem on IE or 2, but the FF browser will prompt 4, which is because FF regards the line feed as an element.
So we have to deal with the JS attributes. The solution is simply to traverse these elements. The element type is space and all text is deleted. The processing function is like this.
Copy codeThe Code is as follows:
Function del_space (elem ){
Var elem_child = elem. childNodes;
For (var I = 0; I <elem_child.length; I ++ ){
If (elem_child.nodeName = "# text "&&! /\ S/. test (elem_child.nodeValue ))
{Elem. removeChild (elem_child )}
}}

Let me explain this function.
Var elem_child = elem. childNodes;
Threw all the child elements of the passed elem element to elem_child;
Copy codeThe Code is as follows:
For (var I = 0; I <elem_child.length; I ++ ){
If (elem_child.nodeName = "# text "&&! /\ S/. test (elem_child.nodeValue ))
{Elem. removeChild (elem_child )}
}

Traverse these child elements. If the node type of these elements is text and the node value of this text type node is null. Delete it.

(NodeName is an attribute in JS. Get the node type of this node, and the regular expression of this non-null character in JS. Add an exclamation point to indicate that it is a null character. Test is a method of JS, that is, to compare the content inside it with the content outside it. NodeValue indicates that removeChild is also a method to delete a child element of this element)

In this way, you only need to call this function to clear spaces before calling these properties, for example
Copy codeThe Code is as follows:
<Div id = "dom">
<Div> </div>
<Div> </div>
</Div>

<Script>
Function dom (){
Var a = document. getElementById ("dom ");
Del_space (a); call the function for clearing Spaces
Var B = a. childNodes; obtain all subnodes OF;
Var c = a. parentNode; obtain the parent node of;
Var d = a. nextSbiling; obtain the next sibling node of.
Var e = a. previussbiling; obtain the previous sibling node of.
Var f = a. firstChild; obtain the first subnode of.
Var g = a. lastChild; obtain the last subnode of.

}
</Script>

(Also. Var B = a. childNodes; the obtained result is also an array. For example, the first node I want to use is childNodes [0]; The second node I want to use is childNodes [1]; and so on)

The process of getting the DOM is over. The next chapter teaches you how to operate DOM elements.