在节点列表中查找节点

Find nodes in nodelist

本文关键字：节点 查找 列表      更新时间：2023-09-26

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

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

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

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

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

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

就像 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
      }
 }

你可以写一个选择器查找器。这不是太具体，但肯定需要改进。您可以通过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) {
  // ...
}

这里： 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 的答案一样做一个循环。否则，上面的解决方案将适用于挑选它。

相关文章：