为什么使用 jQuery 的具有特定父节点（或后代）的 .find（）-ing 子节点会导致 DOM 更改？

Why does .find()-ing child nodes with specific parents (or descendants) with jQuery cause DOM changes?

提问人：Joe Shanahan 提问时间：7/20/2016 最后编辑：Joe Shanahan 更新时间：11/4/2019 访问量：227

问：

使用 Chrome 的开发工具，我开始明白开发工具中的闪烁节点是因为 DOM 发生了变化。这是否也会导致回流焊？

尽管结果包含相同的元素，但以下内容之间似乎存在功能差异：

var as1 = $("body").find("tr a");         // Causes <body> to flash
var as2 = $("body").find("tr").find("a"); // No flash

您可以在以下代码片段中看到此行为。如果您导航到内部标签，您将看到定期闪烁（在 Chrome 开发工具中）。如果两种方法都导致 DOM 更改，则由于不同步间隔，闪烁将是不规则的。<body>

setInterval(function() { 
    var a = $("body").find("tr a"); 
    console.log("See Chrome dev tools for synchronous flash with this message."); 
}, 2000);

setInterval(function() { var a = $("body").find("tr").find("a"); }, 1700);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<table>
<tr><td><a href=#>Hello</a></td></tr>
</table>
</body>

jquery dom 查找 重排

评论

0赞 Tomalak 7/20/2016
主体上的 DOM 断点因子树修改而中断，在主体闪烁时不会被命中。所以我想毕竟没有实际的 DOM 修改。
0赞 Jimmy Ko 7/20/2016
我可以看到两者并导致我的 Chrome 开发工具闪烁。find("tr a")find("tr").find("a")
0赞 Tomalak 7/20/2016
但是属性修改断点确实被命中了两次，一次是这一行，一次是在这一行（这里在 SO 上测试，因此 v1.7.1）。
0赞 Joe Shanahan 7/20/2016
属性修改是否会导致页面重排？

答： 暂无答案

上一个：React - 如何为每个子组件提供唯一的引用？

下一个：带有 ID 的 DOM 树元素会成为全局属性吗？