過濾屬性

Question

的所有屬性和值使用純Javascript，如何過濾目標元素內的所有屬性和屬性值？

下面是我試圖實現我的目標的示例代碼。但是我不知道如何獲取所有屬性名稱，然後獲取屬性名稱的值來過濾它。如果屬性名稱未列出，我想刪除該屬性。如果允許，我想只保留允許的值。

(function() { 
 
    //array allowed attr and allowed value of attr 
 
    /* 
 
    var allowedAttrValue = {}; 
 

 
    allowedAttrValue['class'] = 'dont_remove'; // I want to use dont_remove class 
 

 
    allowedAttrValue['class'] = 'i_want_this_class'; // I want to use i_want_this_class class 
 

 
    allowedAttrValue['data-dont-remove='] = 'whatever'; //what ever value in this attribute are allowed. 
 

 
    // 1. I need to remove all attribute not listed 
 
    // 2. I want to filter value of allowed attribute. if value not listed I want to keep only allowed attribute (especially class; have multiple value separatedby space). 
 
    */ 
 

 
    var 
 
    editor = document.getElementById("post-editor"), 
 
    editorParagraph = editor.querySelectorAll("*"); 
 

 
    for (i = 0; i < editorParagraph.length; ++i) { 
 
    elem = editorParagraph[i]; 
 
    if (elem.attributes) { 
 
     //console.log(elem.attributes); //return namedNodeMap object. how to get attribute name and attribute value? 
 
     var ii; 
 
     for (ii = 0; ii < elem.attributes.length; ++ii) { 
 
     var elemAttr = elem.attributes[ii]; 
 
     console.log(elemAttr); //retrun directly data-attr="haha" data-wtf="remove-me" class="hehe" and all. 
 
     } 
 
    } 
 
    } 
 

 
})(); //end

<div id="post-editor" class="preview"> 
 
    <div data-attr="haha" data-wtf="remove me"> 
 
    bla bla 
 
    </div> 
 
    <div class="hehe dont_remove" data-something="haha"> 
 
    bla bla 
 
    </div> 
 
    <div data-dont-remove="value" data-randomly="haha"> 
 
    bla bla 
 
    </div> 
 
    <div class="this_class_not_listed i_want_this_class" data-remove-all="haha"> 
 
    bla bla 
 
    </div> 
 
    <div data-data="haha"> 
 
    bla bla 
 
    </div> 
 
</div>

Answer 1

下面是使用attributes和removeNamedItem

當你點擊remove Me它會從第一個div刪除data-remove-me屬性，因爲它不是在keepList一個簡單的例子，。然後，您應該看到紅色的div變白..

var 
 
    keepList = { 
 
    'data-keep-me': true 
 
    }; 
 

 
document.querySelector('button').onclick = function() { 
 
    var divs = document.querySelectorAll('div'); 
 
    for (var l = 0; l < divs.length; l ++) { 
 
    var d = divs[l]; 
 
    for (var ll = d.attributes.length -1; ll >= 0; ll--) { 
 
     var a = d.attributes[ll]; 
 
     if (!keepList[a.name]) 
 
     d.attributes.removeNamedItem(a.name); 
 
    } 
 
    } 
 
}

[data-remove-me] { 
 
    background-color: red; 
 
} 
 
[data-keep-me] { 
 
    background-color: yellow; 
 
}

<div data-remove-me="Remove Me"> 
 
Remove Me 
 
</div> 
 

 
<div data-keep-me="Keep Me"> 
 
Keep Me 
 
</div> 
 

 
<button>Remove Them</button>

而且，這裏就是你們的榜樣，這些器官功能障礙綜合徵。但是您需要使用對象檢查來查看更改。

注意我也按照相反的順序逐步完成了屬性，這是因爲在刪除它們時，順序/長度會發生變化。

(function() { 
 
    //array allowed attr and allowed value of attr 
 
    var allowedAttrValue = { 
 
    class: true, 
 
    'data-dont-remove': true 
 
    }; 
 

 
    var 
 
    editor = document.getElementById("post-editor"), 
 
    editorParagraph = editor.querySelectorAll("*"); 
 

 
    for (i = 0; i < editorParagraph.length; ++i) { 
 
    elem = editorParagraph[i]; 
 
    if (elem.attributes) { 
 
     var ii; 
 
     for (ii = elem.attributes.length -1; ii >=0; --ii) { 
 
     var elemAttr = elem.attributes[ii]; 
 
     if (!allowedAttrValue[elemAttr.name]) 
 
      elem.attributes.removeNamedItem(elemAttr.name); 
 
     } 
 
    } 
 
    } 
 

 
})(); //end

<div id="post-editor" class="preview"> 
 
    <div data-attr="haha" data-wtf="remove me" data-xyz=""> 
 
    bla bla 
 
    </div> 
 
    <div class="hehe dont_remove" data-something="haha"> 
 
    bla bla 
 
    </div> 
 
    <div data-dont-remove="value" data-randomly="haha"> 
 
    bla bla 
 
    </div> 
 
    <div class="this_class_not_listed i_want_this_class" data-remove-all="haha"> 
 
    bla bla 
 
    </div> 
 
    <div data-data="haha"> 
 
    bla bla 
 
    </div> 
 
</div>