我被下面的函数卡住了,试图找回一个值(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;
}
Edit
更新的代码:
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;
}
}
当你这样做时:
> 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。在这种情况下,您希望它为 false,因此要么将其保留为未定义,要么将其设置为 null(因为大多数 DOM 方法如果没有匹配的元素,则返回 null):
var indirectReturnVar = null;
这块很好。
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 && !indirectReturnVar; fi++) {
将递归函数的返回值分配给 indirectReturnVar,否则它会在以太中丢失。
indirectReturnVar = findNodeForAttributeValue(node.childNodes[fi], innerXmlAttributeName, innerXmlAttributeValue);
}
}
返回递归循环之外的值。它只会循环,直到找到匹配的节点或用完节点。
return indirectReturnVar;
}
下面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
引导到其目标。
如果我们想要查找的所有结果怎么办?下面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)
// []
)