如何使用屬性名稱按順序 console.log 整個 HTML DOM 樹

Question

所以我正在嘗試創建一個函數，它將對 HTML 頁面的整個 DOM 樹進行 console.log。 它應該按照它們出現的順序輸出每個 HTML 元素的標簽名稱 - 兄弟姐妹之前的孩子 + 屬性名稱。

我有這段工作代碼：

"use strict";

document.addEventListener("DOMContentLoaded", traverse);

function traverse() {
    let elm = document.documentElement;
    displayInfo(elm);
};

function displayInfo(elm){
    //console.log(elm) 
    /* if (elm.childElementCount>0) {
        let children = Array.from(elm.children);
        console.log(children);
        children.forEach( displayInfo );
    }; */
    if (elm.hasAttributes) {
        //console.log(elm.attributes[0]);
    }; 
    var c = elm.childNodes;
    let i;
    for (i = 0; i < c.length; i++) {
        console.log(c[i].nodeName);
        if (c[i].childElementCount>0) {
            //console.log(c[i].childElementCount);
            if (c[i].hasAttributes) {
                //console.log(c[i].attributes[0]);
            };
            let cc = c[i].children;
            let ii;
            for (ii=0; ii < cc.length; ii++) {
                console.log(cc[ii].nodeName);
                if (cc[ii].hasAttributes) {
                    //console.log(cc[ii].attributes[0]);
                };
                if (cc[ii].childElementCount>0) {
                    //console.log(cc[ii].childElementCount);
                    let ccc = cc[ii].children;
                    let iii;
                    for (iii=0; iii < ccc.length; iii++) {
                        console.log(ccc[iii].nodeName);
                        if (ccc[iii].hasAttributes) {
                            //console.log(ccc[iii].attributes[0]);
                        };
                        if (ccc[iii].childElementCount>0) {
                            //console.log(ccc[iii].childElementCount);
                            let cccc = ccc[iii].children;
                            let iiii;
                            for (iiii=0; iiii < cccc.length; iiii++) {
                                console.log(cccc[iiii].nodeName);
                                if (cccc[iiii].hasAttributes) {
                                    //console.log(cccc[iiii].attributes[0]);
                                };
                                if (cccc[iiii].childElementCount>0) {
                                    console.log(cccc[iiii].childElementCount)
                                }
                            }
                        }
                    }
                }
            }
        }
    }
 };

問題是，我可怕地重復了自己，而且我正在手動設置它將遍歷的“深度”。 有沒有辦法只聲明一個遍歷的函數？

PS：我知道這看起來很可怕，我只是確保該功能可以一直“工作”。

Answer 1

有一個專門用於此的 API，它比您自己嘗試構建的任何東西都強大： TreeWalker 。

 var walker = document.createTreeWalker( document.documentElement, NodeFilter.SHOW_ELEMENT // only elements ); while (walker.nextNode()) { let current = walker.currentNode; console.log( current.tagName, [...current.attributes].map(({value,name}) => `${name}=${value}`).join() ); }

 <article> <div id="container">container content <span>one span</span> <span class="nest1">nest1 span<span class="nest2">nest2 span</span></span> </div> </article>

Answer 2

只是想在文檔對象元素名稱 id 和包含在一個整齊數組中的類中添加所有節點的簡單日志。

console.log(document.getElementsByTagName('*'));

Answer 3

請注意， hasAttributes是一個函數，而不是一個屬性。 element.hasAttributes將始終為true 。

使用遞歸，像這樣：

 function displayInfo(node) { console.log(node.nodeName); if (node.nodeType === 3) { console.log('Text node: ' + node.textContent); return; } if (node.hasAttributes()) { [...node.attributes].forEach(({ name, value }) => console.log(`${name}=${value}`)); } node.childNodes.forEach(displayInfo); } displayInfo(document.documentElement);

 <article> <div id="container">container content <span>one span</span> <span class="nest1">nest1 span<span class="nest2">nest2 span</span></span> </div> </article>

我提到的continue快捷方式看起來像這樣，首先：

for (i = 0; i < c.length; i++) {
  console.log(c[i].nodeName);
  if (c[i].childElementCount === 0) continue;
  //console.log(c[i].childElementCount);
  if (c[i].hasAttributes) {
    //console.log(c[i].attributes[0]);
  };
  let cc = c[i].children;

盡可能避免縮進——你會讓你的代碼更具可讀性。