デイトラDay19 学習記録 DOM操作

DOMとは簡単に言うとHTMLとJavaScriptをつなげるための仕組みです。
これを理解すれば、JavaScriptで動きのあるサイトを作ることができます

1,DOMとは?

DOMとは、Document Object Modalの略です。
 
HTMLを書くとき、html>body>divという、階層形式で書きますよね

そして、htmlのデータはすべてdocumentというオブジェクトにすべてま とめられています

よって、以下のコードを試しに実行すると、コンソールにhtmlの全てのデータが出力できます

console.log(document);

2,DOMの基本操作

documentはhtmlのデータがまとめられたオブジェクトです
ということは...メソッドが使えます!

これから、いくつかのhtmlを操作するメソッドを紹介したいと思います

1,HTML要素を取得

htmlの操作を行う前にまずは、操作したいhtmlを指定する必要があります。
htmlの指定の仕方は3つあります。

・idで指定

document.getElementById("id名");

・classで指定

document.getElementsByClassName("class名");

・タグで指定(例のコードはh1を取得)

document.getElementsByTagName("h1");

classとタグで指定するとき、Elementsと複数形になっているとおり、この二つは配列で複数のhtml要素を取得します。

この記事が気に入ったらサポートをしてみませんか?