Question

我一直在尝试检查某些属性是否不属于DOM HTML5属性。代码遍历html标记并保存在Set上。我的想法是在此示例中标识属性ng-controller，ng-repeat，ng-bind，因为其他属性（id和class）是{{1}的一部分属性。

HTML

DOM HTML5

的Javascript

<div id="html-markup">
        <div class="class-1" ng-controller="myController">
            <table id="the-table">
                <thead class="table-header" >
                        <th ng-repeat="(key, val) in myList[0] track by key">
                            {{ key }}
                        </th>
                </thead>
                <tbody class="table-body">
                    <tr ng-repeat="item in myList track by item.id">
                        <td ng-repeat="(key, value) in item">
                            <span ng-bind="value"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

是否有一些黑客或技巧来检查这个？

const element = document.getElementById("html-markup"); const allChildrensNodes = element.childNodes; const allChildrensElements = element.getElementsByTagName("*"); const attributesArray = Array.from(allChildrensElements) .reduce((set, child) => { Array.from(child.attributes).forEach((attr) => { //if(ATTRIBUTE IS NOT PART OF DOM HTML5 ATTRIBUTES) set.add(attr.name) }); return set; }, new Set()) console.log(attributesArray);//Set(5) {"class", "ng-controller", "id", "ng-repeat", "ng-bind"}可以玩这个：https://codepen.io/gpincheiraa/pen/veWKOj?editors=1010

Answer 1

我不相信这里有任何捷径。您必须基于the spec为每个标记类型构建一个有效属性列表（并注意其中一些仅在其他人具有特定值时有效）。虽然许多属性具有您可以检查的反映属性，但A）并非所有属性都可以，B）反射属性的名称并不总是与它们反映的属性相同; C）一些属性与属性具有相同的名称，但不是直接反映（尽管它们通常以某种方式相关，即使是松散的; value不是＆＃39 ; ta反映了value属性的属性，例如;属性为defaultValue）。

Answer 2

嗨如果您想以“ng-”开头收集，可以在下面添加代码“

if(attr.name.startsWith('ng-'))
  set.add(attr.name)

或者您可以使用in this link (HTML attribute reference)

中的完整属性列表创建自己的数组

    const fullAttributeList = ['class','name','id',.....];
   ..
   ..
   ..
    if(fullAttributeList.indexOf(attr.name) ===-1)
      set.add(attr.name)

有没有办法检查html属性是否不是DOM HTML5的一部分？

2 个答案: