要素の取得
| 式 |
意味 |
| document.getElementById(id) |
『document』から、指定『ID』の要素を取得 |
| element.getElementsByTagName(タグ名) |
指定タグ名の要素の配列を取得 |
| element.getElementsByName(nameの値) |
指定『name』属性の要素の配列を取得 |
| element.getElementsByClassName(classの値) |
指定『class』属性の要素の配列を取得 |
| element.querySelector(セレクタ) |
指定『セレクタ』の要素の配列を取得 |
| element.parentNode |
親要素を取得 |
| element.childNodes |
子要素の配列を取得 |
| element.firstChild |
最初の子要素を取得 |
| element.lastChild |
最後の子要素を取得 |
| element.previousSibling |
1つ前の要素を取得 |
| element.nextSibling |
1つ後の要素を取得 |
要素内のHTMLやテキストにアクセス
| 式 |
意味 |
| element.innerHTML |
要素内のHTMLの文字列 |
| element.textContent |
要素内の文字列のみ |
| 例 |
|
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
aaa<div>bbb</div>ccc
<script>
alert(document.body.innerHTML);
alert(document.body.textContent);
</script>
</body>
</html>
要素内の属性にアクセス
| 式 |
意味 |
使い方 |
説明 |
| element.属性名 |
属性の参照 |
a = element.id; |
変数『a』に『id』の値を入れる |
| element.id = a; |
『id』に変数『a』の値を入れる |
|
|
| element.getAttribute(属性名) |
属性の取得 |
a = element.getAttribute("id"); |
変数『a』に『id』の値を入れる |
| element.setAttribute(属性名, 値) |
属性の設定 |
element.setAttribute("id", a); |
『id』に変数『a』の値を入れる |
要素の追加
| 式 |
意味 |
| element.createElement(タグ名) |
『タグ名』の要素の作成 |
| element.createTextNode(文字列) |
文字列要素の作成 |
| element.appendChild(要素) |
要素を、子要素として追加 |
例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
aaa<div>bbb</div>ccc
<script>
alert(document.body.innerHTML);
alert(document.body.textContent);
</script>
</body>
</html>
参考:https://crocro.com/write/manga_javascript/wiki.cgi?p=rewrite_web_page
