JavaScript application analysis for DOM (2)_DOM

In fact, native JS also has these attributes. Almost the same as JQ but a little less. But it is a little more troublesome to use than JQ. Mainly because of the FF browser, because FF will treat your line break as a DOM element. For example,

Copy code The code is as follows:

I use native JS to get the ID as dom child elements under the element. The method I mentioned in the first chapter is var a = document.getElementById("dom").getElementsByTagName("div"); This is no problem. Yes, the alert(a.length) prompt will be 2, but now we use another method to obtain the var b = document.getElementById("dom").childNodes I mentioned in the last chapter; if so alert(b.length)IE There is no problem in the browser, it is still 2, but in the FF browser, it will prompt that it is 4. This is because FF treats line breaks as an element.
So we have to deal with those attributes in order to use JS. Processing ideas is as simple as traversing these elements. Delete all elements whose type is space and text. The processing function is like this

Copy code The code is as follows:

function del_space(elem){
var elem_child = elem.childNodes;
for(var i=0;iif(elem_child.nodeName == "#text" && !/S/.test( elem_child.nodeValue))
{elem.removeChild(elem_child)}
}}

Let me explain this function
var elem_child = elem.childNodes;
Pass The child elements of the incoming elem element are thrown to elem_child;

Copy the code The code is as follows:

for(var i=0;iif(elem_child.nodeName == "#text" && !/S/.test(elem_child.nodeValue))
{elem.removeChild (elem_child)}
}

Iterate through these child elements. If there is a node type in these elements that is text and the node value of this text type node is empty. Just delete it

(nodeName is an attribute in JS, which is used to get the node type of this node. /S/ is the regular expression of non-null characters in JS. Adding an exclamation mark in front of it means it is a null character. . Test is a method of JS, which is to compare the things inside it with the things outside. nodeValue means to get the value in this node. removeChild is also a method to delete a child element of the outside element)

like this You only need to call this function to clear the spaces before calling these attributes, and you can use it with confidence. For example,

Copy the code The code is as follows:

<script> <br>function dom(){ <br>var a = document.getElementById("dom"); <br>del_space(a); Call the function to clean up spaces<br>var b = a.childNodes; Get all the child nodes of a; <br>var c = a.parentNode; Get the parent node of a; <br>var d = a.nextSbiling; Get the next sibling node of a<br>var e = a.previousSbiling; Get the previous sibling node of a<br>var f = a.firstChild; Get the first child node of a<br>var g = a.lastChild; Get the last child node of a<br><br>} <br></script>

(In addition. var b = a.childNodes; also obtains an array; so for example, if I want to use the first node, it is childNodes[0]; The second node I want to use is childNodes[1]; and so on)

Getting the DOM is over here. The next chapter will teach you how to operate DOM elements.