Hello.

Two questions:

  1. Why, when I change tables in places, the number of rows in table A is invariable, because it (table A) was replaced by a table with fewer columns ...?
  2. Why does alert () work before the tables are swapped, because is alert () registered after the main code?

'use strict' var A = document.querySelector('.b-matrix[data-name="a"] table'), B = document.querySelector('.b-matrix[data-name="b"] table'), C = document.querySelector('.b-matrix[data-name="c"] table'); document.body.onclick = function() { var parentA = A.parentNode, parentB = B.parentNode, a = parentB.replaceChild(A, B); parentA.insertBefore(a, null); alert(A.querySelectorAll('tr').length); } 
 .main { padding: 15px 30px 0 30px; overflow: auto; } .b-matrix { position: relative; margin: 0 30px 25px 0; padding: 3px; border-left: 2px solid #444; border-right: 2px solid #444; position: relative; float: left; } /*------- [ ] -------*/ .b-matrix_border:before, .b-matrix_border:after, .b-matrix__table_border:before, .b-matrix__table_border:after { position: absolute; display: block; width: 8px; height: 2px; background: #444; content: ''; } .b-matrix_border:before { top: 0; left: 0; } .b-matrix_border:after { top: 0; right: 0; } .b-matrix__table_border:before { bottom: 0; left: 0; } .b-matrix__table_border:after { bottom: 0; right: 0; } /*----- // [ ] // -----*/ .b-matrix__table input { display: block; width: 40px; height: 40px; margin: 5px; border: 1px solid #ddd; text-align: center; } 
 <section class="main"> <div class="b-matrix b-matrix_border" data-name="c"> <table class="b-matrix__table b-matrix__table_border"> <tr> <td> <input type="text" value="" disabled /> </td> <td> <input type="text" value="" disabled /> </td> </tr> <tr> <td> <input type="text" value="" disabled /> </td> <td> <input type="text" value="" disabled /> </td> </tr> <tr> <td> <input type="text" value="" disabled /> </td> <td> <input type="text" value="" disabled /> </td> </tr> <tr> <td> <input type="text" value="" disabled /> </td> <td> <input type="text" value="" disabled /> </td> </tr> </table> </div> <div class="b-matrix b-matrix_border" data-name="a"> <table class="b-matrix__table b-matrix__table_border"> <tr> <td> <input type="text" value="" /> </td> <td> <input type="text" value="" /> </td> </tr> <tr> <td> <input type="text" value="" /> </td> <td> <input type="text" value="" /> </td> </tr> <tr> <td> <input type="text" value="" /> </td> <td> <input type="text" value="" /> </td> </tr> <tr> <td> <input type="text" value="" /> </td> <td> <input type="text" value="" /> </td> </tr> </table> </div> </section> <section class="main"> <div class="b-matrix b-matrix_border" data-name="b"> <table class="b-matrix__table b-matrix__table_border"> <tr> <td> <input type="text" value="" /> </td> <td> <input type="text" value="" /> </td> </tr> <tr> <td> <input type="text" value="" /> </td> <td> <input type="text" value="" /> </td> </tr> </table> </div> </section>

    2 answers 2

    1 - See: you saved to variable A a pointer to a specific element in the DOM, to a table inside data-name = a:

     var A = document.querySelector('.b-matrix[data-name="a"] table')

    Of course, now always, when you check how many rows in this table, you will get the same result (in this example, at least). You do not change the number of rows within this table? You change this and some other tables in places. But they and their integrity and the number of lines remain unchanged. It's like asking, “I replaced the red apple with the green one, but why did the red one remain red?”.

    In the code proposed by C.Raf.T you can see that it checks the number of rows not at the table itself, like you, but at the parent block, and this is a completely different matter, because there is another table inside the block.

    2 - not quite. Alert works as it should be on the code - after the change of tables. But before the changes on the page. If you look at the page code in DevTools, you will see that at the time of the call, the table alerts have already moved. But the browser does not immediately draw the changes. When it does it is a very extensive topic to study, in this case it’s important that it does it a little later than the immediate changes in the DOM.

    • Thanks for the detailed answer. - Astor
    • Although it is generally strange that this option does not work - alert (parentA.querySelectorAll ('tr'). Length); - Astor
    • And such - A.parentNode.querySelectorAll ('tr'). Length; - Astor
    • And he is almost no different from your first. The parent at the table also changes constantly. The table was in the "a" block; here the call to A.parentNode returns the parent "a". You move the table to the "b" block, and now the call to A.parentNode already returns "b". And so there, through the parent, you will again find out how many rows in the same table A, even if it is in different places. - Ivan Pshenitsyn
    • If at the basic stage, once, remember the parents, i.e. save in the variable references to the parents of each table, and do not overwrite these variables when you click, then the result will be what you expect. Those. if you render var parentA = *** from the click handler function. - Ivan Pshenitsyn

    On account of why it works, I don’t know before, but if I’m checking the alert by parent div :

     alert(document.querySelector('.b-matrix[data-name="a"]').querySelectorAll('tr').length); 

     'use strict' var A = document.querySelector('.b-matrix[data-name="a"] table'), B = document.querySelector('.b-matrix[data-name="b"] table'), C = document.querySelector('.b-matrix[data-name="c"] table'); document.body.onclick = function() { var parentA = A.parentNode, parentB = B.parentNode, a = parentB.replaceChild(A, B); parentA.insertBefore(a, null); alert(document.querySelector('.b-matrix[data-name="a"]').querySelectorAll('tr').length); } 
     .main { padding: 15px 30px 0 30px; overflow: auto; } .b-matrix { position: relative; margin: 0 30px 25px 0; padding: 3px; border-left: 2px solid #444; border-right: 2px solid #444; position: relative; float: left; } /*------- [ ] -------*/ .b-matrix_border:before, .b-matrix_border:after, .b-matrix__table_border:before, .b-matrix__table_border:after { position: absolute; display: block; width: 8px; height: 2px; background: #444; content: ''; } .b-matrix_border:before { top: 0; left: 0; } .b-matrix_border:after { top: 0; right: 0; } .b-matrix__table_border:before { bottom: 0; left: 0; } .b-matrix__table_border:after { bottom: 0; right: 0; } /*----- // [ ] // -----*/ .b-matrix__table input { display: block; width: 40px; height: 40px; margin: 5px; border: 1px solid #ddd; text-align: center; } 
     <section class="main"> <div class="b-matrix b-matrix_border" data-name="c"> <table class="b-matrix__table b-matrix__table_border"> <tr> <td> <input type="text" value="" disabled /> </td> <td> <input type="text" value="" disabled /> </td> </tr> <tr> <td> <input type="text" value="" disabled /> </td> <td> <input type="text" value="" disabled /> </td> </tr> <tr> <td> <input type="text" value="" disabled /> </td> <td> <input type="text" value="" disabled /> </td> </tr> <tr> <td> <input type="text" value="" disabled /> </td> <td> <input type="text" value="" disabled /> </td> </tr> </table> </div> <div class="b-matrix b-matrix_border" data-name="a"> <table class="b-matrix__table b-matrix__table_border"> <tr> <td> <input type="text" value="" /> </td> <td> <input type="text" value="" /> </td> </tr> <tr> <td> <input type="text" value="" /> </td> <td> <input type="text" value="" /> </td> </tr> <tr> <td> <input type="text" value="" /> </td> <td> <input type="text" value="" /> </td> </tr> <tr> <td> <input type="text" value="" /> </td> <td> <input type="text" value="" /> </td> </tr> </table> </div> </section> <section class="main"> <div class="b-matrix b-matrix_border" data-name="b"> <table class="b-matrix__table b-matrix__table_border"> <tr> <td> <input type="text" value="" /> </td> <td> <input type="text" value="" /> </td> </tr> <tr> <td> <input type="text" value="" /> </td> <td> <input type="text" value="" /> </td> </tr> </table> </div> </section>