遍曆文檔內容，得到HTML層級結構

標籤：lis   深度優先   深度優先遍曆   ntc   item   訪問   use   產生   span   

嗯。。沒發現有寫好的，那就自己寫一個，剛好自己今天看了DOM操作的知識點，鞏固一下。

HTML可以表示為一個階層，產生的DOM Tree 就是類似與資料結構中的樹一樣，每個DOM節點都有它的childNodes（動態類數組對象）, parentNode（指向父節點），nextSibling（下一個兄弟節點），previousSibling（上一個兄弟節點），還有輔助類的firstChild和lastChild。

因為不同瀏覽器中對節點的遍曆處理的不一樣，比如：

<ul id = "mylist">        <li>Item 1</li>        <li>Item 2</li>        <li>Item 3</li></ul>

如果是IE解析，ul 元素會有3個子節點，而其他瀏覽器，ul 元素有七個子節點，包括3個 li 元素和 4個文本節點（<li>元素之間的空格），所以如果只想訪問當前節點的元素子節點，在用childNodes遍曆的時候需要先判斷一下子節點的nodeType，如果等於1（element node），再執行想要的操作。

H5對DOM操作也做了響應的擴充， 提供firstElementChild, lastElementChild, previousElementChild, nextElementChild 這樣的更方便的元素遍曆方式。

所以這道題就可以用樹的深度優先遍曆DOM Tree，來列印出HTML的層級結構。

代碼如下：

//用document.write輸出的時候：var space = ‘‘;        function renderD(node, space) {            if(node === null) return;            var child = node.firstElementChild;            space += ‘&nbsp;&nbsp;&nbsp;&nbsp;‘;            while(child != null && child.nodeName.toLowerCase() != ‘br‘) {                document.write(space + child.nodeName + ‘<br>‘);                renderD(child, space);                child = child.nextElementSibling;            }        }        renderD(document, space);

//用console輸出的時候var space = ‘‘;        function renderD(node, space) {            if(node === null) return;            var child = node.firstElementChild;            space += ‘    ‘;            while(child != null) {                  console.log(space + child.nodeName + ‘\n‘);                renderD(child, space);                child = child.nextElementSibling;            }        }renderD(document, space);

註：文檔的根節點是document

在JS紅寶書中289頁，我覺得它的元素遍曆不對。。 那個while迴圈的條件完全就忽視掉了當前節點的最後一個子項目啊囧

遍曆文檔內容，得到HTML層級結構