Удалить элементы из коллекции HTML на основе другой коллекции HTML

Question

Я пытаюсь создать 3 коллекции HTML, содержащие все мои ссылки на странице, поэтому я могу прикрепить 3 отдельные функции к каждой категории ссылок. Моя первая коллекция HTML - это "ссылки на заголовки", вторая - "ссылки в нижнем колонтитуле", а третья - "все остальные ссылки". Мне нужно также прикрепить функции отслеживания ссылок и другие элементы.

Создать первые две коллекции довольно просто, поскольку я могу это сделать document.getElementById('header'); и document.getElementById ('нижний колонтитул'); а затем this.getElementsByTagName('a'); Однако получить третью коллекцию "всех других ссылок" немного сложнее. Не существует чистого div, который содержит только "середину" страницы, и есть ссылки вне заголовка и нижнего колонтитула, которые также трудно выделить. Я хотел бы сделать что-то вроде allLinks = document.linnks, а затем отфильтровать все ссылки, уже присутствующие в первой и второй коллекциях HTML.

Есть ли способ сделать это? В идеале я хотел бы избежать загрузки большего количества библиотек, и чистый JS будет приветствоваться

Спасибо!

Answer 1

Вы можете превратить списки узлов в массивы, а затем использовать filter() вытащить ссылки, которые уже есть в одном из других списков:

var hdr = document.getElementById('header');
var hlinks = arrayOf(hdr.getElementsByTagName('a'));

var ftr = document.getElementById('footer');
var flinks = arrayOf(ftr.getElementsByTagName('a'));

var others = arrayOf(document.getElementsByTagName('a')).
filter(
  function(element) {
    return (hlinks.indexOf(element) < 0) && (flinks.indexOf(element) < 0);
  }
);

function arrayOf(nodelist)
{
  var result = [];
  for ( var i = 0; i < nodelist.length; ++i )
    result.push(nodelist.item(i));

  return result;
}

Пример: http://codepen.io/paulroub/pen/ikebh

Если вам нужно поддерживать старые браузеры, в которых отсутствует Array.prototype.filter()включите код с этой страницы MDN, чтобы реализовать его при необходимости.