- 締切済み
【JavaScript】DOMのノードの数え方
以下のHTMLに対してその下のJavaScriptを記述しました。 コンソールについている番号をその下のHTMLに書き込んでみました。 ▶は改行、もしくはタブによる空白をあらわしています。 自分が学習した範囲（添付画像）だと、全ての<li>～<li>の後に改行やタブによる空白もカウントされるものと思っていました。 一番下に自分で書いてみた番号とNodeListの番号の対応は合っていますか？ １つ目、あるいは２つ目の</li>の後の改行やタブによる空白は含まれないのでしょうか？ NodeListの一番最初と、一番最後は”text”になっていますが、これは改行を示しているのでしょうか？ それともタブ等による空白を示しているのでしょうか？ いずれにせよ最初と最後だけに"text"がついているのが腑に落ちません。 DOMのノードの数え方について初心者にも分かりやすいように教えていただけないでしょうか？ よろしくお願いします。 (HTML) <ul> <li>item</li> <li>item</li> <li>item</li> </ul> (JavaScript) const ul = document.querySelector('ul'); const list = ul.childNodes; console.log(list); ---------------------------------------------------- (コンソール:結果) NodeList(7) [text, li, text, li, text, li, text] 0: text 1: li 2: text 3: li 4: text 5: li 6: text length: 7 __proto__: NodeList ↓↑ <ul> ▶(0)<li(1)>item1(2)</li> <li(3)>item2(4)</li> <li(5)>item3(6)</li>▶(7) </ul>
- blueletter12345
- お礼率27% (26/94)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- asciiz
- ベストアンサー率70% (6660/9439)
関連するQ&A
- JavaScript のTypeError
Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at add というエラーで困っています。 初心者向け動画 https://www.youtube.com/watch?v=E08jeQBa1D0 さんでそのままのコードを打ったつもりですが、「テキストボックスに文字を入れて、エンターを押すと値がリストに追加されていく」という動きができません。 コードはこちらです。（動画のままを打ったつもりです） [HTML] <body class="bg-light"> <div class="container w-75"> <h1 class="text-center text-info my-4"> todo</h1> <form id="form" class="mb-4"> <input type="text" id="input" placeholder="todoを入力" autocomplete="off" class="form-control"> </form> <ul class="list-group text-secondary"></ul> </div> <script src="index.js"></script> </body> [JS] const form = document.getElementById("form") const input = document.getElementById("input") const ul = document.getElementById("ul") form.addEventListener("submit", function (event) { event.preventDefault() console.log(input.value) add() }) function add() { const li = document.createElement("li") li.innerText = input.value li.classList.add("List-group-item") ul.appendChild(li) //ここでエラー input.value = "" } HTMLを生成するときにulがなくて追加できない、という意味であってるでしょうか。 何が原因なのか知りたいです。
- ベストアンサー
- JavaScript
- javascript(DOM)でIDとテキストノードを取得する方法
下記のことをDOMを使ってやりたいと思っているのですが、ちょっとできないので教えていただきたいです。 ［HTML内での記述］ <h2 id="apple">りんご</h2> <p>...</p> <h2 id="grape">ぶどう</h2> <p>...</p> <h2 id="orange">みかん</h2> <p>...</p> <h2 id="peach">もも</h2> <p>...</p> 上記HTMLから<h2>内のid名とテキストを取得して、下記のようなリストにしたいです。 （<p>...</p>の部分はどうでもよいです。） <ul> <li><a href="#apple">りんご</a></li> <li><a href="#grape">ぶどう</a></li> <li><a href="#orange">みかん</a></li> <li><a href="#peach">もも</a></li> </ul> 要するに、見出しを取得してページ内リンクを作りたいのです。 DOMで、getElementByIdとか使って、、と何となくは分かるのですが、完成させるまでには至っていません。 ご教授いただければと思います。
- ベストアンサー
- JavaScript
- JavaScriptでタグを含む要素が返ってくる
const base = document.getElementById('parent'); const children = base.children; console.log(children[0]); console.log(children[1]); console.log(children[2]); 下に記述したHTMLの<ul>の子要素を取得するために上記のように記述しました。この場合添付画像のようなタグを含めた要素が返ってきます。タグの中に書かれた内容を取得するにはtextContentを使えば良いようです。 初心者なもので、 <タグを含めた要素を取得してどんな使い道があるのでしょうか？ 意味がよくわかりません。 使い慣れた方、これの使い道を教えてください。宜しくお願いいたします。 <ul id="parent"> <li id="first">1番目</li> <li id="second">2番目</li> <li id="third">3番目</li> </ul>
- 締切済み
- JavaScript
- javascriptとhtmlでテーブル
あの、分からないことがあります。 <UL>を使って表示したリストを今度はテーブルに埋め込みたいのですがどのようにしたら良いでしょうか？strUniversityで貯めた文字列をテーブルのヘッダーにしてfor文でarray内の値をULで表示してそれぞれをそれぞれのセルに入れて一つのテーブルを作りたいのですが失敗ばかりしてしまいます。 どのようにしたら良いでしょうか？宜しくお願いします。スクリーンショットとソースは以下に。 <HTML> <HEAD> <LINK href="global.css" rel="stylesheet" type="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <title></title> </HEAD> <BODY> <script type="text/javascript"> document.title="Courses" //Print document title var strUniversity = "State University"; var arrCourses =new Array(5); arrCourses[0]="English"; arrCourses[1]="Music"; arrCourses[2]="Geography"; arrCourses[3]="Information Systems"; arrCourses[4]="Chemistry"; document.write(strUniversity.toUpperCase()+"<br/>"); for(i=0; i<5; i++) { document.write("<UL><LI>"+arrCourses[i]+"</LI></UL>"); } </script> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 【JavaScript】でラベル名を取得したい
【JavaScriptで】セレクトボックスからラベル名を取得する方法 下に書いたHTMLのセレクトボックスからラベル名を取得するにはどうしたらよいのでしょうか？ HTMLにvalue値をつけずにこのように記述すると、下記のJavaScriptの記述でラベル名が取得できます。 ***************** <select> <option>1月</option> <option>2月</option> <option>3月</option> </select> https://imgur.com/T8W1Umy ***************** ところが下記のようにvalueに値をつけるとvalueの値が出力されラベル名は表示されません。 都道府県名や名前など各々valueの値と、ラベル名が異なることはよくあることと思います。 以下に記述したHTML（valueの値がついたもの）のセレクトボックスからラベル名を取得するにはどのように記述したら良いのでしょうか？ 分かる方いらっしゃいましたら教えて下さい。宜しくお願いします。 （JS） 'use strict'; { document.querySelector('button').addEventListener('click', () => { const li = document.createElement('li'); const month = document.querySelector('select'); li.textContent = month.value; document.querySelector('ul').appendChild(li); }); } ---------------------------------------- （HTML） <select> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> </select> <button>Add!</button> <ul> </ul>
- ベストアンサー
- JavaScript
- jQueryでプルダウンメニュー
jQueryでプルダウンメニューを作ろうと思いまして、 とりあえず、リストにカーソルを合わせるとネストしたリストが表示されるようにしてみましたが、 うまく動きません。どうしてでしょうか？ ソースです↓ <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> google.load("jquery", "1"); </script> <script type="text/javascript"> $(function(){ $(ul li).hover( function(){ $(this).children(ul).show();}, function(){ $(this).children(ul).hide();} ); }); </script> </head> <body> <ul> <li>MENU <ul style="display:none;"> <li>sub-MENU1</li> <li>sub-MENU2</li> </ul> </li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- 文字の大きさを変更するjavascriptについて
文字の大きさを変更するjavascriptについての質問です。 現在以下のようなスクリプトを使用しているのですが、 IE６では動作しますがFirefox2.0では動きません。 原因、アドバイス等あればご指摘お願いします。 *****このスクリプトを外部ファイルとして読み込んでいます***** function larger(){ content_area.style.fontSize="14pt"; } function standard(){ content_area.style.fontSize="12pt"; } function smaller(){ content_area.style.fontSize="9pt"; } *********************************************************** *****head内の外部js読み込み部分***** <script type="text/JavaScript" src="common/js/fontsize.js"></script> ************************************ *****body内のjavascript呼び出し部分***** <ul> <li class="text_large"><a href="javascript:larger()">文字サイズ大</a></li> <li class="text_mid"><a href="javascript:standard()">文字サイズ中</a></li> <li class="text_small"><a href="javascript:smaller()">文字サイズ小</a></li> </ul> **************************************** よろしくお願いします。
- ベストアンサー
- JavaScript
- javascript INNERHTMLについて
javascriptのINNERHTMLについて教えてください。 親画面から子画面を呼び、引数で下記のようなHTMLを渡します。 "<ul><li>abc</li><li>def</li></ul>" この引数を子画面で受け取りINNERHTMLに入れて表示したいのですが ・abc ・def と、ならず abc def というように表示されてしまいます。 引数は親画面で設定した内容によって代わります。 テーブルタグや斜体、太字、下線はうまく表示できるのに <ul><ol>は ・ や 1． 2． が外れて表示されてしまいます。 何か回避する方法はないでしょうか？
- 締切済み
- JavaScript
- <li>タグのクリックされたテキストを取得する方法
HTMLのリストの要素をクリックされた時にそのテキストを取得する方法が知りたいです。 取得したテキストを別枠に表示したいです。 jqueryを利用せずjavascriptのみで実装する事は可能でしょうか？ <ul> <li>文字１</li> <li>文字２</li> <li>文字３</li> </ul>
- 締切済み
- JavaScript
- <ul>タグの上の空白って消せますか？
<ul><li></li></ul>で囲まれた部分の上に空白ができてしまいます。 CSSでいろいろ試してみましたが、どうしても空白がきえませんでした・・・ ためしに<ul></ul>をとっちゃったんですが・・・これはまずいですよね？ どうすれば空白を消す（指定）することができるのでしょうか？ また、同時に<li>で囲まれた画像の下の空白や左位置のずれもとりたいのですが・・・ どうかよろしくお願いいたします。 ＝＝＝＝＝タイトル画像＝＝＝＝＝＝ テキストテキストテキスト ■■■（画像）（画像） テキストテキストテキスト ■■■（画像）（画像） テキストテキストテキスト ■■■（画像）（画像） このような感じでレイアウトしたいのですが、どうしても■の画像の一番上の部分に空白ができて、■同士が重なってしまいます。 ■同士が重なるのはmargin rightを指定すればなんとかなるのですが、 これもできれば他の方法があれば教えていただきたいです・・・ どうかよろしくお願致します。
- ベストアンサー
- HTML
