通過給定元素childNode中的標記獲取元素

獲取給定節點的直接子節點的所有[tag]節點列表的最簡單方法是什麼，而不使用查詢？通過給定元素childNode中的標記獲取元素

2014-04-17 AlexTR

你可以請詳細說明「'不使用查詢」嗎？ jQuery的？或者是其他東西？ – Teemu

@Teemu - 假設OP意味着普通的香草JS。 – j08691

@Teemu我的意思是既不使用邊庫作爲jQuery，也不querySelector（）函數 – AlexTR

隨着迭代，你可以檢查這樣的元素的標籤名稱：

var child = yourElement.children; 
var childrensSpan = []; 

for(var i = 0; i < child.length; i++){ 
    if(child[i].tagName === "SPAN") childrensSpan.push(child[i]) 
} 

console.log(childrensSpan);

小提琴：http://jsfiddle.net/Paesk/

當然，yourElement是你的父元素和"SPAN"是您正在搜索的標籤對於。

來源

2014-04-17 17:43:25

謝謝，所以即時通訊假設這項工作沒有方便的內置方法？ – AlexTR

是否有任何區別，如果你只是調用child.getElementsByTagName（「span」）而不是組裝數組 – dragon66

不是我知道的，除了'querySelectorAll'，但你明確表示你不想使用它。有一種方法可以搜索'getElementsByTagName'然後檢查他們的父項，但是我認爲這種方法是帶標籤名稱的最快的 –

在現代瀏覽器...

var divs = [].filter.call(node.children, function(el) { 
    return el.nodeName === "DIV"; 
});

的Array.prototype.filter方法可以在舊版瀏覽器進行修補。

如果你要爲不同類型的元素經常這樣做，你可能想通過創建過濾器回調函數縮短它。

function byTag(name) { 
    name = name.toUpperCase(); 
    return function(el) { 
     return el.nodeName === name; 
    } 
}

然後做到這一點：

var divs = [].filter.call(node.children, byTag("div"));

來源

2014-04-17 17:46:41

真棒，謝謝！ – AlexTR

基於答案在這裏我做了兩個功能和包裹他們入HTMLElement.prototype 這導致使用divChildren = node.childrenByTag("div");

後來我做的能力在這裏提供的兩種解決方案之間的一些基準比較，querySelector(),getElementsByTagName()，正則表達式和XPath

如果任何人有興趣，你可以在這裏找到它（功能+基準）：http://jsfiddle.net/2CPwL/

來源

2014-04-17 22:10:51 AlexTR

通過給定元素childNode中的標記獲取元素

回答

相關問題