科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - How to loop through HTML DOM? And how to get events,style and attribs of element (with example) - Stack Overflow

    javascript - How to loop through HTML DOM? And how to get events,style and attribs of element (with example) - Stack Overflow

    programmeradmin1浏览0评论

    edit 2 (solution)

    Javascript

    for a "possible" javascript way see @sabof answer below: ..........

    JQUERY

    Events: I quickly made an example function getEvents(), but it seems to work :)

    Attributes:

    I found this somewhere on the internet, to return all attributes by using .attr()

    Also I have just discovered about debugging in the browser and thus now know how to view an object. Might anyone wonder how: open your console (f12 atleast in FireFox) and type for example $("body") in the console mand line (all the way at the bottom), click on the returned object and look at the right of the console :P

     //extending the attr function to return all attrs
(function($) {
      // duck-punching to make attr() return a map
      var _old = $.fn.attr;
      $.fn.attr = function() {
        var a, aLength, attributes, map;
        if (this[0] && arguments.length === 0) {
                map = {};
                attributes = this[0].attributes;
                aLength = attributes.length;
                for (a = 0; a < aLength; a++) {
                        map[attributes[a].name.toLowerCase()] = attributes[a].value;
                }
                return map;
        } else {
                return _old.apply(this, arguments);
        }
}
}(jQuery));

    Thanks to the great example of @user3331198 I got the following (togheter with the code block above).

    var href = "/";
var text = "Google";

$( document ).ready(function() {    
   $("body").css({"background-color": "#000fff"})
       .append( $("<div>", {class: 'foo'}))
            .append($("<a>", { id: "anID", href: href, text: text }))
                     .append($("<span>").text("Foo").on("click", function(){ alert('!')}));
    loopDOM($("body"));   
 });




function loopDOM(obj,parentID=-1,thisID=0) {
   saveToDB({ 
     id: thisID,
     parent: parentID,
     tag: obj.prop("tagName"),
     style: obj.attr("style"),
     events: getEvents(obj),
     attribs: obj.attr()    
    });

    obj.children().each(function() {
       loopDOM($(this),thisID,++thisID)
    });
} 

function getEvents(obj) {   
    aEvents=[];
    if (typeof $._data( obj[0], 'events' )==="object") {
        $.each($._data( obj[0], 'events' ), function(i, event) {
           type=JSON.stringify(i);  
           aEvents[type]=[];
           $.each(event, function(j, h) {
                aEvents[type][aEvents[type].length]=h.handler;
            });
        });     
    }
    return aEvents;
}
function saveToDB(pass) {
    alert("id:"+pass["id"]+"\nparent:"+pass["parent"]+"\ntag:"+pass["tag"]+"\nstyle:"+pass["style"]);
    alert ("has the following attributes");
    for (var x in pass["attribs"])
         alert("attrib: "+x+" "+pass["attribs"][x]);
     alert ("has the following events");
    for (var x in pass["events"])
        alert("event: "+x+" "+pass["events"][x]);
 }

    ..........................................................................

    Orginal post

    I am toying around in my spare time to get a bit back into shape with coding.

    For example I am building this DOM (for the practice with jQuery instead of plain HTML)

    $(document).ready(function() {  
   $("body").css({"background-color": "#000fff"})
       .append( $("<div>", { class: "foo" })
            .append($("<a>", { href: href, text: text })
                .on("click", function(){ alert('!')}))
                   .append($("<span>").text("Foo")));
});

    Now let's say I want to save the DOM in a DB table like this:

    | ID | parentID | tag    | style      | events | atribs |
_________________________________________________________
| 0 | -1        | <body> | backgr...  | NULL   | NULL   |
| 1 |  0        | <div>  | NULL       | NULL   | class:.|
| 2 |  1        | <a>    | NULL       | click..| NULL   |
| 3 |  2        | <span> | NULL       | NULL   | NULL   |

    For the purpose of retrieving and rebuilding the DOM with some JS function

    To do this I would use for example some recursive loop like this: (sort of pseudo-JS)

    function loopDOM(obj,parentID=-1,thisID=0) {
   saveToDB({ 
      id: thisID,
      parent: parentID,
      style: obj.getStyle,
      events: obj.getEvents,
      atribs: obj.getAtribs
   });

   obj.each(function() {
       loopDOM(child,thisID,++thisID)
   });
}

    But I am totally stuck at every point here. I've been searching for at least 45 minutes but I could not answer even one of my following questions.

    1. How to loop through the $('body')? how do I retrieve its children from an element? I found .each, .find, .children but I can't find the proper object to pass like the <div> which is a child of <body>.
      I can't figure out how to recursively loop through the object.

    2. How to get ALL the (unknown) events, attributes and CSS of an element? I haven't been able to make any of the answers I've found work.

    ..........................................................................

    edit 1 (outdated)

    If I quickly put togheter the links @PellePenna posted I get this.. but its jquery and javascript mixed and It doenst work. I dont get the attribs nor the events. And I dont have an idea how to get an elements his position. I might be a bit retarted but I dont get the suggestions given. And also really like recursive loops :P

    var el = this.getElementsByTagName("*");
for (var i = el.length; i--;) {
    //get atribs
    var nodes=[], values=[];
    if (el.attributes)
        for (var attr, i=0, attrs=el.attributes, l=attrs.length; i<l; i++){
            attr = attrs.item(i)
            nodes.push(attr.nodeName);
            values.push(attr.nodeValue);
        }
    //get events
    event=$._data(el, 'events');
}

    edit 2 (solution)

    Javascript

    for a "possible" javascript way see @sabof answer below: https://stackoverflow./a/22172009/3309243 ..........

    JQUERY

    Events: I quickly made an example function getEvents(), but it seems to work :)

    Attributes:

    I found this somewhere on the internet, to return all attributes by using .attr()

    Also I have just discovered about debugging in the browser and thus now know how to view an object. Might anyone wonder how: open your console (f12 atleast in FireFox) and type for example $("body") in the console mand line (all the way at the bottom), click on the returned object and look at the right of the console :P

     //extending the attr function to return all attrs
(function($) {
      // duck-punching to make attr() return a map
      var _old = $.fn.attr;
      $.fn.attr = function() {
        var a, aLength, attributes, map;
        if (this[0] &amp;&amp; arguments.length === 0) {
                map = {};
                attributes = this[0].attributes;
                aLength = attributes.length;
                for (a = 0; a < aLength; a++) {
                        map[attributes[a].name.toLowerCase()] = attributes[a].value;
                }
                return map;
        } else {
                return _old.apply(this, arguments);
        }
}
}(jQuery));

    Thanks to the great example of @user3331198 I got the following (togheter with the code block above).

    var href = "http://www.google./";
var text = "Google";

$( document ).ready(function() {    
   $("body").css({"background-color": "#000fff"})
       .append( $("<div>", {class: 'foo'}))
            .append($("<a>", { id: "anID", href: href, text: text }))
                     .append($("<span>").text("Foo").on("click", function(){ alert('!')}));
    loopDOM($("body"));   
 });




function loopDOM(obj,parentID=-1,thisID=0) {
   saveToDB({ 
     id: thisID,
     parent: parentID,
     tag: obj.prop("tagName"),
     style: obj.attr("style"),
     events: getEvents(obj),
     attribs: obj.attr()    
    });

    obj.children().each(function() {
       loopDOM($(this),thisID,++thisID)
    });
} 

function getEvents(obj) {   
    aEvents=[];
    if (typeof $._data( obj[0], 'events' )==="object") {
        $.each($._data( obj[0], 'events' ), function(i, event) {
           type=JSON.stringify(i);  
           aEvents[type]=[];
           $.each(event, function(j, h) {
                aEvents[type][aEvents[type].length]=h.handler;
            });
        });     
    }
    return aEvents;
}
function saveToDB(pass) {
    alert("id:"+pass["id"]+"\nparent:"+pass["parent"]+"\ntag:"+pass["tag"]+"\nstyle:"+pass["style"]);
    alert ("has the following attributes");
    for (var x in pass["attribs"])
         alert("attrib: "+x+" "+pass["attribs"][x]);
     alert ("has the following events");
    for (var x in pass["events"])
        alert("event: "+x+" "+pass["events"][x]);
 }

    ..........................................................................

    Orginal post

    I am toying around in my spare time to get a bit back into shape with coding.

    For example I am building this DOM (for the practice with jQuery instead of plain HTML)

    $(document).ready(function() {  
   $("body").css({"background-color": "#000fff"})
       .append( $("<div>", { class: "foo" })
            .append($("<a>", { href: href, text: text })
                .on("click", function(){ alert('!')}))
                   .append($("<span>").text("Foo")));
});

    Now let's say I want to save the DOM in a DB table like this:

    | ID | parentID | tag    | style      | events | atribs |
_________________________________________________________
| 0 | -1        | <body> | backgr...  | NULL   | NULL   |
| 1 |  0        | <div>  | NULL       | NULL   | class:.|
| 2 |  1        | <a>    | NULL       | click..| NULL   |
| 3 |  2        | <span> | NULL       | NULL   | NULL   |

    For the purpose of retrieving and rebuilding the DOM with some JS function

    To do this I would use for example some recursive loop like this: (sort of pseudo-JS)

    function loopDOM(obj,parentID=-1,thisID=0) {
   saveToDB({ 
      id: thisID,
      parent: parentID,
      style: obj.getStyle,
      events: obj.getEvents,
      atribs: obj.getAtribs
   });

   obj.each(function() {
       loopDOM(child,thisID,++thisID)
   });
}

    But I am totally stuck at every point here. I've been searching for at least 45 minutes but I could not answer even one of my following questions.

    1. How to loop through the $('body')? how do I retrieve its children from an element? I found .each, .find, .children but I can't find the proper object to pass like the <div> which is a child of <body>.
      I can't figure out how to recursively loop through the object.

    2. How to get ALL the (unknown) events, attributes and CSS of an element? I haven't been able to make any of the answers I've found work.

    ..........................................................................

    edit 1 (outdated)

    If I quickly put togheter the links @PellePenna posted I get this.. but its jquery and javascript mixed and It doenst work. I dont get the attribs nor the events. And I dont have an idea how to get an elements his position. I might be a bit retarted but I dont get the suggestions given. And also really like recursive loops :P

    var el = this.getElementsByTagName("*");
for (var i = el.length; i--;) {
    //get atribs
    var nodes=[], values=[];
    if (el.attributes)
        for (var attr, i=0, attrs=el.attributes, l=attrs.length; i<l; i++){
            attr = attrs.item(i)
            nodes.push(attr.nodeName);
            values.push(attr.nodeValue);
        }
    //get events
    event=$._data(el, 'events');
}
    • javascript
    • jquery
    • dom
    Share Improve this question edited May 23, 2017 at 11:50 munity wiki
    25 revs, 5 users 90%
    058WistWol 4
    • What if you call "*"? .. i.e. document.getElementsByTagName("*"); .. Will that give you what you want? – Asons Commented Mar 4, 2014 at 11:34
    • It might, but how do get its childeren to loop? And on a plus how do I get its events, style, atribs? – 058WistWol Commented Mar 4, 2014 at 11:37
    • About looping elements: stackoverflow./questions/8747086/… – Asons Commented Mar 4, 2014 at 11:39
    • About attrib's stackoverflow./questions/2048720/… and events stackoverflow./questions/2008592/… – Asons Commented Mar 4, 2014 at 11:42
    Add a ment  | 

    3 Answers 3

    Reset to default 2

    Try this :--

    function loopDOM(obj,parentID,thisID) {
   saveToDB({ 
      id: thisID,
      parent: parentID,
      style: obj.attr("style"),
      events: Object.keys($._data(obj[0],'events')),
      atribs: obj.attr()
   });

   obj.children().each(function() {
       loopDOM($(this),thisID,++thisID)
   });
}

    First time call function loopDOM($('body'),-1,0)

    Here is my entry. I'm not doing events, since AFAIK, it's not possible to do it reliably with the current DOM api.

    var makeId = (function() {
  var counter = 0;
  return function () { 
    return ++counter;
  }
}());

function getAttributes(elem) {
  if (! elem.attributes) {
    return {};
  }
  var result = {};
  Array.prototype.forEach.call(
    elem.attributes, 
    function (elem) {
      result[elem.nodeName] = elem.value;
    });
  return result;
}

function traverse(parentId, elem) {
  if (! parentId && parentId !== 0) {
    parentId = -1;
  }
  if (! elem) {
    elem = document.documentElement;
  }
  var id = makeId();
  var me = {
    id: id, 
    name: elem.nodeName, 
    parentId: parentId, 
    attributes: getAttributes(elem), 
  };
  if (elem instanceof Text) {
    me.text = elem.wholeText;
  }
  var children =  Array.prototype.map.call(
    elem.childNodes, 
    traverse.bind(null, id)
  ); 
  return Array.prototype.concat.apply(
    [me], children
  );
}

    You can pass * to getElementsByTagName() so that it will return all elements in a page:

    var all = document.getElementsByTagName("*");

for (var i=0, max=all.length; i < max; i++) {
     //here do somthing
}

    Note that you could use querySelectorAll(), if it's available, to just find elements with a particular class.

    if (document.querySelectorAll)
    var clsElements = document.querySelectorAll(".mySpeshalClass");
else
    // loop through all elements instead

    or


    $('body *').each(function() {
    // do stuff
});

    If you have inline <script> tags and the like, you can add a :not selector to exclude those:

    $('body *:not(script, style, noscript)').each(function() {
    // do stuff
});

    As pointed out in the ments and the jQuery all selector docs, this probably won't perform very well. I haven't done any empirical testing, but this might perform better:

    $('body').find('*').not('script, style, noscript').each(...);

    继续浏览有关 的文章

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论