| Article Introduction: today in chapter Two, go on to get the DOM elements in the page. We all know that it is convenient to get the sibling elements of an element, the parent element, the child element, and so on in the JQ. 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 of exchange as a DOM element |
Today in chapter two, go on to get the DOM elements in the page. We all know that it is convenient to get the sibling elements of an element, the parent element, the child element, and so on in the JQ. 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 of exchange as a DOM element。 For example
<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, that's the way it is.
var a = document.getElementById ("Dom"). getElementsByTagName ("div"); that's fine. OK
alert (a.length)The hint will be
2, but now we're going to get another way of getting it, which I mentioned in the last chapter
var B = document.getElementById ("Dom"). ChildNodes; if this
alert (b.length)Is the Internet Explorer okay or
2, but the FF browser prompts you to
4, which is because FF also acts as an element in a 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
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;
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 remove The Child is also a method to delete one of the elements of the outer element.
This only needs to be called before these properties are called. Clean up the blanks and you'll be relieved.
<div id = "Dom" >
<div></div>
<div></div>
</div>
<script>
function dom () {
var a = document.getElementById ("Dom");
Del_space (a);
call a function that clears spaces
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; get the next sibling node of a
var e = a.previoussbiling; get the previous sibling node of a
var f = a.firstchild; Gets the first child node of a
var g = a.lastchild; get 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.
