循环javascript中的所有元素进行解析？

因此，我试图创建一些模拟taglib（BodyTagSupport）JSP行为的东西，但将其转换为javascript，这只是为了缩减代码，使程序员更容易理解它

那么让我们假设：

<myTag id="x" class="someclass" myTagAttr="someAttr">
  <myTag id="y" class="someOtherclass" myTagAttr="someOtherAttr">
    <div>...</div>
  </myTag>
</myTag>

...

我想循环并开始检查myTag及其属性，但我想完全替换它，比如说，第一次迭代应该呈现：

<div id="x" class="someclass">
  <otherTagMine>someAttr</otherTagMine>
  <myTag id="y" class="someOtherclass" myTagAttr="someOtherAttr">
    <div>...</div>
  </myTag>
</div>

萨默特
...

然后它应该检查标签里面有什么

<div id="x" class="someclass">
  <button>someAttr</button>
  <div id="y" class="someOtherClass">
    <otherTagMine>someOtherAttr</otherTagMine>
    <div>...</div>
  </div>
</div>

萨默特
其他人
...

然后再在每一个里面

<div id="x" class="someclass">
  <button>someAttr</button>
  <div id="y" class="someOtherClass">
    <button>someOtherAttr</button>
    <div>...</div>
  </div>
</div>

萨默特
其他人
...

我知道最终的代码实际上看起来更简单，但这只是一个例子；它将执行烦人的复杂任务，我擅长java，BodyTagSupport以一种非常简洁的方式完成这项任务，但它仅适用于基于JSP的服务器，我希望完全支持任何其他服务器类型，仅使用原始html和js，但从未尝试过为javascript开发，我感谢您的帮助。

AngularJS 我的首选方法是使用带有AngularJS的指令。它允许您为浏览器定义自定义HTML标记和关于如何呈现它们的定义

代码 有一个示例JSFIDLE可用

HTML

角码

angular.module（'app'，[]）
.directive（'mytag'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“”，
是的，
链接：函数（$scope、$element、$attr）{
var attr=$attr.mytagattr；
$element.prepend（“”+attr+“”）；
}
}
});

您是否愿意使用jQuery之类的框架，还是希望使用纯JavaScript？使用jQuery非常简单。是的，任何扩展javascript的框架都可以。@Felishia告诉我是否有一个特定的框架需要使用它，我会看看是否可以在这个框架上使用它。实际上，我对任何框架都持开放态度；我希望尽可能地简化引导框架（甚至比现在更多）还添加了直接ajax支持（这意味着jQuery），以帮助我支付教育费用，或者获得捐赠。我建议使用Angular，因为它应该满足您的所有需求。有一个叫做Bootstrap UI的项目，它是引导框架到AngularJS的一个端口。Angular还与JLite（JQuery的lite版本）捆绑在一起，但如果需要，您可以使用完整的JQuery运行它。如果这个答案满足您的需求，请接受它；如果您需要我修改我的答案，请扩展您的用例。祝你好运

<div ng-app='app'>
<myTag id="x" class="someclass" myTagAttr="someAttr">
  <myTag id="y" class="someOtherclass" myTagAttr="someOtherAttr">
  </myTag>
</myTag>
</div>

angular.module('app', [])
.directive('mytag', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div ng-transclude>',
        transclude: true,
        link: function($scope, $element, $attr) {
            var attr = $attr.mytagattr;
            $element.prepend('<button>' + attr + '</button>');
        }
    }
});