idを指定してHTMLの要素を選択する
getElementById("id名")でidを指定することにより、任意の要素を選択することができる
//id="playerName"の要素の内容を取得
let name = document.getElementById("playerName").innerHTML;
//id="playerName"の要素に"ICHIRO"という文字を代入する
document.getElementById("playerName").innerHTML = "ICHIRO";クラス名を指定してHTMLの要素を選択する
getElementsByClassName("class名")でclassを指定することにより、任意の要素を選択することができる。
同一クラスが複数存在する可能性があるので、"Elements"(複数形)になっている。
返り値は配列なので、インデックスを指定する必要がある。
//１番目に現れるclass="profile"要素の内容を取得
let prof = document.getElementsByClassName("profile")[0].innerHTML;
//2番目に現れるclass="profile"要素に"ICHIRO"という文字を代入する
document.getElementsByClassName("profile")[1].innerHTML = "ICHIRO";要素名を指定してHTMLの要素を選択する
getElementsByTagName("要素名")で要素を指定することにより、任意の要素を選択することができる。
同一要素が複数存在する可能性があるので、"Elements"(複数形)になっている。
返り値は配列なので、インデックスを指定する必要がある。
//1番目に現れるh1要素の内容を取得
let prof = document.getElementsByTagName("h1")[0].innerHTML;
//2番目に現れるh1要素に"ICHIRO"という文字を代入する
document.getElementsByTagName("h1")[1].innerHTML = "ICHIRO";CSSを操作する
getElementById()などで要素を取得してからstyleオブジェクトを利用する。
//文字色を設定する
document.getElementById("playerName").style.color = "#00FF00";
//フォントサイズを設定する
document.getElementById("playerName").style.fontSize = "2em";
HTMLの要素を追加する
createElement()で要素を作り、appendChild()で追加する。
//追加するdiv要素を作る
let newElement = document.createElement("div");
//表示する文字列を格納
newElement.innerHTML = "Chanson V Magic";
//追加する
document.getElementById("test").appendChild(newElement);HTMLの要素を削除する
removeChild()で要素を削除できる
//削除対象要素を取得
let target = document.getElementById("test");
//削除する(削除された要素のオブジェクトを格納しておけば復活できる)
let removed = document.body.removeChild(target);
//削除した要素を別に位置に追加
document.getElementById("test2").appendChild(removed);親要素を見つける
parentNode()を使う
//親要素を取得
let parent = document.getElementById("childSpan").parentNode;
HTMLの要素を置き換える
replaceChild()で要素を置き換える
// ID も属性も内容も持たない空要素を生成
let sp1 = document.createElement("span");
// 生成したノードに id 属性 'newSpan' を付与
sp1.setAttribute("id", "newSpan");
// テキストノードを生成
let sp1_content = document.createTextNode("新しい span 要素");
// 生成したテキストノードを先の空要素の子ノードとして配置
sp1.appendChild(sp1_content);
// 置換前に参照を代入
let sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード
let parentDiv = sp2.parentNode; // 置換対象ノードの親要素
// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換
parentDiv.replaceChild(sp1, sp2);
CSSセレクタで要素を選択する
querySelector()は条件を満たしたもののうち最初の要素を取得
querySelectorAll()は条件を満たした全ての要素を取得
//クラス "myclass" を持つ文書内の要素のうち、最初のものを取得
let el = document.querySelector(".myclass");
//文書内のすべての p要素の NodeList を入手
let matches = document.querySelectorAll("p");
同階層の兄弟要素を見つける
previousSibling()は、指定のノードの親ノードの childNodes リストの中で直前のノードを返す。また、指定のノードがそのリストの中で先頭の場合は null を返す。
nextSibling()は、指定したノードの親の子ノードリスト内ですぐ次にあるノードを返し、指定したノードがリストで最後の場合は null を返す。
let pre = document.getElementById("b2").previousSibling;
let nxt = document.getElementById("b2").nextSibling;
