3分間で覚え直すDOMまとめ - 要素の取得, 設定, 追加, 削除

DOMとは

Document Object Modelの略で、HTML、XMLドキュメントをプログラムから利用するためのAPIです。

DOMではHTMLやXML文書をノードと呼ばれるものの階層的な構造として識別します。そしてJavaScriptなど様々なプログラミング言語やスクリプトから、扱いたいノードを特定し操作できるようにする仕組みを提供してくれます。

特定のHTML要素を取得する方法

CSSセレクタを指定して要素を取得

querySelectorAll()メソッドは該当する全ての要素を取得します。
querySelector()メソッドは複数の要素が存在したら、最初の要素だけを取得します。

以下のようなhtmlファイルがあるとします。

index.html

<html> 
<head> 
<title>カワウソ君</title> 
カワウソ 
</head> 
<body> 
かわいいよ 
<div class="content"> 
<div id="text" name="jpn">テキスト</div> 
</div> 
<div class="content"> 
<div id="article" name="short" class="novel">記事</div> 
<div id="articl2" name="long" class="art">記事2</div> 
</div> 
</body> 
<script type="text/javascript" src="DOM.js"></script> 
</html>

CSSセレクタを指定して要素を取得します。

DOM.js

console.log(document.querySelector('div')); // <div class="content"></div> 
console.log(document.querySelectorAll('div')); // [div.content, div#string, div#string]

body、headノードなどを返す

Document.bodyで

要素、Document.headで要素を取得することができます。

以下が例となります。

DOM.js

console.log(document.title) // カワウソ君 
console.log(document.head) // <head>...</head> 
console.log(document.body) // <body>...</body> 
console.log(document.URL) // http://~~~~

ID属性、クラス名。タグ名を持つ要素を取得する

getElementById()メソッドは指定したID属性を持つHTML要素を返します。
getElementsByClassName()メソッドは指定されたクラス名を持つHTML要素のリストを返します。
getElementsByTagName()メソッドは指定されたタグ名を持つHTML要素のリストを返します。

DOM.js

var text = document.getElementById('text'); 
console.log(text); // <div id="text">テキスト</div> 
var content = document.getElementsByClassName('content'); 
console.log(content[0]); // <div class="content">...</div> 
var tags = document.getElementsByTagName('div'); 
for(let value of tags){ 
  console.log(value); 
  // <div class="content">...</div> 
  // <div id="text">テキスト</div> 
  // <div id="article">記事</div> 
}

HTML要素の属性値を操作する

要素の属性値は、ノードのメソッドやプロパティで操作します。

メソッドで属性値を操作

HTML要素の属性値をメソッドで操作する方法について説明していきます。

element.hasAttribute(att_name)はelementで指定した属性があるかどうかの真偽値を返します。

element.getAttribute(att_name)はelementで指定した属性名(att_name)を返します。引数で指定した属性名がない時は、nullを返します。

element.setAttribute(att_name, att_value)は属性値を設定します。第一引数で指定した属性名の値を第二引数で指定した属性値に設定します。

element.removeAttribute(att_name)は指定した属性を削除します。

DOM.js

var content = document.getElementById('text'); 
console.log(content.hasAttribute('name')); //true 
console.log(content.hasAttribute('class')); //false 
console.log(content.getAttribute('name')); //jpn 
 
content.setAttribute('name','eng'); 
console.log(document.getElementById('text')); // <div id="text" name="eng">テキスト</div> 
var article = document.getElementById('article'); 
console.log(article); // <div id="article" name="short" class="novel">記事</div> 
 
article.removeAttribute('class'); 
console.log(article); // <div id="article" name="short">記事</div>

プロパティで属性値を操作

プロパティで属性値を操作するには、element.att_name (element : 要素ノード, att_name : 属性名)のようにして参照し、新たに値を代入することで操作することができます。

DOM.js

var content = document.getElementById('text'); 
console.log(content.id); // text 
content.id = 'book'; 
console.log(content); // <div id="book" name="jpn">テキスト</div>

HTML要素を作成・追加する

新しいHTML要素を生成する

document.createElement()メソッドは引数で指定した要素ノードを生成します。

また、document.createAttribute()メソッドは属性ノード、document.createTextNode()メソッドはテキストノードを生成できます。

HTML要素の追加方法

element.appendChild(insertnode)メソッドは、elementを親ノードとして、その最後に引数で与えられたノードを挿入します。

element.insertBefore(insertnode, childnode)メソッドは、同じくelementを親ノードとして、第二引数に指定した子ノードの前に第一引数で指定したノードを挿入します。

これらのメソッドの引数を元々存在するノードに設定すると、ノードが移動します。　

DOM.js

// ノードを生成する 
var page = document.createElement('div'); 
var index = document.createAttribute('index'); 
var text = document.createTextNode("ShareAlgo"); 
page.id = 'page'; 
console.log(page); // <div id="page"></div> 
console.log(index); // index="" 
console.log(text); // “ShareAlgo" 
document.body.appendChild(page); 
// body要素の最後に<div id="page" name="one">ShareAlgo</div>が挿入される

HTML要素を削除する

element.removeChild(childnode) : 子ノードの削除

element.removeChild(childnode)メソッドはelement(親ノード)内の子ノードが削除されます。

element.replaceChild(newnode, childnode) : ノードを置換する

element.replaceChild(newnode, childnode)メソッドは子ノードを第一引数のノードに置換します。

DOMのまとめ : https://qiita.com/hththt/items/cc047e326994f440a17a

ライブラリを使わない素のJavaScriptでDOM操作 : https://qiita.com/kouh/items/dfc14d25ccb4e50afe89

【DOM基礎】ノードの取得／属性の取得・設定 : https://qiita.com/KDE_SPACE/items/e21bb31dd4d9c162c4a6

このブログを検索

IT音痴オーバーフォーティーおやじのストック記事倉庫