0

我坚持使用以下功能，试图取回一个值（dom 树的一部分）。

我没有收到有用的价值，而是获得了一个0/undefined.

var findNodeForAttributeValue = function (node, innerXmlAttributeName, innerXmlAttributeValue) {
var indirectReturnVar='0';
if ((node.nodeType === 1)&&(node.hasAttribute(innerXmlAttributeName))) {
    if (node.getAttribute(innerXmlAttributeName)==innerXmlAttributeValue) {
        indirectReturnVar=node;
        return indirectReturnVar;
    }
}
if((node.hasChildNodes())&&(node.firstChild!=null)) {
    Array.forEach ( node.childNodes, function (children) {
        findNodeForAttributeValue(children, innerXmlAttributeName, innerXmlAttributeValue);
    } );
    return indirectReturnVar;
}

编辑

更新代码：

var findNodeForAttributeValue = function (node, innerXmlAttributeName, innerXmlAttributeValue) {
  var indirectReturnVar='0';
  if ((node.nodeType === 1) && (node.hasAttribute(innerXmlAttributeName))) {
    if (node.getAttribute(innerXmlAttributeName) == innerXmlAttributeValue) {
      indirectReturnVar = node;
      return indirectReturnVar;
    }
  }

  if ((node.hasChildNodes()) && (node.firstChild != null)) {
    for (var fi=0, fiLen=node.childNodes.length; fi<fiLen; fi++) {
      findNodeForAttributeValue(node.childNodes[fi], innerXmlAttributeName, innerXmlAttributeValue);
    }
    return indirectReturnVar;
  }
}
4

2 回答 2

1

当你这样做时：

> Array.forEach ( node.childNodes .. )

forEach是Array.prototype上的 Array 实例的方法。childNodes属性是一个NodeList，它不是一个数组。

在一些支持 ES5 的浏览器中，你可以这样做：

Array.prototype.forEach.call(childNodes, ...)

但这不能保证有效（并且在 IE 8 及更低版本中会失败）。所以只需使用 for 循环：

for (var i=0, iLen=node.childNodes.length; i<iLen; i++) {
  // do stuff with node.childNodes[i];
}

编辑

要修复更新的代码：

function findNodeForAttributeValue (node, innerXmlAttributeName, innerXmlAttributeValue) {

使用函数声明，我不明白您为什么要使用带赋值的表达式。此外，较短的变量名将使生活更轻松，我可能会做类似的事情：

function getNodeByAttributeValue (node, att, value)

如果您希望变量具有真实值，只需将其设置为 true。在这种情况下，您希望它是假的，因此要么将其保留为未定义，要么将其设置为null（因为大多数 DOM 方法如果没有得到匹配的元素则返回 null）：

  var indirectReturnVar = null;

这个 for 块很好。

  if ((node.nodeType === 1) && (node.hasAttribute(innerXmlAttributeName))) {

    if (node.getAttribute(innerXmlAttributeName) == innerXmlAttributeValue) {
      indirectReturnVar = node;
      return indirectReturnVar;
    }
  }

  if ((node.hasChildNodes()) && (node.firstChild != null)) {

这个位需要修改。仅当indirectReturnVar为假时才继续循环：

    for (var fi=0, fiLen=node.childNodes.length; fi<fiLen && !indirectReturnVar; fi++) {

将递归函数的返回值分配给indirectReturnVar，否则它会丢失在以太中。

      indirectReturnVar = findNodeForAttributeValue(node.childNodes[fi], innerXmlAttributeName, innerXmlAttributeValue);


    }
  }

返回递归循环外的值。它只会循环直到找到匹配的节点或用完节点。

  return indirectReturnVar;
}
于 2013-10-25T00:53:58.737 回答
0

下面find1采用一个搜索函数f，该函数将为提供node的每个节点调用一次childNodes。当f返回true时，node返回。否则undefined给出未找到结果的信号。

const find1 = (f, node, cursor = 0) =>
  node.nodeType === 1 && f (node)
    ? node
  : cursor === node.childNodes.length
    ? undefined
  : find1 (f, node.childNodes[cursor]) || find1 (f, node, cursor + 1)

console.log
  ( find1
      ( node => node.tagName === 'P'
      , document
      )
      // <p>first paragraph</p>
      
  , find1
      ( node => node.textContent === 'and a span'
      , document
      )
      // <span>and a span</span>
      
  , find1
      ( node => node.getAttribute('class') === 'last'
      , document
      )
      // <p class="last">last paragraph</p>
  )
<div id="main">
  <!-- comment -->
  <h1>title</h1>
  <p>first paragraph</p>
  <p>second paragraph <span>and a span</span></p>
  <p class="last">last paragraph</p>
<div>

以上find1不限于通过特定属性和值搜索节点。相反，用户提供的 lambda 允许程序员直接find1朝着它的目标前进。

如果我们想要 find 的所有结果怎么办？下面findAll返回一个包含所有匹配结果的数组

const findAll = (f, node) =>
{ const loop = function* (node)
  { if (node.nodeType === 1 && f (node))
      yield node
    for (const child of node.childNodes)
      yield* loop (child)
  }
  return Array.from (loop (node))
}

console.log
  ( findAll
      ( node => node.tagName === 'P'
      , document
      )
      // [ <p>first paragraph</p>
      // , <p>second paragraph<span>...</span></p>
      // , <p class="last">last paragraph</p>
      // ]
      
  , findAll
      ( node => node.getAttribute('class') === 'last'
      , document
      )
      // [ <p class="last">last paragraph</p> ]
  )
<div id="main">
  <!-- comment -->
  <h1>title</h1>
  <p>first paragraph</p>
  <p>second paragraph <span>and a span</span></p>
  <p class="last">last paragraph</p>
<div>

高阶函数喜欢find1和findAll很棒，因为它们可以以各种有用的方式专门化。

const findByTag = (tagName, node) =>
  findAll
    ( node => node.tagName === tagName.toUpperCase()
    , node
    )

const findByAttrValue = (attr, value, node) =>
  findAll
    ( node => node.getAttribute (attr) === value
    , node
    )

console.log
  ( findByTag ('p', document)
    // [ '<p>...</p>', '<p>...</p>', '<p>...</p>' ]

  , findByTag ('h1', document)
    // [ '<h1>title</h1>' ]

  , findByTag ('strong', document)
    // []

  , findByAttrValue ('class', 'last', document)
    // [ <p class="last">last paragraph</p> ]

  , findByAttrValue ('id', 'main', document)
    // [ <div id="main">...</div> ]

  , findByAttrValue ('class', 'first', document)
    // []
  )
于 2018-09-26T16:07:23.003 回答