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是我的帖子，我想选择它来添加新的类名。

如何使用vanilla javascript从此节点列表中选择div.post？

Answer 1

只需迭代它并添加类即可。由于您无法循环播放，因此您可以使用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找到一个选择器。它将从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) {
  // ...
}

在nodelist中查找节点

4 个答案:

演示

另外...