DOM(Document Object Model)
HTML(XML)を操作する
- 要素の指示
-
- document.getElementsByTagName('tagName');
- タグ名で指示される要素配列
- document.getElementsByClassName('ClassName');
- クラス名で指示される要素配列
- document.getElementsByName('name');
- [name]属性値で指示される要素配列
- document.getElementById('id');
- [id]属性値で指示される要素
※id属性のみhtml内でユニークな値 - document.forms['name'].elements['name'];
- name属性値を持ったform要素内のフォーム諸要素
- 要素の中身の書き換え
- 要素.innerHTML = '書き換え内容';
- 要素の属性設定
-
要素.setAttribute(属性名,属性値);
ex)h1.setAttribute('class','title');
<h1>→<h1 class="title"> - 要素のクラス属性設定
-
- 指定したクラス名が含まれているか
- 要素.classList.contains('クラス名');
- 指定したクラスを削除する
- 要素.classList.remove('クラス名');
- 指定したクラスを付加する
- 要素.classList.add('クラス名');
- 要素のスタイル属性設定
-
要素.style = 'スタイルシート設定';
要素.style.スタイル要素 = '設定';
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0">
<title>要素の取得と操作1~要素の指示と中身の書き換え</title>
</head>
<body>
<h1>要素の取得と操作1~要素の指示と中身の書き換え</h1>
<div>span:<span>あああ</span></div>
<div>span:<span>あああ</span></div>
<div>span.test:<span class="test">あああ</span></div>
<div>span.test:<span class="test">あああ</span></div>
<div>span.test#a:<span class="test" id="a">あああ</span></div>
<div>span.test#b:<span class="test" id="b" >あああ</span></div>
<script>
var span_elements = document.getElementsByTagName('span');
span_elements[0].innerHTML = 'span[0]:いいい';
var id_b = document.getElementById('b');
id_b.innerHTML = 'span#b:いいい';
var class_tests = document.getElementsByClassName('test');
class_tests[1].innerHTML = 'span.test[1]:いいい';
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0">
<title>要素の取得と操作2~属性・スタイルの設定</title>
<style>
.a{
width:10em;
height:3em;
background:pink;
border:3px dotted gold;
}
</style>
</head>
<body>
<h1 class="title">要素の取得と操作2~属性・スタイルの設定</h1>
<div>
<div id="no_display">見えなくなる</div>
<div id="test">test</div>
<div id="nostyle">nostyle</div>
<div id="noclass">noclass</div>
</div>
<script>
document.getElementsByTagName('body')[0].style.background = "silver";
document.getElementsByClassName('title')[0].style.color = 'darkblue';
document.getElementsByTagName('div')[0].style.display = "flex";
document.getElementById('no_display').style.display = 'none';
document.getElementById('test').style = 'width:10em;height:3em;background:lavender;border:3px solid orange;';
document.getElementById('nostyle').setAttribute('style' , 'width:10em;height:3em;background:violet;border:3px solid blue;');
document.getElementById('noclass').setAttribute('class' , 'a');
</script>
</body>
</html>