是否有某種方法可用於檢查HTML屬性是否不屬於DOM HTML5？

我一直在試圖檢查一些屬性是否屬於DOM HTML5屬性。代碼遍歷html標記並保存在Set上。我的想法是在此示例中標識屬性ng-controller,ng-repeat,ng-bind，因爲其他屬性（id和class）屬於DOM HTML5屬性的一部分。是否有某種方法可用於檢查HTML屬性是否不屬於DOM HTML5？

HTML

<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>

的Javascript

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"}

有一些黑客或欺騙檢查呢？

一個娛樂codepen與此：https://codepen.io/gpincheiraa/pen/veWKOj?editors=1010

來源

2017-10-04 Gonzalo Pincheira Arancibia

能你確切地說明了這個最終目標是什麼？因爲做相反的事情並且檢查確定的屬性（或者像「ng-」的前綴）而不是過濾掉「常規」屬性會容易得多。網頁上有常用的JSON列表，但我不認爲這是保證是瀏覽器變體的證明。 – Kaddath

由於HTML5是一個「活的東西」，並且沒有任何版本，所以這樣的列表會不是靜態的開始，但隨着時間的推移而變化... – CBroe

@Kaddath我的想法是識別非標準屬性來替換佔位符的值。這個想法將做快照測試（https://facebook.github.io/jest/docs/en/snapshot-testing.html）。通過例子檢查「ng-」的問題是存在另一個前綴，比如「ui-」或「md-」，或者如果您創建自定義指令，則需要任何其他前綴。 –

你好如果你想收集開始用「NG-」你可以添加下面的代碼insted`

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)

來源

2017-10-04 19:37:30

謝謝，我使用你的mdn鏈接，屬性列表對我來說已經足夠了。只需在chrome控制檯中使用'Array.from（document.querySelectorAll（「。standard-table tbody tr td：nth-child（1）」））。map（（c）=> c.innerText）'並獲取列表:) –

我不相信有任何捷徑這裏。根據the spec，您必須建立每個標籤類型的有效屬性列表（並注意一些僅在其他標籤具有特定值時有效）。雖然許多屬性已反映了您可以檢查的屬性，但A）並非全部都是，B）反射屬性的名稱並非總是與它們反映的屬性相同; C）一些屬性與屬性具有相同的名稱，但不是直接反映（儘管它們通常以某種方式相關，即使鬆散; value不是value屬性的反映屬性，例如屬性是defaultValue）。

來源

2017-10-04 14:14:06

哦！感謝這個鏈接！：D –

這個鏈接很棒 - 你可以通過AJAX抓取頁面，建立你的列表，然後遍歷每個元素。 – freginold

@freginold：哇 - 我打算說「可能不是，跨源呼叫」，但W3C支持該頁面的CORS！（很高興我檢查了...）從jsfiddle和localhost工作，所以我覺得他們已經開放了。 –

是否有某種方法可用於檢查HTML屬性是否不屬於DOM HTML5？

回答

相關問題