Dom operation compatibility tips _ DOM

When Dom is used to operate HTML and XML. we often encounter space issues. maybe you have never met. for example, when we obtain all li elements under ul. or the next element of an element. may encounter this annoying space problem. of course, these spaces will be automatically filtered out in IE browser. FF is not so hardworking. FF browser will also regard these spaces as an element. if you are confused about the space elements in the Dom, run the following code. at least use IE and FF browsers for testing. you will understand everything!

The Code is as follows:

Dom


After running the code, you will find that 3 is displayed in IE. 7 is displayed in FF.

1. Html


2. Css


3. Dom

Script
Var list = document. getElementById ("list ");
Var list_child = list. childNodes; // obtain all the subelements of ol.
Alert ("ol total" + list_child.length + "elements, respectively ");
For (var I = 0; I Alert (list_child [I]. tagName );
}
Script

The code above demonstrates how to obtain all the child elements of the ol element. the pop-up ol contains several child elements. we can see that ol contains three li elements. in IE, 3 is displayed. This is correct. so why is 7 displayed in FF and Chrome browsers? In fact, when you write code. A space is formed between the element and the line feed. (Note: Do not think that a space will be formed when a car is returned. this is wrong, that is to say, the blank between the element and the element, you are changing hundreds of rows. it is also a space.) FF and Chrome do not filter these space elements. so 7 is correct.
The following uses the same html structure to demonstrate how to filter and delete these space elements.

The Code is as follows:

Dom


After running the code, you will find that the returned results in IE, FF, and Chrome are the same.

1. Html


2. Css


3. Dom

Script
Function Del_space (elem) {// function used to filter Spaces
Var elem_child = elem. childNodes; // obtain all child elements
For (var I = 0; I // Delete a text node if its content only contains spaces
If (elem_child [I]. nodeName = "# text "&&! /\ S/. test (elem_child [I]. nodeValue )){
Elem. removeChild (elem_child [I]); // delete an element if it is a space
}
}
}
Del_space (document. getElementById ("list"); // delete all spaces in ol
Var list = document. getElementById ("list ");
Var list_child = list. childNodes; // obtain all the subelements of ol.
For (var I = 0; I Alert (list_child [I]. tagName );
}
Script

The following method is recommended:

The Code is as follows:

Dom


After running the code, you will find that the returned results in IE, FF, and Chrome are the same.

1. Html


2. Css


3. Dom

Script
For (var x = 0, list_li = document. getElementById ('LIST'). childNodes; x If (list_li [x]. nodeType = 1 ){
Alert (list_li [x]. tagName );
}
}
Script