JavaScript application Analysis for DOM (ii) _dom

In fact in the native also JS also has these attributes. It's almost the same as JQ but less than JQ. But it's a little more troublesome to use than JQ. Mainly because FF browser, because FF will take your line as a DOM element. For example

Copy Code code as follows:

<div id = "Dom" >
<div></div>
<div></div>
</div>

I use native JS to get the child element under the element with the ID dom. In my first chapter, the method is var a = document.getElementById ("Dom"). getElementsByTagName ("div"); that's fine. The alert (A.LENGTH) hint will be 2, but now we can get a different approach to the var B = document.getElementById ("Dom") that I mentioned in the previous chapter. ChildNodes; If this alert (b.length) IE browser is no problem or 2, but in the FF browser will be prompted is 4, this is because FF also as an element of the newline.
So we have to deal with those attributes that can be used with JS. The process of thinking is very simple to traverse these elements. The element type is a space and the text is deleted. The processing function is like this

Copy Code code 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;
Throw the elem elements of the incoming element into the elem_child;

Copy Code code 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 inside these elements is text and the node value of the text type node is empty. Just delete it.

(NodeName is a property in JS, get this node type,/\s/this is not empty characters in JS normal expression.) Adding an exclamation point to the front indicates that it is a null character. Test is a method of JS, which is to compare the contents of it and the outside things. NodeValue means to get the value in this node removechild is also a way to delete a child element of the outer element.

This only needs to be called before these properties are called. Clean up the blanks and you'll be relieved.

Copy Code code as follows:

<div id = "Dom" >
<div></div>
<div></div>
</div>

<script>
function dom () {
var a = document.getElementById ("Dom");
Del_space (a); Call a function that clears the space
var B = a.childnodes; gets all the child nodes of A;
var c = A.parentnode; Gets the parent node of A;
var d = a.nextsbiling; Gets the next sibling node of a
var e = a.previoussbiling; Gets the previous sibling node of a
var f = a.firstchild; Gets the first child node of a
var g = A.lastchild; Gets the last child node of a

}
</script>

(another.) var B = a.childnodes; gets an array too; So for example I want to use the first node is childnodes[0]; I want to use the second node is childnodes[1];

It's over here to get the DOM. The next chapter teaches you how to manipulate DOM elements.