2021年3月の記事一覧
JS勉強記⑨ノードの削除
removeChildメソッドを使って指定した子ノードを削除する。（＝親）
例題複数の項目が存在するリストと削除用ボタンを設置。ボタンをクリックする度に一番下の項目から順に削除される。
①HTMLでリスト、ボタンを設置。bodyは以下の通り。
<body> <ul id="lists"> <li>あか</li> <li>みどり</li> <li>きいろ</li>
JS勉強記⑧ノードの置き換え
HTML既に存在するノード（要素／タグ、テキスト）をJSを使って新しいノードに置き換える処理。
例題HTMLで「古い要素です」という項目のリスト・「置換」ボタンを配置。ボタンをクリックするとリストの項目の内容が新しいものに置き換えられる。
①HTMLで上記のリスト・ボタンを配置。bodyは以下の通り。
<body> <ul> <li id="oldList">古い要素です</li
JS勉強記⑦ノードを追加
HTMLにJSを使ってノード（新しい要素／タグ、テキスト）を組み込む処理。
例題HTMLで空のリスト・ボタンを配置。ボタンをクリックするとリストの項目が追加される。
①HTMLで空のリスト・ボタンを配置。bodyは以下の通り。
<body> <ul id="lists"> </ul> <input type="button" value="追加" onclick="append(
JS勉強記⑥getElementsByメソッド
タグ名をキーに要素を取得指定したHTMLタグ名をキーに要素を取得する。基本構文は以下の通り。
document.getElementsByTagName('タグ名');
※指定したタグ名が存在しない場合は空のHTMLCollection([])を返す。nullではない！
※HTMLCollectionとは配列に似たデータのこと。詳しくは後述。
例題複数の要素とボタンを配置。タグ名がdivの要
JS勉強記⑤DOMとは／idをキーに要素を取得
DOMとはDOM（Document Object Model）とは「JSで記述されたプログラムからHTML/XMLにアクセスしてWebページを動的に操作する」方法。DOMツリーとはHTML/XMLをツリー構造で表現したもの。<body>タグの下に<h>タグがある、という形を指す。この時の各オブジェクト（<body>、<h>等）のことをノードと言う。
「ブラウザオブジェクト」という階層構造の中の「