如何循环使用HTMLDOM？以及如何获取元素的事件、样式和属性（附示例） 编辑2（解决方案） Javascript

有关“可能”的javascript方式，请参见下面的@sabof-answer：

JQUERY 事件： 我很快创建了一个示例函数getEvents（），但它似乎可以工作：）

属性：

我在互联网上的某个地方找到了它，使用

.attr（）

另外，我刚刚发现了在浏览器中进行调试，因此现在知道了如何查看对象。 可能有人想知道如何打开你的控制台（至少在FireFox中是f12）并在控制台命令行中键入例如$（“body”）（一直在底部），单击返回的对象并查看控制台的右侧：P

但我在这里的每一点上都被卡住了。我已经搜索了至少45分钟，但我甚至不能回答我下面的一个问题

如何循环使用

$（'body'）

？如何从元素中检索其子元素？我找到了

.each

，

.find

，

.children

，但我找不到像

这样的合适对象，它是

的子对象
我不知道如何递归地循环对象

如何获取元素的所有（未知）事件、属性和CSS？我还没能做出任何我认为有用的答案

徖

编辑1（过时） 如果我很快把@PellePenna发布的链接放在一起，我会得到这个。。但是它的jquery和javascript混合在一起，而且不起作用。我既不了解属性也不了解事件。我也不知道怎样才能从他的位置上得到一份工作。 我可能有点后悔，但我没有得到建议。也非常喜欢递归循环：P

var el=this.getElementsByTagName（“*”）；
对于（变量i=el.length；i--；）{
//得到心房
变量节点=[]，值=[]；
if（el.属性）
对于（var attr，i=0，attrs=el.attributes，l=attrs.length；i尝试以下方法：--

第一次调用函数
loopDOM（$（'body'），-1,0）
您可以将
*
传递给，以便它返回页面中的所有元素：

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

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

或




如果您有内联
标记等，则可以添加
:not选择器以排除这些标记：

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

正如评论和jQuery中指出的，这可能不会表现得很好。我没有做过任何实证测试，但这可能表现得更好：

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

这是我的条目。我不做事件，因为很抱歉，用当前的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
  );
}

如果调用“*”？…即
document.getElementsByTagName（“*”）会怎么样
。这会给你你想要的吗？可能会，但如何让它的子元素循环？另外，我如何获得它的事件、样式、atrib？关于循环元素：关于属性和事件这看起来真的很好。虽然我无法让它工作，但这是因为我完全缺乏javascript和DOM知识。我不知道如何传递一个arting元素进行遍历（parentId，elem）。它不是（$（'body'），因为这是jquery，但我不知道它在javascript中是什么。（我可能会用谷歌搜索它，但现在我将进一步使用@user3331198发布的jquery exmaple）。谢谢你的努力和漂亮的代码。尽管我没有让它工作，但我也会选择你作为答案。因为在我看来这是一个javascript解决方案。我用jquery来获取“一切”，而不是jquery，你这样称呼它
traverse（）
此版本仍然会释放文本节点的内容，我正在更新它。请阅读此版本的任何人注意（我不是专业的程序员或任何人，但是..）我认为DOM和数据应该分开，因此我认为DOM的文本节点的内容实际上不应该是DOM的一部分。在我的脑海中，我看到了这样的用法：
createDOM（）
，
fillDOMwithData（）
getDOM（）
。因此，我想说的是，DOM中文本节点的内容在创建或保存时不是DOM的一部分。尽管如果您正在制作一些实时编辑器，您可能希望获取数据。我已经修复了它。如果您不喜欢文本节点，只需将
子节点
替换为
子节点

也是DOM的一部分DOM，不是吗？

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)
   });
}

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');
}

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)
   });
}

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

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

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

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

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

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

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
  );
}