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!
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> Dom </title>
</Head>
<Body>
<H2> after running the code, you will find that the Code pops up in IE. 3. 7. <Ol id = "list">
<Li> html </li>
<Li> css </li>
<Li> dom </li>
</Ol>
<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 <list_child.length; I ++ ){
Alert (list_child [I]. tagName );
}
</Script>
</Body>
</Html>
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.
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> Dom </title>
</Head>
<Body>
<H2> after running the code, you will find that the results returned in IE, FF, and Chrome are the same. <Ol id = "list">
<Li> html </li>
<Li> css </li>
<Li> dom </li>
</Ol>
<Script>
Function Del_space (elem) {// function used to filter Spaces
Var elem_child = elem. childNodes; // obtain all child elements
For (var I = 0; I <elem_child.length; 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 <list_child.length; I ++ ){
Alert (list_child [I]. tagName );
}
</Script>
</Body>
</Html>
The following method is recommended:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> Dom </title>
</Head>
<Body>
<H2> after running the code, you will find that the results returned in IE, FF, and Chrome are the same. <Ol id = "list">
<Li> html </li>
<Li> css </li>
<Li> dom </li>
</Ol>
<Script>
For (var x = 0, list_li = document. getElementById ('LIST'). childNodes; x <list_li.length; x ++ ){
If (list_li [x]. nodeType = 1 ){
Alert (list_li [x]. tagName );
}
}
</Script>
</Body>
</Html>