如何在JS中获取所有的H1,H2,H3, H4

2,997 阅读1分钟

1、浏览器支持querySelectorAll

document.querySelectorAll("h1, h2, h3, h4")

如果是jQuery

$("h1, h2, h3, h4, h5, h6")

2、JQuery

var tags = [ "h1","h2","h3","h4" ];
var h_all = [];

for(var i = 0; i < tags.length; i++){
    h_all = h_all.concat(document.getElementsByTagName(tags[i]));
}

3、纯JS解决方案

for (i=1; i<=4; i++) {
    var headers = document.getElementsByTagName('h'+i);
    for (j=0; j<headers.length; j++) {
        headers[j].className = 'h—class';
    }
}
var hClass = document.getElementsByClassName('h—class');
for (i=0; i<hClass.length; i++) {
    hClass[i].innerHTML += ' '+i;
}

4、没有JQuery 和 querySelectorAll函数

function getAllH(document) {
    var arr = [];
    if (!document) return arr;
    var elementAll = document.getElementsByTagName('*');
    for (var i = 0, n = elementAll.length; i < n; i++) {
        if (/^h\d{1}$/gi.test(elementAll[i].nodeName)) {
            arr.push(elementAll[i]);
        }
    }
    return arr;
}