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

Using Chrome's dev tools, I have come to understand that a flashing node in the dev tools is because of a change in the DOM. Does that also lead to a reflow?

There seems to be a functional difference between the following despite the results containing the same elements:

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

You can see this behaviour in following snippet. If you navigate to the inner <body> tag you will see regular flashes (in Chrome dev tools). The flashes would be irregular due to the out of sync intervals if both methods were causing a DOM change.

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>

Recommended topics

Hot tags