HTMLCollectionとそのMethodを理解するために書いたコードへの助言と訂正が欲しいです

Question

1. HTMLCollectionに含まれる要素の情報を文字列として取得する方法はありますか？
2. UL.item(1)が[object HTMLUListElement]を返さないのはなぜですか？
3. namedItem()によって取得された値についてalert()が機能しないのはなぜですか？
4. UL.namedItem(next)とUL.namedItem("back")の期待値はなんですか ?

<button type="button" onclick="buttonClick()">Button</button>
<div id="UL">
　<ul>
  　<li name = "next">li1</li>
  　<li name = "back">li2</li>
　</ul>
</div>

function buttonClick() {
　const UL = document.getElementById("UL").children;
  alert(`UL: ${UL}`);// [object HTMLCollection]
  for(let i=0;i<3;i=i+1){alert(`UL.item(${i}): ${UL.item(i)}`);}//[object HTMLUListElement], null, null
  alert(`UL.namedItem(next): ${UL.namedItem(next)}`);//next is not defined
  alert(`UL.namedItem("back"): ${UL.namedItem("back")}`);
}

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]

テスト環境が通常と異なります...console.logとアラートが異なる結果を持つ場合は、じきに判明するでしょう。あなたはこの点で焦ってはいけません。

[maisumakun]

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

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

[3_April_2021]

2021/04/18 13:47は、残念ながら、それは判明しませんでした、私はこれについての疑問を忘れていました。 質問が編集されました。

[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の疑問に何らかの形で片をつけたら、最終的なコードと数か所への小さな修正を加えてこの質問を終了する予定です。ご協力に感謝します。

Answer 2

1. HTMLCollectionの要素数はプロパティlengthで取得できますが、どの要素を取得するかを知る方法は見つかりませんでした。 ただし、Firefox Webコンソールの場合、HTMLCollection{0:ul, length:1}のような形式で確認することができます。
2. このitemはHTMLCollectionのメソッドであり、そのCollectionの構成要素を返します。 おそらく下位要素の取得方法だと勘違いしていたのでしょう。
3. UL.namedItem(next)の取得時に処理が停止していたようです。 maisumakunユーザによって指摘されている通り、存在すらしていないnextを参照しようとするため、この文は実行できません。
4. [object HTMLLIElement]を疑っていましたが、このメソッドでそれを取得するための解決策を見つけることができませんでした。このために、querySelector（）によるこの期待値の取得を確認しました。

alert(document.querySelector("li[name='next']"));//[object HTMLLIElement]
alert(document.querySelector("li[name='back']"));//[object HTMLLIElement]

Comments

[3_April_2021]

「Firefox Webコンソール」は「Firefox で利用できるウェブ開発ツール」(https://developer.mozilla.org/ja/docs/Tools)で利用できるものを指しています。他のウェブブラウザにも同様のツールがあるようですが、それらの試験や確認は行っていません。