Node.jsでDOMを操作する方法

2024-03-15 17:50 Node.js DOM操作 JavaScript
  1. パッケージのインストール: DOMを操作するためには、Node.jsで利用可能な適切なパッケージをインストールする必要があります。代表的なパッケージとしては、jsdomやcheerioがあります。以下は、jsdomのインストール方法です。
npm install jsdom
  1. DOMの作成と操作: DOMを作成するためには、まずjsdomパッケージを使用して仮想のDOM環境を作成します。次に、作成したDOMを操作して必要な変更を加えます。以下は、DOMの作成と要素の追加・属性の変更の例です。
const { JSDOM } = require('jsdom');
const dom = new JSDOM('<!DOCTYPE html><body></body>');
const document = dom.window.document;
// 要素の追加
const heading = document.createElement('h1');
heading.textContent = 'Hello, World!';
document.body.appendChild(heading);
// 属性の変更
heading.setAttribute('class', 'title');
  1. DOMの検索と変更: 作成したDOM内の要素を検索して変更することもできます。以下は、要素の検索とテキストの変更の例です。
const paragraph = document.querySelector('p');
paragraph.textContent = 'This is a paragraph.';
  1. DOMの削除: 不要な要素を削除する場合は、remove()メソッドを使用します。以下は、要素の削除の例です。
const heading = document.querySelector('h1');
heading.remove();

これらの例は、Node.js上でDOMを操作するための基本的な手法です。詳細なDOM操作やイベントハンドリングなど、より高度な操作も可能ですが、ここでは基本的な方法の紹介に留めます。