JS and jquery Get the parent element, the child element, the sibling element realization method _javascript Skill

Source: Internet
Author: User
Tags prev tag name

First of all talk about the acquisition of JS, which is much more cumbersome than the jquery method, followed by the jquery method for comparison

JS method is much more troublesome than jquery, mainly because the FF browser,FF browser will be your line of exchange as the most DOM element

Native JS Gets the child element under the element with the ID test. Can be used:

Like what:

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

var a = Docuemnt.getelementbyid ("Dom"). Getelementsbytagname_r ("div"); This is no problem.

At this time a.length=3;

But now we're getting another way to get the var B = document.getelementbyidx_x ("Dom") that I mentioned in the previous chapter. ChildNodes If this alert (b.length) IE browser is OK or 3, However, the FF browser prompts 4, which is because FF also acts as an element in 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;//Gets all the child elements of the parameter element

for (Var i=0;i<elem_child.length;i++) {//traverse child element
if (Elem_child.nodename = = "#text" &&!/\s/.test (Elem_child.nodevalue)) {
Elem.removechild (Elem_child)}
}
}
}


The above function traverses the child element, when the element has a node type that is text and the node value is empty. Just to remove him.

Nodenames can get the node type of a node,/\s/the regular expression of the non-empty character in JS. Front Plus! , it indicates that it is a null character

The test () method is used to detect whether a string matches a pattern. Syntax: Regexpobject.test (String)

Returns True if string strings contain text that matches regexpobject, or false.

NodeValue represents the value in this node.

RemoveChild is the child element of the deletion element.

Here's the point!

Copy Code code as follows:

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

<script>
function dom () {
var a = document.getelementbyidx_x_x ("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>


The following is a description of the parent, child, and sibling node lookup method of jquery

Jquery.parent (expr) for the Father node, you can filter through expr, such as $ ("span"). Parent () or $ ("span"). Parent (". Class")

Jquery.parents (expr), similar to jquery.parents (expr), but is to find all ancestor elements, not limited to the parent element

Jquery.children (expr). Returns all child nodes, this method only returns the direct child node, does not return all descendants node

Jquery.contents () returns all of the following, including nodes and text. The difference between this method and children () is that, including blank text, it is also used as a

The jquery object returns, children () returns only the node

Jquery.prev (), return to the previous sibling node, not all sibling nodes

Jquery.prevall (), return all previous sibling nodes

Jquery.next (), return to the next sibling node, not all sibling nodes

Jquery.nextall (), returning all sibling nodes after

Jquery.siblings (), Return sibling node, no points before and after

Jquery.find (expr) is completely different from jquery.filter (expr). Jquery.filter () is a subset of the initial set of jquery objects that is filtered out, while Jquery.find ()

The return result will not have the contents of the initial collection, such as $ ("P"), Find ("span"), from

P elements start looking, equivalent to $ ("P span")

—————————————— 2014 1-9 ————————————————

The above is I picked from the network to solve JS and jquery to get the parent-child elements, etc., but in the solution will still have problems:

Copy Code code as follows:

<script type= "Text/javascript" >

JS Solution
var Dom=document.getelementbyid ("Dom");
To avoid problems with FF, filter the child elements
Del_space (DOM);
1. Get all the child nodes under the DOM
var a = dom.childnodes;//all child nodes;
var b = dom.parentnode;//parent node;
var e = dom.firstchild;//First child node
var f = dom.lastchild;//Last child node

For some reason, the next sibling node and the last sibling node will not be available to ...--!
var C = dom.nextsbiling.nodetype;//Next sibling node
var d = dom.previoussbiling;//Previous sibling node

jquery Solution
var a1 = $ ("#dom"). Children ();//all child nodes;
var b2 = $ ("#dom"). Parent ();//parent node;
var C3 = $ ("#dom"). Next ()//Next sibling node
var D4 = $ ("#dom"). Prev ();//previous sibling node
var e5 = $ ("#dom"). Children (": first");
var F6 = $ ("#dom"). Children (": Last");//FINAL child node

/*
alert (a.length);
for (Var i=0;i<a.length;i++) {
Alert (a[i].nodename+ ":" +a[i].nodevalue+ ":" +/\s/.test (A[i].nodevalue));
}
*/

FF will default to your line as a DOM element, so you must filter, IE does not produce similar problems
function Del_space (elem) {
var elem_child = elem.childnodes;//Gets all the child elements of the parameter element
for (var i = 0; i < elem_child.length; i++) {//traverse child element
if (Elem_child[i].nodename = = "#text") {
Elem.removechild (Elem_child[i]);
}
}
}
</script>

JS get node DOM operations

Interface

NodeType Constants

NodeType value

Note

Element

Node.element_node

1

ELEMENT node

Text

Node.text_node

3

Text node

Document

Node.document_node

9

Document

Comment

Node.comment_node

8

Text for Comments

DocumentFragment

Node.document_fragment_node

11

Document fragment

Attr

Node.attribute_node

2

Node properties

Method

Description

CreateAttribute ()

created with specified name The new attr node.

createcomment ()

To create a new comment node with the specified string. The

createelement ()

Creates a new element node with the specified tag name.

createTextNode ()

To create a new Textnode node with the specified text 。

getElementById ()

to return elemen with the specified ID attribute in the document T node.

getElementsByTagName ()

Return the name of the specified tag in the document has an element node.

Property

Describe

Attributes

If the node is an element, the attribute of the element is returned in namednodemap form.

ChildNodes

Holds the child nodes of the current node in the form of node[]. If there are no child nodes, an empty array is returned.

FirstChild

Returns the first child node of the current node in node form. Null if there are no child nodes.

LastChild

Returns the last child node of the current node in node form. Null if there are no child nodes.

NextSibling

Returns the sibling next node of the current node as node. If there is no such node, NULL is returned. Next Sibling node

NodeName

The name of the node, and the element node represents the tag name of the element.

NodeType

Represents the type of node.

ParentNode

Returns the parent node of the current node in the form of node. Null if there is no parent node.

PreviousSibling

Returns the sibling node that is close to the current node and before it. If there is no such node, NULL is returned. Previous sibling node

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.