queryselectorAll(複数）をfor文で同時処理

Question

やりたいこと：

queryselectorAllが複数あり、これをfor文で同時処理を行いたい。
(queryselectorAll('textarea'),queryselectorAll('.ta-parent)

試してみたこと：

・使用するqueryselectorAll('textarea'),queryselectorAll('.ta-parent)を配列にする。
・分割代入を使用して、for文で処理しようとした。

該当箇所：
const paChild = [...iterable, ...taParent];

for (const [elmTa, taChild] of paChild) {　～

エラー内容：

上記を行ったがエラーがでた。
エラー箇所：iptaParent.appendChild(taChild);　処理部分の３か所目
エラー内容：
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node
(appendChild使うときは、Nodeじゃないと不可)

まとめ：

・queryselectorAll複数をfor文で同時処理する為に、queryselectorAllを配列にした。
・分割代入を使用してfor文で処理しようとした(コード参照)
・for文の変数部分(taChild)はappendechildを使用している為、ノードでないと処理できない(配列は不可)
・しかし、配列処理をしないとqueryselectorAll複数のセレクターは複数同時処理できない

queryselectorAllが複数ある時、for文にて同時処理するにはどうすれば宜しいか、
何卒ご教示お願い致します。

コード：

const elmText = document.querySelector('.elm-text');
            
            elmText.onclick = () => {
                
                const iptaAll = document.querySelectorAll('.ipta-parent');
                const iterable = document.querySelectorAll('textarea');
                const taParent = document.querySelectorAll('.ta-parent');
                const paChild = [...iterable, ...taParent];

            if( checkAll.length == 0) {
                for (const [elmTa, taChild] of paChild) {
                    const iptaParent = document.createElement('div');
                    iptaParent.classList.add('ipta-parent');
                    iptaParent.style.position = 'absolute'; 
                    
                    const ipCheck = document.createElement('input');
                    ipCheck.setAttribute('type','checkbox');
                    ipCheck.classList.add('ip-check');
                    ipCheck.style.position = 'absolute';
                    ipCheck.style.left = elmTa.getBoundingClientRect().left - cRect().left -15 + 'px';  ←処理部分
                    ipCheck.style.top = elmTa.getBoundingClientRect().bottom - cRect().top -15 + 'px';  ←処理部分
                    
                    element.appendChild(iptaParent);
                    iptaParent.appendChild(taChild);　←処理部分、エラー箇所
                    iptaParent.appendChild(elmTa);
                } 

                } else if (checkAll.length == iterable.length ||
                           checkAll.length < iterable.length) { 
                    for (const elmTa of iterable) {
                        taParent.insertBefore(elmTa, null);
                    }
                    for (const ipta of iptaAll) {
                        ipta.remove();
                    }
                   let t = e.target; 
                }            
            }

Comments

[int32_t]

iterable と taParent をそれぞれ先頭から1つずつペアで処理したい、という意味ですか?

[rei78087487]

はい、その通りです。
一応例としまして、
const iterable = document.querySelectorAll('textarea');　
const taParent = document.querySelectorAll('.ta-parent');

ipCheck.style.left = elmTa(textarea１).getBoundingClientRect().left - cRect().left -15 + 'px'; ipCheck.style.top = elmTa.(textarea１)getBoundingClientRect().bottom - cRect().top -15 + 'px';
iptaParent.appendChild(taChild(taParent 1);

まず先頭から１つずつ処理、
同様に
ipCheck.style.left = elmTa(textarea 2).getBoundingClientRect().left - cRect().left -15 + 'px'; ipCheck.style.top = elmTa.(textarea 2)getBoundingClientRect().bottom - cRect().top -15 + 'px';
iptaParent.appendChild(taChild(taParent 2);

処理するタイミングは同時に１つずつ処理されるようにします。

Answer 1

添字で回せばよさそうです。

for (let i = 0; i < iterable.length /* または taParent.length? */; ++i) {
  const elmTa = iterable[i];
  const taChild = taParent[i];
  ...

Comments

[rei78087487]

回答ありがとうございます。
教えて頂いた通りできました。
本当にありがとうございます。
同じfor文でも使い用途が違うのは認識しておりましたが、そのfor文でしか処理できない方法もあるのですね。
教えていた内容でもできたから、試しにfor ofでも出来るのではと思い試してみましたが、やはりfor of文はオブジェクトを複数扱う事が出来ませんでした。
出来たとしても配列を使用した方法になるので、今回の様にノードを複数扱う場合は使用出来ない事が今回教えて頂いて知ることができました。
改めてありがとうございます。

Answer 2

普通にカンマ区切りで複数のセレクタが指定できると思いますが

<textarea></textarea>
<textarea></textarea>
<div class="ta-parent"></div>
<div class="ta-parent"></div>
<script>
console.log(document.querySelectorAll('textarea,.ta-parent'));
</script>

Answer 3

こちらの記事が参考になるかと思います。
querySelectorAll()で取得した要素をeachで回す５つの方法

追記：質問文を誤読していました。他の方の回答のとおり、カンマ区切りでセレクタを複数指定するのが適切なように思います。