読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【javascript】DOMの操作・参照など【随時更新】


最終更新:2017/4/22

DOMの操作

要素の参照

getElementById
idを参照
<div id="test"></div>
<script>
var test = document.getElementById('test');
test.textContent=('hello.');
</script>
getElementsByClassName
classを参照
document.getElementsByClassName('class');
getElementsByTagName
タグを参照
document.getElementsByTagName('div');

取得したタグ内に要素を入れたりするときは、なんばんめのNodeか指定しないといけない

var div= document.getElementsByTagName('div');
div[0].innerText = 'test';
querySelector
cssセレクタで参照

最初の一つを参照
cssセレクタなので「#」や「.」を忘れない事

document.querySelector('#main .posts h1'); 

すべて参照

document.querySelectorAll('a');
parentNode
親要素を参照

idは変数が代入されていなければそのまま書ける

<section>
<div id="b"></div>
</section>
<script>
console.log(b.parentNode);
</script>

この場合は#bの親要素を参照

<div id="b"></div>
</section>
<div id="a"></div>
<script>
var a = document.getElementById('b');
console.log(a.parentNode);
</script>
firstElementChild
最初の子ノードを参照
<section id="a">
<div id="b"></div>
</section>
<script>
console.log(a.firstElementChild);
</script>
lastElementChild
最後の子ノードを参照
children
子ノードのリストを参照
<section id="a">
<div id="b"></div>
</section>
<script>
console.log(a.children);
</script>
previousElementSibling
一つ前の要素を参照。自身が一番最初の要素だった場合はnullが返される。
<section id="a">
<div></div>
<div id="b"></div>
</section>
<script>
console.log(b.previousElementSibling);
</script>
nextElementSibling
指定したノードの後ろの要素を指定。指定したノードがリストの最後尾ならnullが返される。
nextSibling
指定したノードの次に続く要素を、テキストノード(改行やタブ文字)も含めて指定する。

nextElementSiblingとnextSiblingの違いを検証

<div class="msg">hello</div>
<div>a</div>
<script>
var ref = document.querySelector('.msg'); 

//#textが表示される
console.log(ref.nextSibling);
//<div>a</div>が表示される
console.log(ref.nextElementSibling);
</script>

属性の追加

○○.属性
指定した要素の指定した属性の値を変える。
<input value="test" id = "a">
<script>
var a = document.getElementById('a');
console.log(a);
a.value = 'hello';
</script>
className = ''
クラス名を取得、追加
<script>
var b = document.getElementById('b');
console.log(b.className);
b.className = 'n'
console.log(b.className);
</script>
classList.add
クラスの追加
classList.remove
クラスの排除
classList.toggle
クラスのtoggleする(有る無しを切り替える)
<div class="a" id="b">
<script>
var b = document.getElementById('b');
//aがある場合は排除しない場合は追加する。
b.classList.toggle('a');
console.log(b.className)
</script>

要素の追加

appendChild
指定した親ノードの末尾に子ノードを追加
var p = document.createElement("p");
p.textContent = 'hello';
document.body.appendChild(p);

text部分へのアクセス
innerHTML
指定したNodeの子孫のHTMLを取得したり、すべて排除し書き換える。HTMLとして解析されて書き出されるのでタグが使える。

HTMLを取得

<div id="msg"><p>hello</p>
<script>
//p部分も取得される
var msg = document.getElementById('msg');

書き換える

<div id="msg">このテキストは消える<p>この要素は消える</p><span>この要素は消える</span></div>
<script>
var msg = document.getElementById('msg');
msg.innerHTML = ('<h1>hello</h1>');
textContent
指定したNodeと子孫のテキスト要素を取得したり変更する。HTMLとしては解析されないので、innerHTMLよりパフォーマンスが向上する可能性がある。
innerText
textCOntentと同じような働きだが標準に指定されていない

取得

<div id="msg"><p>hello</p></div>
<script>
var msg = document.getElementById('msg');
console.log(msg.textContent);
</script>

text部分を変更

<div id="msg">このテキストは消える<p>この要素は消える</p><span>この要素は消える</span></div>
<script>
var msg = document.getElementById('msg');
msg.textContent = ('<h1>hello</h1>');

createELement

createElement('');
空の要素を作る(ツリー構造には組み込まれない)
var div = document.createElement('div');
//作った要素の中にtextを入れる
div.textContent = 'hoge';
document.body.appendChild(div);

insertBefore

insertBefore
指定した要素を指定した親要素の子要素として対象要素の前に挿入する

※以下のコードでidを指定すると全てのコードの末尾にnewelが表示さるのはなんでなんでしょうか。原因はまだ調べ中です。

<script>
var newel = document.createElement('div');
newel.textContent = 'hello';
newel.innerHTML = 'd';
var parent = document.querySelector('.box');
var ref = document.querySelector('.msg'); 
console.log(parent);
console.log(newel);
console.log(ref);
//parentの中のrefの前にnewelを追加する
parent.insertBefore(newel,ref);
</script>

insertBeforeで要素の後に追加
var newel = document.createElement('div');
newel.textContent = 'hello';
newel.innerHTML = 'add';
var parent = document.querySelector('.box');
var ref = document.querySelector('.msg'); 
console.log(parent);
console.log(newel);
console.log(ref);
parent.insertBefore(newel,ref.nextSibling);

setAttribute

指定の要素に新しい属性を追加する

 var CHILD=document.createElement("p");
// p 要素に id CLDを追加
var p = document.createElement('p');
// 他の属性も追加してみる
p.setAttribute('id','b');
p.setAttribute('class','c');
p.setAttribute('name','c');
p.setAttribute('style','color:#f00;');