Javascript向上遍历DOM

Question

在 jQuery 中向上遍历 DOM 几步而不是

 $(this).parent().parent().parent().parent().parent().click();

我可以写简短的版本:

 $(this).parent(5).click();

所以，我想知道，是否有一种方法可以缩短代码而不是垃圾邮件“.parentNode”？

Answer 1

相当琐碎:

function parent (element, n = 1) {
  let {parentNode} = element;
  for (let i = 1; parentNode && i < n; i++) {
    ({parentNode} = parentNode);
  }
  return parentNode;
}

const span = document.querySelector('span');
const directParent = parent(span);                  // direct parent node
const greatGreatGreatGrandParent = parent(span, 5); // parent node 5 times
console.log(directParent.getAttribute('data-foo'));                // baz
console.log(greatGreatGreatGrandParent.getAttribute('data-foo')); // bar

<div data-foo="bar">
  <div>
    <div>
       <div>
         <div data-foo="baz">
          <span>Hello, World!</span>
         </div>
      </div>
    </div>
  </div>
</div>

我检查parentNode因为它可能是null 。在这种情况下，我打破循环并返回 null ，因为继续循环会导致错误:

({parentNode} = null); // TypeError: can't convert null to object

括号是必需的，以表明开头 {不启动一个 block ，而是一个解构赋值:

{parentNode} = parentNode; // SyntaxError: expected expression, got '='

编辑:

我必须承认我的解决方案相当简洁，并且使用了一些新的 JavaScript 功能使其更加简洁。

let {parentNode} = element; 是什么意思？意思是？

Object destructuring让您以更简洁的方式从对象读取属性:

let {parentNode} = element;

相当于:

let parentNode = element.parentNode;

如上所述，

({parentNode} = parentNode);

相当于:

parentNode = parentNode.parentNode;

parentNode && i < n 是什么意思？到底是？

每个for -loop 有一个条件。如果此条件为真，则继续循环。如果条件为假，则跳出循环。

我可以写:

for (let i = 1; i < n; i++) {
  // ...
}

这将运行循环 n - 1迭代。最后一次迭代后，i等于n ，因此条件计算结果为 false然后它就停止了，这很好。

parentNode && i < n延长这个条件。它不仅检查是否 i小于n ，但它还会检查是否 parentNode包含真实值。如果parentNode是 null (可能发生的情况是元素没有父节点)，循环将中断，因为它无法读取属性 parentNode为空。

<小时/>

希望您能理解以下函数的解释，该函数与原始函数等效:

function parent (element, times) {
  var n; // how many times 'parentNode'?
  if (times) {
    n = times;
  } else {
    n = 1;
  }
  var elementToReturn = element.parentNode;
  for (var i = 1; i < n; i++) {
    if (elementToReturn === null) {
      break;
    } else {
      elementToReturn = elementToReturn.parentNode;
    }
  }
  return elementToReturn;
}