<Body><Span> I'm the span tag</Span><Div> I was a div</Div><H1Id="H1" > I am the title</H1><P> I was a paragraph</P><ScriptType="Text/javascript" >Gets the sibling node of the elementfunctionSiblings(o) {Parameter o is the brother node that you want to take, and you pass that element in.var a = [];Defines an array that is used to store O's sibling elementsPreviousSibling returns the previous element at the same node tree levelvar p = o.previoussibling;while (p) {First Take o the front of the sibling element to determine whether there is a sibling element, if there is a down execution, p represents previoussiblingif (P.nodetype = = =1) {A.push (P);} p = p.previoussibling//finally assigns the previous node to P}a.reverse (); //reverse the order, so that the order of the elements is sequential //nextsibling returns the next node at the same node tree level Span class= "Hljs-keyword" >var n = o.nextsibling; //then fetch o The following sibling element while (n) {// Judging if there is no next sibling knot, n is nextsibling meaning if (n.nodetype = = 1) {//determines whether the element node is A.push (n);} n = n.nextsibling;} return a//finally return this group of elements in the order from eldest to youngest} var OH = document.getElementById ( "H1"); Console.log (Siblings ( OH)); //[span, Div, p, script]</script ></BODY> Simulating jquery's class selector with an arrayfunction getclassname (ParentId, Newclassname) {var Allclasselem = Parentid.getelementsbytagname ("*"); var allclass = []; var i=0; for (var i=0; i<allclasselem.length; i++) {if (allclasselem[i].classname = = newclassname) {Allclass.push (allclasselem[i]);}} return Allclass;} //usage: var Pelementid=document.getelementbyid (" bar "); var buttons = getclassname (Pelementid, "SCO"); //take id=" bar "under class=" SCO "element; /*** gets the collection of element objects for the specified class name *@param {Object} node Parent *@param {String} classname Specifies the class name *@return {[Object]} target object collection */function Getelementsbyclassname (node,classname) {If browser support is used directlyif (node.getelementsbyclassname) {return node.getelementsbyclassname (classname);} else {return (function Getelementsbyclass (searchClass,node) {if (node = = null) node = document; var classelements = [], els = node.getelementsbytagname ( "*"), Elslen = els.length, pattern = new RegExp ( "(^|\\s)" +searchclass +for (i = 0, j = 0; i < ElsLen; i++) {if (Pattern.test (els[i].classname)) {Classelements[j] = Els[i]; j + +;}} return classelements;}) (classname, node); }}/*** 方便的将在文档加载后运行的函数添加到window.onload中* @param {function} func 待运行函数*/function addLoadEvent(func){ var oldOnload = window.onload; //typeof 返回String类型 if(typeof window.onload != ‘function‘){ window.onload = func; }else{ window.onload = function(){ oldOnload(); func(); } }}
/*** 为指定元素结点添加新类名* element 元素结点* value 类名*/function addClass(element,value){//如果元素类名为空，直接将value赋值给相应的元素类名 if(!element.className){ element.className = value; }else{ //否则需要将类名之间用空格隔开 newClassName = element.className; //多个类名间添加空格 newClassName += ‘ ‘; newClassName += value; element.className = newClassName; }}
/*** 在目标元素结点后面插入新的元素结点* newElement 待插入的新元素结点* targetElement 目标元素结点*/function insertAfter(newElement,targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore(newElement,targetElement.nextSibling); }}
/*** 获取下一个元素结点* @param {Object} node 兄结点* @return {Object || null}下一个元素结点或未获取到*/function getNextElement(node){ var sibNode = node.nextSibling; if (sibNode.nodeType == 1) { return node; } if (sibNode.nextSibling) { //递归调用 return getNextElement(node.nextSibling); } return null;}
Native JS implements several common DOM manipulation APIs
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
