Выбор различного набора тегов из HTML DOM

Question

Как я могу получить множество различных тегов из HTML DOM с помощью jQuery/JS?

Ниже приведен пример DOM

HTML 
-- Head 
-- META 
-- TITLE 
-- H1 
-- BODY 
-- DIV 
-- DIV 
-- FORM 
-- INPUT 
-- INPUT 
-- INPUT 

то выход должен быть

HTML 
HEAD 
META 
TITLE 
H1 
BODY 
DIV 
FORM 
INPUT 

благодаря
iuq

Answer 1

Вы можете использовать map, чтобы получить имена узлов всех элементов, то filter из дубликаты:

// Get all tag names 
var tags = $("*").map(function() { 
    return this.nodeName; 
}).get() 
// Filter out the duplicates 
.filter(function(value, index, self) { 
    return self.indexOf(value) === index; 
}); 
console.log(tags); 

jsFiddle

Вы можете заменить карту JQuery в с in-built one в сочетании с querySelectorAll, если вы не хотите JQuery вообще:

var tags = Array.prototype.map.call(document.querySelectorAll("*"), function(e) { 
    return e.nodeName; 
}).filter(function(value, index, self) { 
    return self.indexOf(value) === index; 
}); 
console.log(tags); 

jsFiddle

Answer 2

В Vanilla JS и как функция :

function getDistinctTags() { 
    var els = Array.prototype.slice.call(document.querySelectorAll('*')); 
    return els.reduce(function (result, el) { 
     if (result.indexOf(el.tagName) === -1) { 
      result.push(el.tagName); 
     } 
     return result; 
    }, []); 
}