javascriptでDOM操作

今回はjavascriptでdom関連の操作を紹介します。

タグ検索

下記のHTMLタグにより、タグの検索を行います。

<body>

<form>

</form>

</body>

IDで検索

var div1 = document.getElementById(‘div1’);

Nameで検索

var inputs = document.getElementsByName(‘name’);

タグ名で検索

var divs = document.getElementsByTagName(‘div’);

cssクラス名で検索

var divs2 = document.getElementsByClassName(‘div-test’);

H5追加(cssセレクター)

var div2 = document.querySelector(‘#div2’);
var divs3 = document.querySelectorAll(‘.div-test’);

タグのスタイル変更

cssでfont-sizeで文字サイズを指定できますが、jsではfontSizeで指定できます。

var divs = document.querySelectorAll(‘div’);

for (var i=0; i< divs.length; i++) {

divs[i].style.backgroundColor = ‘red’;

}

要素にイベントを追加する方法

タグの中で

<body>

</body>

function test() {

alert(“test”);

}

</script>

プロパティで

<body>

</body>

document.getElementById(‘btn’).onclick = function() {

alert(“test”);

}

</script>

addEventListenerで

<body>

</body>

document.getElementById(‘btn’).addEventListener(‘click’, function() {

alert(“test”);

});

</script>

要素にイベントを削除する方法

プロパティで

<body>

</body>

function f1() {

alert(“test”);

}

document.getElementById(‘btn1’).onclick = “”;

</script>

removeEventListenerで

<body>

</body>

var f1 = function() {

alert(“test”);

};

document.getElementById(‘btn’).addEventListener(‘click’, f1);

document.getElementById(‘btn’).removeEventListener(‘click’, f1);

</script>

イベント関数のthisについて

<body>

<!– thisはwindow–>

</body>

function f1() {

console.log(this);

}

// thisはinputタグ

document.getElementById(‘btn2’).onclick = f1;

// thisはinputタグ

document.getElementById(‘btn3’).addEventListener(‘click’,f1);

</script>

イベントハンドラー一覧

load	タグなど資源がロードされた後 ①window.onload = function(){} ②<body onload=”f1()”>
focus	要素がフォーカスを受け取ったときに発生します。
blur	要素がフォーカスを失ったときに発生します。
mouseenter	マウスのホットスポットが最初にイベントが発生した要素の中に移動したとき Element に発生します。
mouseover	(マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときElement に発生します。
mousemove	マウスなどのポインティングデバイスで、カーソルのホットスポットが要素内にある間に動いた時に発行されるイベントです。
mousedown	ポインターが要素の中にあるときにポインティングデバイスのボタンが押下されたとき Element に発行されます。
mouseup	Element においてポインターが中にあるときにポインティングデバイス (マウスやトラックパッドなど) のボタンが離されたときに発生します。
click	要素のマウスクリックをシミュレートします。
dblclick	マウスのカーソルが要素の上にある状態で、マウスが極めて短い間隔で二回クリックされた時に発生するイベントです。
contextmenu	右クリックした時に表示
mouseleave	マウスが対象の要素から離れたときに発生する
mouseout	要素の上から外した時のイベント
select	input,textareaの内容が選択される
copy	要素がコピーされるとき
keydown	キーが押されたときに発生する
keypress	キーボードを押しっぱなしにすると、一定間隔でkeypressが発生します。
keyup	キーが離されたときに発生します。
reset	フォームのリセットボタン押下
submit	送信されたときに発生します。
change	ユーザーによる要素の値の変更が確定したときに発生します。
input	ユーザーの操作によって値が変更されたときに発生する

クリックイベント1回のみ発生

方法１

<body>

</body>

function f1() {

console.log(“click”);

this.onclick = “”

}

document.getElementById(‘btn1’).onclick = f1;

</script>

方法２

<body>

</body>

function f1() {

console.log(“click”);

this.removeEventListener(‘click’, f1);

}

document.getElementById(‘btn1’).addEventListener(‘click’, f1);

</script>

タグの操作

// ‘<div>test</div>’

var tag = document.createElement(‘div’);

var text = document.createTextNode(‘text’);

console.log(tag.hasChildNodes());

tag.appendChild(text);

console.log(tag);

console.log(tag.hasChildNodes());

tag.removeChild(text);

console.log(tag);

var li = document.getElementById(‘a’);

var ul = document.querySelector(‘ul’);

var li2 = li.cloneNode(true);

ul.appendChild(li2);

console.log(ul.innerHTML);

console.log(ul.innerText);

ul.innerHTML = ‘<li>gogo</li>’;

</script>

タグのプロパティ操作

<body>

<div id=”div1″ class=”test” abcd=”cdef”>testdiv</div>

</body>

var div1 = document.getElementById(‘div1’);

console.log(div1.getAttribute(‘id’));

console.log(div1.getAttribute(‘abcd’));

div1.setAttribute(‘id’, ‘newid’);

div1.setAttribute(‘abcd’, ‘newabcd’);

console.log(div1.hasAttribute(‘abcd’));

console.log(div1.id);

console.log(div1.className);　// classの設定値を取得

div1.className = “test2”;　　// classの設定値を変更

div1.className += ” test3″;　// classの設定値を追加

</script>

node.nextElementSibling	同じ親要素を持って隣接する次の要素です
node.previousElementSibling	同じ親要素を持って隣接する前の要素です。
node.parentElement	親の Element を返します。
node.firstElementChild	最初の子要素を取得する
node.lastElementChild	最後の子要素を取得する

イベントオブジェクト

document.getElementById(‘div1’).onclick = function(e) {

var evt = e || window.event;

console.log(evt);

}

css操作(classList)

メソッド名	機能
node.classList.add	クラスを追加する
node.classList.remove	クラスを削除する
node.classList.contains	クラスが含まれているか確認する
node.classList.toggle	クラスが含まれていれば削除、含まれていなければ追加する