How to get width of a table header cell in JavaScript via DOM?

Question

I have the access to this DOM node in temp1.$el.

And here is the content which the above variable has:

<table id="__BVID__730" aria-busy="false" aria-colcount="10" aria-rowcount="14" class="table b-table table-striped table-hover">

    <thead class="thead-class-hidden">

        <tr>

            <th aria-colindex="1" class="">

                <div style="white-space: nowrap;">

                    Header1 Name

                </div>

            </th>

            <th aria-colindex="2" class="">

                <div style="white-space: nowrap;">

                    Header2 Name

                </div>

            </th>

        </tr>

    </thead>

    <tbody class="">

        <tr class="">

            <td aria-colindex="1" class="">

                <div style="white-space: nowrap;">

                    Row1 Column1 Value

                </div>

            </td>

            <td aria-colindex="2" class="">

                <div style="white-space: nowrap;">

                    Row1 Column2 Value

                </div>

            </td>

        </tr>

    </tbody>

</table>

I'm working in plain JavaScript and what I need to get is the width of the element under:

 table thead tr th (child-1)

 table thead tr th (child-2)

I tried many things like:

temp1.$el.tHead.firstElementChild.children[0].offsetWidth

temp1.$el.tHead.firstElementChild.children[0].clientWidth    

temp1.$el.tHead.firstElementChild.children[0].firstElementChild.offsetWidth

temp1.$el.tHead.firstElementChild.children[0].firstElementChild.clientWidth

But all of them are not working. The table thead tr th widths depends of the actual content inside of them, and I need to take the widths and later to apply them on a different table.

I managed to get them to the variable temp1.$el but from here, I'm not able to success to get the widths that I need.

JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

You could get this done using the ParentNode property children.

The ParentNode property children is a read-only property that returns a live HTMLCollection which contains all of the child elements of the node upon which it was called.

var element = document.getElementById('__BVID__730');

console.log(element.tHead.children[0].children[0].offsetWidth)

<table id="__BVID__730" aria-busy="false" aria-colcount="10" aria-rowcount="14" class="table b-table table-striped table-hover">

    <thead class="thead-class-hidden">

        <tr>

            <th aria-colindex="1" class="">

                <div style="white-space: nowrap;">

                    Header1 Name

                </div>

            </th>

            <th aria-colindex="2" class="">

                <div style="white-space: nowrap;">

                    Header2 Name

                </div>

            </th>

        </tr>

    </thead>

    <tbody class="">

        <tr class="">

            <td aria-colindex="1" class="">

                <div style="white-space: nowrap;">

                    Row1 Column1 Value

                </div>

            </td>

            <td aria-colindex="2" class="">

                <div style="white-space: nowrap;">

                    Row1 Column2 Value

                </div>

            </td>

        </tr>

    </tbody>

</table>

Run code snippetExpand snippet