JavaScript講座

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.スタイル要素 = '設定';

dom1.html

<!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>

dom2.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>