HTML DOM 修改 - 轻松操控网页内容

Webページに動的な要素を追加したい、ユーザーの操作に応じてコンテンツを変化させたい、そんな風に思ったことはありませんか？それを実現するのがHTML DOMの操作です。この記事では、JavaScriptを使ってHTML DOMを操作し、Webページに活気を与える方法を詳しく解説していきます。

一、DOM 简介

1. 什么是 DOM？

DOMはDocument Object Modelの略で、HTML文書をノードツリーとして表現する仕組みです。HTML文書は、タグの入れ子構造によって構成されていますが、DOMはこの構造をツリー状に解釈します。それぞれのタグはツリーのノードとなり、親子関係や兄弟関係を持ちます。DOMはブラウザが内部的にHTMLを理解するためのものです。

2. DOM の作用

DOMは、JavaScriptなどのプログラミング言語に、HTML要素にアクセスするためのインターフェースを提供します。DOMを使うことで、以下のような操作が可能になります。

• HTML要素のコンテンツ（テキストやHTML）の読み取りと変更
• HTML要素の属性の取得と設定
• HTML要素の追加と削除
• CSSスタイルの変更
• イベントハンドラの追加

二、访问 HTML 元素

HTML要素にアクセスするには、いくつかの方法があります。

1. 通过 ID 获取元素

getElementById()メソッドは、指定したIDを持つ要素を取得します。HTML要素には、それぞれ一意のIDを割り当てることができます。

<div id="myElement">Hello, world!</div>

const element = document.getElementById('myElement'); 
console.log(element); // <div id="myElement">Hello, world!</div>

2. 通过标签名获取元素

getElementsByTagName()メソッドは、指定したタグ名を持つすべての要素を取得します。取得されるのは、要素の順番を保持したHTMLCollectionオブジェクトです。

<p>Paragraph 1</p>
<p>Paragraph 2</p>

const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs); // HTMLCollection(2) [p, p]

3. 通过类名获取元素

getElementsByClassName()メソッドは、指定したクラス名を持つすべての要素を取得します。こちらも、要素の順番を保持したHTMLCollectionオブジェクトが返されます。

<span class="highlight">Highlighted text</span>
<p class="highlight">This is also highlighted.</p>

const highlightedElements = document.getElementsByClassName('highlight'); 
console.log(highlightedElements); // HTMLCollection(2) [span.highlight, p.highlight]

4. 使用 CSS 选择器获取元素

querySelector()メソッドは、指定したCSSセレクタに最初に一致する要素を1つ取得します。querySelectorAll()メソッドは、指定したCSSセレクタに一致するすべての要素を取得します。querySelectorAll()は、要素の順番を保持したNodeListオブジェクトを返します。

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
</ul>

const firstItem = document.querySelector('li.item'); 
console.log(firstItem); // <li class="item">Item 1</li>

const allItems = document.querySelectorAll('li.item'); 
console.log(allItems); // NodeList(2) [li.item, li.item]

三、修改 HTML 元素内容

1. 修改元素文本内容: innerHTML

innerHTMLプロパティは、要素内のHTMLコンテンツ全体を取得または設定します。このプロパティを使うと、要素内のテキストだけでなく、HTMLタグを含むコンテンツ全体を書き換えることができます。

<p id="myParagraph">This is a paragraph.</p>

const paragraph = document.getElementById('myParagraph');
paragraph.innerHTML = '<strong>This is now bold.</strong>';

2. 修改元素文本内容: textContent

textContentプロパティは、要素内のテキストコンテンツのみを取得または設定します。HTMLタグは無視され、テキストのみが扱われます。セキュリティ上の理由から、textContentはinnerHTMLよりも安全とされています。

<p id="anotherParagraph">This is another paragraph.</p>

const anotherParagraph = document.getElementById('anotherParagraph');
anotherParagraph.textContent = 'The text has been updated.';

四、修改 HTML 元素属性

1. 修改元素属性: setAttribute()

setAttribute()メソッドは、HTML要素に属性を追加したり、既存の属性の値を変更したりします。

<a href="#" id="myLink">Click me</a>

const link = document.getElementById('myLink');
link.setAttribute('href', 'https://www.google.com');
link.setAttribute('target', '_blank');

2. 获取元素属性: getAttribute()

getAttribute()メソッドは、指定した属性の値を取得します。

const linkHref = link.getAttribute('href'); 
console.log(linkHref); // https://www.google.com

五、添加和删除元素

1. 创建新元素: createElement()

createElement()メソッドは、指定したタグ名の新しいHTML要素を作成します。

const newParagraph = document.createElement('p');

2. 添加元素: appendChild()

appendChild()メソッドは、指定した要素を、親要素の最後の子要素として追加します。

newParagraph.textContent = 'This is a new paragraph.';
document.body.appendChild(newParagraph);

3. 插入元素: insertBefore()

insertBefore()メソッドは、指定した要素を、親要素の指定した子要素の前に挿入します。

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

const newItem = document.createElement('li');
newItem.textContent = 'New Item';
const list = document.getElementById('myList');
const firstItem = list.firstChild;
list.insertBefore(newItem, firstItem); 

4. 删除元素: removeChild()

removeChild()メソッドは、指定した子要素を親要素から削除します。

const lastItem = list.lastChild;
list.removeChild(lastItem);

六、总结

この記事では、JavaScriptを用いたHTML DOMの操作方法について解説しました。DOMを操作することで、Webページに動的な要素を追加し、ユーザーとのインタラクションを実現することができます。これらのテクニックを駆使して、魅力的なWebページを作成してください。

• Document Object Model (DOM) - MDN Web Docs
• HTML DOM - W3Schools