標籤:空格 動態 children ack class dom move previous str
jQuery提供的方法
上來就把jQuery提供的方法擺在這裡是不是有點不好呀,不過,我們從jQuery的方法名稱上就能知道這些方法是幹嘛的了。
parent(selector) |
尋找父元素,可傳入selector進行過濾(下同) |
parents(selector) |
尋找所有的祖先節點 |
children(selector) |
返回所有的子節點,不過該方法只會返回直接的子節點,不會返回所有的子孫節點 |
prev() |
返回該節點的上一個兄弟節點 |
prevAll() |
返回該節點之前所有的節點 |
next() |
返回該節點的下一個兄弟節點 |
nextAll() |
返回該節點之後所有的節點 |
siblings() |
返回該節點所有的兄弟節點,不分前後 |
find(selector) |
返回該節點所有的子孫節點 |
看完所有的方法之後,我們可以發現:children()只能擷取直接的子節點;而find能擷取所有的子孫節點,當然也包括直接的子節點。
js提供的方法
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 建立節點
// 建立元素,只是建立出來並未添加到html中,需要與appendChild 配合使用 var elem = document.createElement(‘p‘); elem.id = ‘test‘; elem.style = ‘color: red‘; elem.innerHTML = ‘我是新建立的節點‘; document.body.appendChild(elem); // 建立文本節點 createTextNode var txt = document.createTextNode(‘我是文本節點‘); document.body.appendChild(txt); // 複製節點(需要接受一個參數來表示是否複製元素) var form = document.getElementById(‘test‘); var clone = form.cloneNode(true); clone.id = ‘test2‘; document.body.appendChild(clone); //文檔片段的方式(提升效能) (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+‘個子節點‘; fragment.appendChild(li); } ul.appendChild(fragment); console.log(‘耗時:‘+(Date.now()-start)+‘毫秒‘); // 63毫秒 })();// 3 節點修改API //節點修改APi有兩個特點 // 1 不論新增還是替換節點,如果原本就在頁面上,就會被替換 // 2 修改之後節點本身綁定的事件不會小時 // 1 appendChild () // 用法是: parent.appendChild(child) // 會將child節點添加到parent裡的最後面,如果子節點原本就存在,會移除原節點,添加新節點 // 到最後,但是事件會保留 // 2 insertBefore() // 用法是 parent.insertBefore(newNode,refNode); // refNode 是必須傳的 不傳會報錯 // 如果 refNode 是undefined 和null 就會將新節點傳入到parent節點的最後 // 3 removeChild() // 用法是:parent.removeChild(child) // 如果刪除的不是父元素的子節點會報錯 // var deleted = parent.removeChild(child) // deleted 可以繼續引用節點 ,被刪除節點依然存在與記憶體中 // 4 replaceChild() // 用法是:parent.replaceChild(newChild, oldChild);// 4 節點的關係APi // 1 父關係API // parentNode 父節點 // parentElement父元素 // 2 子關係API // children 子項目 // childNodes 子節點 // firstElementChild 第一個子項目 // firstChild 第一個子節點 // lastElementChild 最後一個子項目 // lastChild 最後一個子節點 // 3 兄弟關係的API // previousSibling 節點的上一個兄弟節點 // previousElementSibling 節點的上一個兄弟元素(ie9以下不支援) // nextSibling 節點的下一個兄弟節點 // nextElementSibling 節點的下一個兄弟元素(ie9以下不支援)// 5 節點屬性API // setAttribute(name,value) 給元素設定屬性 // getAttribute(name) 擷取元素屬性// 6 直接修改元素的樣式 elem.style.color = ‘red‘; elem.style.setProperty(‘font-size‘, ‘16px‘); elem.style.removeProperty(‘color‘);// 7 動態添加樣式 var style = document.createElement(‘style‘); style.innerHTML = ‘body{color:red} #top:hover{background-color: red;color: white;}‘; document.head.appendChild(style);// 8 window.getComputedStyle// 用法是:var style = window.getComputedStyle(element[, pseudoElt]);// element:目標元素的DOM對象 // pseudoElt:指明要匹配的虛擬元素,對於普通元素必須指定為null(或省略)
jquery js 兄弟父元素的擷取