Сравнивая NodeList на массив элементы идентификаторы

Я создал NodeList для ChildNodes неупорядоченного списка нижеСравнивая NodeList на массив элементы идентификаторы

<body> 
<ul id="win" >win 
    <li id="aa0">text</li> 
    <li id="aa1"></li> 
    <li id="aa2"></li> 
    <li id="aa3"></li> 
    <li id="aa4"></li> 
    <li id="aa5"></li> 
</ul> 
</body>

и я создал массив элементов идентификаторов, что я хочу, чтобы сравнить NodeList с

['aa0','aa1,'aa7','aa8']

и я использовал следующий javascript (ниже), чтобы сравнить NodeList с массивом. Цели состоят в том, чтобы определить, какие элементы в массиве уже находятся в DOM или должны быть добавлены в DOM ... И определить, какие элементы, находящиеся в настоящее время в DOM, необходимо удалить, чтобы я мог добавить UL, чтобы он содержал только id, которые находятся в массиве.

function nodeinfo(){ 
//these are the ids that we want in the ul 
var ids=['aa0','aa1','aa7','aa8'] 

var node=document.getElementsByTagName('ul')[0]; 
var nodelist=node.childNodes; 

    //test to see if array ids are in nodelist 
    for(var j=0;j<ids.length;j++){ 
     if(document.getElementById(ids[j])){alert(ids[j]+" is here, keep")} 
     else{alert(ids[j]+" is not here, add")} 
     } 

    //test to see if nodelist ids are in array 
    for(var j=0;j<nodelist.length;j++){ 
     if(nodelist[j].id != undefined){ 
      var tempi=0 
      for(var k=0;k<ids.length;k++){ 
       if(nodelist[j].id === ids[k]){tempi++} 
       } 
      if (tempi !=1){alert(nodelist[j].id+" is unwanted, remove")} 
      } 
     } 
    }

В настоящее время я просто показываю предупреждения, где я буду ссылаться на добавление структуры. Обратите внимание, что я довольно новичок в этом. Я знаю, что NodeLists не ведут себя как массивы, и что настройка DOM в середине этой функции изменит NodeList и, вероятно, повредит все.

Мои вопросы: это кажется громоздким, есть ли более сжатый или надежный подход к этой цели? и существует ли какая-либо неотъемлемая опасность при попытке настроить структуру DOM на основе массива, как я показываю здесь?

и, пожалуйста, не jquery.

Спасибо за вашу помощь

источник

2013-09-03 William Smith

Какие браузеры вам нужны для поддержки? Если вы можете избежать старых IE, то такие вещи, как 'Array.filter', будут полезны –

по крайней мере IE8 и выше ... но предпочли бы IE6 –

Из любопытства, почему _no jquery_? (Особенно, если вы планируете поддерживать IE6-8.) – pdoherty926

Вместо имея массив идентификаторов было бы проще использовать ассоциативный массив. Это сделает ваш второй цикл значительно менее громоздким:

var ids = { 
    aa0: true, 
    aa1: true, 
    aa7: true, 
    aa8: true 
}; 

var remove = []; 
var add = []; 

for(var id in ids) if(ids.hasOwnProperty(id)) { 
    if(document.getElementById(id) === null) { 
     remove.push(id); 
    } 
} 

for(var i = 0; i < nodeList.length; i++) { 
    var node = nodeList[i]; 

    if(typeof node.id !== undefined && !ids[node.id]) { 
     remove.push(node.id); 
    } 
}

if во втором цикле может быть изменен, чтобы использовать indexOf следующие действия, если вы используете массив идентификаторов:

if(typeof node.id !== undefined && ids.indexOf(node.id) > -1) { 
    remove.push(node.id) 
}

Производительность -ого первого лучше, так как поиск из ассоциативного массива равен O(1) (если у вас нет столкновения), тогда как наихудший вариант для indexOf равен O(n) (это означает, что он должен пройти весь список, чтобы узнать, существует ли ключ в худшем дело).

источник

2013-09-03 22:16:26

очень приятно. Спасибо. Может ли смысл создавать функцию преобразования массива id в ассоциативный массив? –

все еще довольно зеленый с объектами, но я прокладываю себе путь через него. –

@WilliamSmith Это единственный способ получить свой идентификатор? Как массив? Я отредактирую свое решение, чтобы показать вам, как использовать массивы. –

Сравнивая NodeList на массив элементы идентификаторы

ответ

Смежные вопросы