The acquisition of the jquery JS sibling parent Element

Methods provided by jquery

It's not a bad idea to come up with the methods provided by jquery, but we can tell from the jquery method name how these methods are done.

Parent (selector)	Find parent elements that can be passed in selector for filtering (same as below)
Parents (selector)	Find all ancestor nodes
Children (selector)	Returns all child nodes, but the method returns only the immediate child nodes and does not return all descendant nodes
Prev ()	Returns the previous sibling node of the node
Prevall ()	Returns all the nodes before the node
Next ()	Returns the next sibling node of the node
Nextall ()	Returns all nodes after the node
Siblings ()	Returns all sibling nodes of the node, no points
Find (selector)	Returns all descendant nodes of the node

After reading all the methods, we can find that: children () can only get direct child nodes, and find can get all the descendants nodes, of course, including the direct child nodes.

JS provides the method

1 获取元素节点    // 通过id的方式( 通过id查找元素，大小写敏感，如果有多个id只找到第一个)    document.getElementById(‘div1‘);    // 通过类名查找元素，多个类名用空格分隔,得到一个HTMLCollection(一个元素集合，有length属性，可以通过索引号访问里面的某一个元素)    var cls = document.getElementsByClassName(‘a b‘);    console.log(cls);    // 通过标签名查找元素 返回一个HTMLCollection    document.getElementsByTagName(‘div‘);    // 通过name属性查找，返回一个NodeList(一个节点集合，有length属性，可以通过索引号访问)   var nm =  document.getElementsByName(‘c‘);    console.log(nm);    // 获取所有form标签(得到一个HTMLCollection集合）    var form = document.forms;  // html5新加标签（ie8+）    // document.querySelector(); //  返回单个node，如果有多个匹配元素就返回第一个    // document.querySelectorAll(); // 返回一个nodeList集合

2 Creating nodes

    Create the element, just create it and not add it to HTML, need to use var Elem = document.createelement (' P ') with appendchild;    elem.id = ' Test ';    Elem.style = ' color:red ';    elem.innerhtml = ' I am the newly created node ';    Document.body.appendChild (Elem);    Create a text node createtextnode var txt = document.createtextnode (' I am a text node ');    Document.body.appendChild (TXT);    Clone a node (you need to accept a parameter to indicate whether the element is copied) var form = document.getElementById (' test ');    var clone = Form.clonenode (true);    clone.id = ' test2 ';    Document.body.appendChild (clone);        How the document is fragmented (improves performance) (function () {var start = Date.now ();        var str = ', Li;        var ul = document.getElementById (' ul ');        var fragment = Document.createdocumentfragment ();            for (var i=0; i<10000; i++) {li = document.createelement (' li ');            li.textcontent = ' +i+ ' sub-node ';        Fragment.appendchild (LI);        } ul.appendchild (fragment); Console.log (' time consuming: ' + (Date.now ()-start) + ' MS '); 63 milliseconds});//3 node Modify API//Node Modify API have two features//1 regardless of the new or replacement node, if it is on the page, it will be replaced//2 modified after the node itself bound events will not H//1 appendchild ()//usage is: Parent.appendchild (c Hild)//The child node will be added to the last face of the parent, if it exists, it will remove the original node, add a new node//to the last, but the event will remain//2 insertbefore ()//usage is Parent.inse    Rtbefore (Newnode,refnode); Refnode is a must-pass error//If Refnode is undefined and null the new node will be passed to the parent node last//3 removechild ()//usage is: Parent.remov    Echild (Child)//If you delete an error that is not a parent element, the sub-node will be the bug//var deleted = Parent.removechild (children)//deleted can continue to reference the node, the deleted node still exists with the in-memory  4 replacechild ()//Usage: Parent.replacechild (newChild, oldchild);//4-node Relationship API//1 Parent-Relationship API//ParentNode  Parent node//parentelement Parent element//2 child Relationship API//Children child element//ChildNodes child node//Firstelementchild        First child element//FirstChild first child node//Lastelementchild Last child element//LastChild The last child node//3 sibling Relationship API The last sibling element of the previous sibling node//previouselementsibling node of the previoussibling node (IE9 not supported)//nextSibling node next brotherBrother Node//nextelementsibling node next sibling element (IE9 not supported below)//5 node Properties API//SetAttribute (Name,value) set properties for element//Getattribut    E (name) gets the element attributes//6 directly modifies the style of the element elem.style.color = ' red ';    Elem.style.setProperty (' font-size ', ' 16px ');    Elem.style.removeProperty (' color ');//7 dynamic add style var style = document.createelement (' style ');    style.innerhtml = ' body{color:red} #top: Hover{background-color:red;color:white;} '; Document.head.appendChild (style);//8 window.getcomputedstyle//usage is: var style = window.getComputedStyle (element[, Pseudoelt]);//element: DOM object of the target element//Pseudoelt: Indicates the pseudo-element to match, must be specified as null (or omitted) for normal elements

jquery js Sibling parent element Get