In chapter 2, we will continue to get DOM elements on the page. We all know that it is very convenient to get the sibling elements, parent elements, and child elements of an element in JQ. In fact, these attributes are also available in the native JS. 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
The Code is as follows:
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 ("p"); 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.
The Code is as follows:
Function del_space (elem ){
Var elem_child = elem. childNodes;
For (var I = 0; 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;
The Code is as follows:
For (var I = 0; 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
The Code is as follows:
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.
