JavaScript Instance Tutorial: Working with space elements in a page

Source: Internet
Author: User
Tags empty

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.


Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.