js解析html标签

我现在想要实现一个功能，使用js来获取当前页面body里面所有的div结构，可以么，类似于一颗树，根节点就是body，子节点包括div，使用js将所有的div的id全部解析出来。麻烦大家帮帮忙了

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title></head><body>
    <div id="test1"><div id="test3">&nbsp;</div></div>
    <div id="test2"></div><script type="text/javascript">
    var objs = document.getElementsByTagName('div');
    for (var i = 0; i < objs.length; i ++) alert(objs[i].id);
    </script>
    </body>
    </html>
      

  2.   


    这样的确是可以获取所有div的id  但是我如何能知道哪个是哪个的子节点呢？还有我刚在网上看到xml dom也可以这样实现，到底哪个更好些呢？
      

  3.   

    不太了解，不过稍微改一下也可以得到每个div的父节点的信息：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title></head><body>
    <div id="test1"><div id="test3">&nbsp;</div></div>
    <div id="test2"></div><script type="text/javascript">
    var objs = document.getElementsByTagName('div');
    for (var i = 0; i < objs.length; i ++) {
    alert(objs[i].id + "'s parent element is " + objs[i].parentNode.nodeName + ' ' + objs[i].parentNode.id);
    }
    </script>
    </body>
    </html>
      

  4.   

    你可以找objs[i].parentNode是谁，如果嵌套很多层，你也可以往上一直递归查找。
      

  5.   

    再改一下：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title></head><body>
    <div id="test1"><div id="test3">&nbsp;</div></div>
    <div id="test2"></div><script type="text/javascript">
    var objs = document.getElementsByTagName('div');
    for (var i = 0; i < objs.length; i ++) {
    var str = '';
    parentNodeInfo(objs[i]);
    str += ' ' + objs[i].id;
    alert(str);
    }function parentNodeInfo(obj) {
    str = obj.parentNode.nodeName + '(id = ' + obj.parentNode.id + ')' + '>' + str;
    if (obj.parentNode.nodeName.toUpperCase() != 'BODY') parentNodeInfo(obj.parentNode);
    }
    </script>
    </body>
    </html>
      

  6.   

    var path = [];var el = document.getElementById('myNode');do {
        path.unshift(el.nodeName + (el.className ? ' class="' + el.className + '"' : ''));
    } while ((el.nodeName.toLowerCase() != 'html') && (el = el.parentNode));alert(path.join(" > "));抄别人的，出自http://stackoverflow.com/questions/1484875/i-need-the-full-dom-node-path-of-element