遍歷DOM元素

時間 2019-11-09

標籤遍歷 dom 元素欄目 HTML 简体版

原文原文鏈接

前置知識

快速獲取html元素方法：html

document.documentElement

// js高級程序設計一書中有段這樣的代碼：
let html = document.documentElement; //取得對<html>的引用
html === document.childNodes[0]; //true
html === document.firstChild; //true

// 實測新版Chrome瀏覽器（版本 75.0.3770.100 64位）
html === document.childNodes[1]; // true
document.childNodes[0] === document.firstChild // true
document.doctype === document.childNodes[0]; // true

複製代碼

快速獲取body元素方法：node

document.body
複製代碼

ParentNode.children 和 Node.childNodes 區別瀏覽器

node.children：返回一個 Node 的子元素的集合，類型是 HTMLCollection（即html元素的集合）。
node.childNodes：返回一個 node 子節點的集合，類型是 NodeList，該集合包含有更多的信息，好比元素與元素之間的換行符，頁面中的註釋等。

若是咱們想遍歷元素的話，選擇 ParentNode.children 應該是會更方便一些以上兩個屬性返回的元素集合都是實時的，所以不用擔憂因爲js腳本修改dom致使須要從新獲取元素信息。dom

代碼

function ergodicDom(elem) {
    let domTreeObj = {}; //使用對象來展示dom樹
    !function innerFun(elem, obj, i) {
        if (elem.nodeName === 'SCRIPT' || elem.nodeName === 'STYLE') {
            return;
        }
        let name = i ? elem.nodeName + i : elem.nodeName;
        obj[name] = {};
        if (elem.children.length > 0) {
            [].forEach.call(elem.children, (element, i)=>{
                innerFun(element, obj[name], i)
            })
        }

    }(elem, domTreeObj)
    return domTreeObj;
}
複製代碼

隨手寫的，發現用了 ParentNode.children 的話就不須要判斷 nodeType 了，有不足之處歡迎補充ui

1. jQuery——遍歷DOM元素的後代元素
2. 遍歷List刪除元素
3. NSMutableArray遍歷刪除元素
4. javascript遍歷子元素
5. js遍歷子元素
6. 子元素的遍歷
7. jquery使用、遍歷元素
8. jquery遍歷 DOM樹遍歷
9. 遍歷DOM元素的children屬性遇到的坑
10. 利用DOM來遍歷所有元素（children和childNodes的區別）
更多相關文章...
• XML DOM 遍歷節點樹 - XML DOM 教程
• RSS 歷史 - RSS 教程
• C# 中 foreach 遍歷的用法
• 算法總結-歸併排序

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。