在节点列表中查找节点

Question

我有一个这样的节点列表：

[text, div.post, comment, text, div.post, comment, text, div.post, comment, text, div.post, comment, text, div.post, comment, text]

这个节点列表是 ajax 调用的结果，div.post 是我的帖子，我想 select 它添加新的类名。

如何使用 vanilla javascript 从这个节点列表 select div.post？

Answer 1

只需遍历它并添加 class。由于你不能按原样循环，你可以使用 Array.forEach 和 Function.call

[].forEach.call(nodelist, function(elm){
   if(elm.className.indexOf("post") > -1 && elm.nodeName == "DIV")
      elm.className += ' classNameHere';  
});

Answer 2

此处：https://developer.mozilla.org/en-US/docs/Web/API/NodeList.item

nodelist = [text, div.post, comment, text, div.post, comment, text, div.post, comment, text, div.post, comment, text, div.post, comment, text];

youritem = nodelist.item(1);

要遍历并找到所有符合条件的内容，您必须像 Amit 的回答那样进行循环。否则上面的解决方案将适用于挑选它。

Answer 3

喜欢 itmars 和 Amit Jokis 在 for 循环中的回答

 nodelist = [text, div.post, comment, text, div.post, comment, text, div.post, comment, text, div.post, comment, text, div.post, comment, text];
 for(var i=0; i< nodelist.length;i++){
      var nodeItem = nodelist.item(i);
      if(nodeItem.nodeName=="div" && (nodeItem.className.indexOf("post") > -1)){
           //do your stuff
      }
 }

Answer 4

您可以编写一个选择器查找器。这不是太具体，但肯定需要改进。您可以通过 class id 和 tagName 找到选择器。它将 return 来自 NodeList 的第一个。

演示

var children = document.getElementById('foo').childNodes;

findAndPrint('#bar', children);
findAndPrint('div#baz', children);

function findAndPrint(selector, nodeList) {
  print('>> Found?: ' + JSON.stringify(toEl(getNodeBySelector(nodeList, selector))));
}

function print(str) {
  document.getElementById('out').innerHTML += str + '<br />';
}

function getNodeBySelector(nodeList, selector) {
  var parts = selector.split(/(?=[#\.])/g);
  for (var i = 0; i < nodeList.length; i++) {
    var node = nodeList[i];
    if (node !== undefined && isElement(node)) {
      var el = toEl(node);
      if (isMatch(el, parts)) {
        return node;
      }
    }
  };
  return undefined;
}

function isElement(node) {
  try {
    return node instanceof HTMLElement;
  } catch (e) {
    return (typeof node === "object") &&
      (node.nodeType === 1) && (typeof node.style === "object") &&
      (typeof node.ownerDocument === "object");
  }
}

function toEl(node) {
  if (node) {
    return {
      'name': node.tagName.toLowerCase(),
      'id': node.getAttribute('id'),
      'class': node.getAttribute('class')
    };
  }
  return undefined;
}

function isMatch(el, parts) {
  for (var i = 0; i < parts.length; i++) {
    var part = parts[i];
    if (part.indexOf('.') == 0) {
      if (el.class != null && el.class.indexOf(part.substr(1)) === -1) {
        return false;
      }
    } else if (part.indexOf('#') == 0) {
      if (el.id != null && el.id !== part.substr(1)) {
        return false;
      }
    } else {
      if (el.name != null && el.name !== part) {
        return false;
      }
    }
  }
  return true;
}

<div id="out"></div>

<div id="foo">
  <div id="bar"></div>
  <div id="baz"></div>
</div>

还有...

您可以修改 NodeList 中的每个节点，而不是使用以下方法返回第一个元素：

function applyToNode(nodeList, selector, callback) {
  var parts = selector.split(/(?=[#\.])/g);
  for (var i = 0; i < nodeList.length; i++) {
    var node = nodeList[i];
    if (node !== undefined && isElement(node)) {
      if (isMatch(toEl(node), parts)) {
        callback(node, i, nodeList);
      }
    }
  };
}

回调在哪里：

function callback(node, index, nodeList) {
  // ...
}

在节点列表中查找节点

Find nodes in nodelist

javascript

nodelist

演示

还有...