Documentオブジェクト
windowオブジェクトのプロパティの1つ
HTML要素を抽象化したもので
タグや属性にアクセスするプロパティを持つ。
DOM：Document Object Model
HTMLの文書構造をオブジェクトの集まりとしてみなす考え方のこと
主要プロパティ
head要素を返す
document.head
body要素を返す
document.body
ページのタイトルを返す
document.title
ページのURLを返す
document.URL
現在のページのひとつ前のURLを返す
document.referrer
クッキーの内容を返す
document.cookie
例)
console.log(document.head);
// -> <head>...</head>
console.log(document.URL);
// -> https://qiita.com/
主要メソッド
文書全体から引数で指定したCSSセレクターに
一致する最初の要素を取得して返す。
戻り値はNodeListオブジェクト
document.querySelector("CSSセレクター")
一致するすべての要素を取得して返す
戻り値はNodeListオブジェクト
document.querySelectorAll("CSSセレクター")
例)
最初のh1要素を変数hに取得
let h=document.querySelector("h1");
HTMLで指定したID属性comTotal要素のテキストに
getTotalメソッドで取得した値を入れる
※ID属性は#をつける
document.querySelector("#comTotal").innerText=getTotal(comCards);
NodeListオブジェクト
DOMのオブジェクトを配列のようにまとめたもの
ノードの個数を表すlengthプロパティがある。
例)
aタグの要素すべて（リンク）をlinksに取得
let links=document.querySelectorAll("a");
ノードをすべて出力
for(let i=0;i<links.length;i++){
console.log(links.item(i));
}
配列と同じで要素番号は0からなので
0番目から、linksの要素数まで繰り返すことで
要素すべてを出力できる。
itemメソッドに引数で番号を指定してリストの中身が取り出せる。
HTMLElementオブジェクト
Element:要素
主要プロパティ
要素のID属性を返す・設定する
id
要素内のHTMLを文字列で返す・設定する
innerHTML
要素のタグを含むHTMLを文字列で返す・設定する
outerHTML
要素内のテキストを文字列で返す・設定する
innnerText
要素内部の高さ
clientHeight
要素内部の幅
clientWidth
直前の要素を返す
nextElementSibling
直後の要素を返す
previous：先の
Sibling：兄弟
previousElementSibling
要素の最初の子要素を返す
firstElementChild
要素の最後の子要素を返す
lastElementChild
例)tableの要素を変数tbに入れる
let tb=document.querySelector("table");
①プロパティfirstElementChildにより
tableの最初の要素を返す
console.log(tb.firstElementChild);
// -> <tbody>...</tbody>
tbody：table本体の要素のこと
②プロパティinnerHTMLにより
table内のHTMLを返す
console.log(tb.innerHTML);
// -> <tbody><tr>省略</tr></tbody>
③プロパティouterHTMLにより
tableタグ含むtable内のHTMLを返す
console.log(tb.outerHTML);
// -> <table><tbody><tr>省略</tr></tbody><table>
④innerTextを用いてID属性myTotalの要素に10をセット
セットする値が文字列の時は""で囲む
document.querySelector("#myTotal").innerText=10;
主要メソッド
属性keyの値を返す
getAttribute(key)
属性keyに値valueを設定
setAttribute(key,value)
子孫ノードから、引数で指定したCSSセレクタに一致する
最初の要素を取得して返す
querySelector(selector)
子孫ノードから、引数で指定したCSSセレクタに一致する
すべての要素を取得して返す
querySelectorAll(selector)
先祖ノードから引数に指定したCSSセレクタに該当する
最も近い位置にある要素を返す
closest(selector)
引数に指定したノードを子ノードの最後に追加
appendChild(node)
引数に指定したノードを直前に指定する
insertBefore(node)
引数に指定したノードを子ノードから削除
removeChild(node)
要素のイベントを扱うハンドラを登録する
addEventListener(event,handler)
例)
windowオブジェクトのloadイベント
ページの読み込みが完了したとき、newView関数を実行
window.addEventListener("load",newView);
ボタンをclickしたとき、clickReset関数を実行
(ボタンにID属性resetを設定)、
document.querySelector("#reset").addEventListener("click",clickReset);
参考書籍