記事一覧
JS勉強記⑩DOM操作の演習
演習『JS勉強記⑦ノードの追加』を改修して、テキストボックスに入力した文字列が最後尾に追加されていく処理。
『ノードの追加』で作成したコードは下記の通り。
function append() { var li = document.createElement('li'); var text = document.createTextNode('追加文字列'); li.appendChild(t
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>等）のことをノードと言う。
「ブラウザオブジェクト」という階層構造の中の「
JS勉強記②繰り返し処理
forfor (var i = 1; i <= 3; i++){ console.log(i) }
変数iの値を1から3まで出力。
iの初期条件（i=1からスタート）、iの条件（i <= 3）、iに1をインクリメント（i+1）。
その結果をコンソールに出力し続ける。i=4になった時点で処理中止。
whilevar j = 1; while (j <= 3) { console.log(j)
JS勉強記①条件分岐・インクリメントと演算子
if / else if
var x = 100; if (x >= 100) { console.log('100以上の値です'); } else { console.log('100未満の値です'); } var y = 80; if (y >= 90) { console.log('A'); } else if (y >= 80) { console.log