遍历html中所有DOM节点,并计算DOM节点数

这是一个我在面试中遇到的问题,之前从来没有想过这个问题,所以一被问就卡住了,当然结果也就是凉凉了….所以下来查了一下这个问题,并做以记录警戒自己

// 定义一个空数组,存放或者取出制表位'\t'
var blanks = [];
// 遍历的函数主体
function getChildren(parent){

    // 按着HTML里的缩进把遍历的元素打印出来
    // parent.nodeType === 1:节点是一个元素节点
    // parent.nodeType === 2:节点是一个属性节点
    console.log(blanks.join('') + parent.nodeType === 1 ? parent.nodeName : parent.nodeValue);

    // 当children不为0时进入条件判断
    if(parent.children.length > 0){
        blanks.push("\t");

        // 递归遍历(深度遍历元素)
        for(var i = 0, len = parent.children.length; i < len; i++){
            getChildren(parent.children[i]);
        }
        blanks.pop("\t");
    }

// 调用函数主体
getChildren(document);

顺便查了另外一个问题,获取页面中所有节点元素并存到数组中

var tags = document.getElementsByTagName('*');
var tagsArr = [];
function countTag(){
    for (var i = 0; i < tags.length; i++) {
        tagsArr.push((tags[i].tagName).toLowerCase());
    }
    // 获取到页面的所有标签
    console.log(tagsArr);
    //定义一个数组用于存放相同的元素
    var temp = [];
    //定义一个空数组用于存放每一个标签;
    var tag =[];
    for (var i = 0; i < tagsArr.length; i++) {
        for (var j = i+1; j < tagsArr.length+1; j++) {
            if (tagsArr[i] == tagsArr[j]) {
                temp.push(tagsArr[j]);
                tagsArr.splice(j,1);
                j--;
            }
            if (j == tagsArr.length -i) {
                temp.push(tagsArr[i]);
                tagsArr.splice(i,1);
                i--;
                tag.push(temp);
                temp = [];
            }
        }
    }
    return tag;
}
console.log(countTag());

猜你喜欢

转载自blog.csdn.net/maid_04/article/details/80002258