取得したHTML要素のタグ名を文字列型で取得したい

Question

HTMLCollectionから取得した要素のタグ名を文字列型で取得したい。

---

親要素<div>の子要素のタグ名を文字列型で取得する方法が不明。

function getChildElements() {
    const parentDiv = document.getElementById('parentDiv');
    const childElements = parentDiv.children;

    for (let i = 0; i < childElements.length; i++) {
        console.log(childElements[i]);
    }
}

const button = document.getElementById('getChildElementsButton');
button.addEventListener('click', getChildElements);

<div id="parentDiv">
    <h2>タイトル</h2>
    <p>これは段落です。</p>
</div>
<button id="getChildElementsButton">子要素を取得</button>

その他の質問（修正前）

詳細は編集履歴をご確認ください。

namedItem()によって取得された値についてalert()が機能しないのはなぜですか？

 alert(`UL.namedItem(next): ${UL.namedItem(next)}`);//next is not defined

Comments

[K_3578]

どうでも良いけどわざわざ機械翻訳で日本人が多いteratailで質問するより
Stack overflowに質問投げればいいんじゃないの？とは思う
勿論、このままだとマルチポストになるのでクローズするか、削除するべきだが

[3_April_2021]

このコメントは、回答記載済みの内容だったため編集されました。

[3_April_2021]

このコメントは、解決済みの内容だったため編集されました。

[3_April_2021]

この質問は、gasのウェブアプリ環境で生じた問題について尋ねるために投稿されました。質問の時点で原因がわからなかったためGoogle Apps Scriptタグに投稿されましたが、原因がJavaScript側であると判断されたためタグが変更されました。

Answer 1

内容についてより詳細な情報を確認する方法はありますか？

「より詳細な情報」とは何を意図したものでしょうか。HTMLCollectionのままでも、添字参照やlengthの取得は可能です。

以下の理由から、不適切な記述が含まれる可能性を懸念します。

何を問題視しているのかがわかりません。

---

UL.namedItem(next);は、nextという変数を参照していますので、それがなければ正常に動作しません。

Comments

[maisumakun]

「どうなると考えたものが実際にはこのように動作している」など、問題点をもっと具体的に書いていただけませんでしょうか？

[maisumakun]

デバッグ用には、alertではなくconsole.logを使うのが適当かと思います。

[maisumakun]

「const UL = document.getElementById("UL").children;」で取得できるのは、あくまで<div id="UL">の子供（<ul>が1つ）のHTMLCollectionです。<ul>の子供ではありません。

[3_April_2021]

質問が修正されました (2024/7/5)。alertの使用に関する問題は解決され、console.logに変更されました。ここに存在したのは、alertを使用する理由です。

[maisumakun]

すみません、何が疑問なのか、何を得たいのか、自分の考えた動作と異なる場所はどこなのかを具体的に書いていただくことはできませんか？

（何を疑問視しているのかが判明しないために、これ以上のコメントができない状態です）

[3_April_2021]

質問が修正されました (2024/7/5)。この問題は解決されたため、編集しました。

[3_April_2021]

さらに何かの反応を求める場合 、あなたは何に何を強いられているのかについて具体的にする必要があります。 それは、おそらく共有されていません。

[maisumakun]

日本語（から/へ）翻訳する時に、情報の損失が生じているように思われます。

（日本語以外の言語でやり取りするほうが得意なのであれば、他のサイトを使うことをおすすめします）

[K_3578]

>maisumakunさん
以前の質問でもどこか、機械翻訳したようなコメントばかりで対話を試みるのが難しそうでした。

[maisumakun]

If you use machine translation in reading/writing Japanese, you should use other site in your native language.

It seems some degree of information is lost during translation.

[3_April_2021]

一連の行動が評価の催促を意味する場合、評価を急ぐ理由を説明すべきです。進展がない限り、私からの評価は行えません。別の問題について話し合いたい場合は、別の場所に移動してください。それ以上の行動は返答とみなしません。

[maisumakun]

> 一連の行動が評価の催促を意味する場合

全くその意図はないです。単純に、「質問内容がはっきり伝わっていない」という話です。

[3_April_2021]

重要なのは、現時点では、追加情報の催促や回答一般に関する助言を求めている事実はないということです。 つまり、あなたはこの質問についてもう心配する必要はないのです。 申し訳ありませんが、この公的な場ではこれ以上何も言いたくありません。
なおあなたの"UL.namedItem（next）"に関する指摘が正しければ（今それを含めたチェックが行われています）、あなたの回答は少なくとも高く評価されます。それはあなたが間違いなくコードに対する助言を行ったことを意味するからです。ただし、念のために言っておくと、その評価が行われるのは先のことです。

[3_April_2021]

私は確かに以下のリクエストを行いましたが、キャンセルさせていただきます。 あなたはそれに答える必要はありません。
>さらに何かの反応を求める場合 、あなたは何に何を強いられているのかについて具体的にする必要があります。

[3_April_2021]

私は今、この問題解決に関連するあなたの指摘を理解し、問題解決に役立てられたと感じています。 No.11の疑問に何らかの形で片をつけたら、最終的なコードと数か所への小さな修正を加えてこの質問を終了する予定です。ご協力に感謝します。

指摘内容と再利用性を考慮し、最も重要な質問に焦点を当てた質問に修正しました (2024/7/5)。あなたの回答と矛盾しないように、あなたの回答部分は残されました。

Answer 2

HTML要素のタグ名を取得するだけならtagNameプロパティが適しているかもしれません。目的によっては、toStringメソッドが適している場合があります。

console.log(childElements[i].tagName.toLowerCase());

Comments

[3_April_2021]

解決された問題に関連するコメントを編集しました。