Implementation method of obtaining parent elements, child elements, and sibling elements with js and jquery

Home

Web Front-end

JS Tutorial

Implementation method of obtaining parent elements, child elements, and sibling elements with js and jquery_javascript skills

May 16, 2016 pm 05:04 PM

jquery child element parent element

Let’s first talk about the JS acquisition method, which is much more troublesome than the JQUERY method. Later, we will use the JQUERY method for comparison

The JS method is much more troublesome than JQUERY, mainly because of the FF browser. FF browser will treat your line breaks as DOM elements

Native JS gets the child elements under the element with ID test. Available:

For example:

<div id="dom">
<div></div>
🎜></div>

var a = docuemnt.getElementById("dom").getElementsByTagName_r("div"); This is no problem

At this time a.length=3;

But now we have another way to get it, which is the var b = document.getElementByIdx_x("dom").childNodes I mentioned in the last chapter; if this way alert(b.length) is no problem on the IE browser, it is still 3, but On the FF browser, the prompt is 4. This is because FF treats line breaks as an element.

So we have to deal with those attributes in order to use JS. Processing ideas is as simple as traversing these elements. Delete all elements whose type is space and text. The processing function is like this

Copy code The code is as follows:

function del_space(elem){

var elem_child = elem.childNodes;//Get all child elements of the parameter element

for(var i=0;i<elem_child.length;i ){ //Traverse child elements

} The node value is empty. Just delete him.

nodeNames can get the node type of a node, /s/ is the regular expression of non-empty characters in JS. Add in front! , it means the empty character

The

test() method is used to check whether a string matches a certain pattern. The syntax is: RegExpObject.test(string)

Returns true if the string string contains text matching RegExpObject, otherwise returns false.

nodeValue means getting the value in this node.

removeChild deletes the child elements of the element.

The following is the key point!

Copy code

The code is as follows:

<div id = "dom"> <script> function dom(){ var a = document.getElementByIdx_x_x("dom"); del_space(a); Call the function that cleans spaces var b = a .childNodes; Get all the child nodes of a;

var c = a.parentNode; Get 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; Get the first child node of a
var g = a.lastChild; Get the last child node of a
}
</script>

The following introduces JQUERY’s method of finding parent, child, and sibling nodes

jQuery.parent(expr) To find the parent node, you can pass in expr for filtering, such as $("span").parent() or $("span").parent(".class")

jQuery.parents(expr), similar to jQuery.parents(expr), but searches all ancestor elements, not limited to parent elements

jQuery.children(expr). Returns all child nodes. This method will only return direct child nodes and will not return all descendant nodes

jQuery.contents(), returns all content below, including nodes and text. The difference between this method and children() is that including blank text will also be treated as a

jQuery object is returned, children() will only return nodes

jQuery.prev(), returns the previous sibling node, not all sibling nodes

jQuery.prevAll(), returns all previous sibling nodes

jQuery.next(), returns the next sibling node, not all sibling nodes

jQuery.nextAll(), returns all subsequent sibling nodes

jQuery.siblings(), returns sibling nodes, regardless of front or rear

jQuery.find(expr) is completely different from jQuery.filter(expr). jQuery.filter() filters out a part of the initial collection of jQuery objects, while jQuery.find()

The return result of

will not contain the content in the initial collection, such as $("p"), find("span"), which is from

Start looking for the p element, which is equivalent to $("p span")

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

The above is the method I picked from the Internet to solve js and jquery to obtain parent-child elements, etc., but there will still be problems when solving it:

Copy code The code is as follows:

<script type="text/javascript">

 //JS solution
 var dom=document. getElementById("dom");
 //In order to avoid problems with ff, the child elements are filtered
 del_space(dom);
 //1. Get all child nodes under dom
 var a = dom.childNodes;//All child nodes;
 var b = dom.parentNode;//Parent node;
 var e = dom.firstChild;//The first child node
 var f = dom.lastChild; //The last child node 

 //For some reason, the next sibling node and the previous sibling node cannot be obtained after future research...--!
 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");//The first child node
 var f6 = $("#dom").children(":last");//The last 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));
 }
 */

 //ffThe following will treat your newline as a dom element by default, so it must Perform filtering and similar problems will not occur under IE 
 function del_space(elem){
 var elem_child = elem.childNodes;//Get all child elements of the parameter element 
 for ( var i = 0; i < elem_child.length; i ) { //Traverse child elements 
 if (elem_child[i].nodeName == "#text") {
 elem.removeChild(elem_child[i]);
 } 
 }
 }
 </script>

js获取节点 dom操作

接口	nodeType常量	nodeType值	备注
Element	Node.ELEMENT_NODE	1	元素节点
Text	Node.TEXT_NODE	3	文本节点
Document	Node.DOCUMENT_NODE	9	document
Comment	Node.COMMENT_NODE	8	注释的文本
DocumentFragment	Node.DOCUMENT_FRAGMENT_NODE	11	document片断
Attr	Node.ATTRIBUTE_NODE	2	节点属性

接口

方法	描述
createAttribute()	用指定的名字创建新的Attr节点。
createComment()	用指定的字符串创建新的Comment节点。
createElement()	用指定的标记名创建新的Element节点。
createTextNode()	用指定的文本创建新的TextNode节点。
getElementById()	返回文档中具有指定id属性的Element节点。
getElementsByTagName()	返回文档中具有指定标记名的所有Element节点。

属性	描述
attributes	如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。
childNodes	以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组。
firstChild	以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null。
lastChild	以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null。
nextSibling	以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null。下一个兄弟节点
nodeName	节点的名字，Element节点则代表Element的标记名称。
nodeType	代表节点的类型。
parentNode	以Node的形式返回当前节点的父节点。如果没有父节点，则为null。
previousSibling	以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null。上一个兄弟节点

nodeType常量

nodeType值

备注

Element

Node.ELEMENT_NODE

元素节点

Text

Node.TEXT_NODE

文本节点

Document

Node.DOCUMENT_NODE

document

Comment

Node.COMMENT_NODE

注释的文本

DocumentFragment

Node.DOCUMENT_FRAGMENT_NODE

document片断

Attr

Node.ATTRIBUTE_NODE

节点属性

方法	描述
createAttribute()	用指定的名字创建新的Attr节点。
createComment()	用指定的字符串创建新的Comment节点。
createElement()	用指定的标记名创建新的Element节点。
createTextNode()	用指定的文本创建新的TextNode节点。
getElementById()	返回文档中具有指定id属性的Element节点。
getElementsByTagName()	返回文档中具有指定标记名的所有Element节点。

属性	描述
attributes	如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。
childNodes	以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组。
firstChild	以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null。
lastChild	以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null。
nextSibling	以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null。下一个兄弟节点
nodeName	节点的名字，Element节点则代表Element的标记名称。
nodeType	代表节点的类型。
parentNode	以Node的形式返回当前节点的父节点。如果没有父节点，则为null。
previousSibling	以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null。上一个兄弟节点

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn