５：プロパティとエレメントとメソッドDOMとgetElementと関数

オブジェクト＋プロパティ＝メソッド？とは限らない？

オブジェクト＋プロパティ＝メソッド？とは限らない？

オブジェクトの話

この本が一番わかりやすかったです。

オブジェクトの話は昔にしたことがあります。

どこかで・・・・

window.alert('Hello')

はwindowオブジェクトに対してalertプロパティを使う、という意味になります。

（alertはいつでもwindowに対して行われるのでwindowを省略してよいのでした）

しかしこのサイトではalertはプロパティではなくメソッドと呼ばれている。。。https://developer.mozilla.org/ja/docs/Web/API/Element/querySelector

うーん。

document.body.innerHTML = "";

これはinnerHTMLというプロパティのオブジェクトが二つ書かれています。

document

bodyの２つです。

bodyはエレメントオブジェクトと呼ばれています。どちらもinnerHTMLというプロパティの働く場所、対象を指定しています。

window オブジェクトの中にdocumentオブジェクトがあり、その中にbodyやらidやらで指定できるelementオブジェクトがあります。

例えば

document.querySelector('.classname')

のquerySelectorは、documentからclassnameというCSSのクラスをとってくるですが、これはプロパティではなくメソッドと呼ばれています。（https://developer.mozilla.org/ja/docs/Web/API/Element/querySelector）

プロパティとメソッドは何がちがうのか・・・・

この公式ページの左のサイドバーをみて推察するしかないのでしょうか。

Element: getElementsByTagName() メソッド - Web API | MDN

Element.getElementsByTagName() メソッドは、生きた HTMLCollection で指定されたタグ名を持つ要素を返します。

最後に、

document.querySelector(‘.classname’)

も、

let el = document.querySelector(‘.classname’)

と書けば、パソコンは「document.querySelector(‘.classname’)全体がオブジェクトだな」と判断します。次の書き方なら、document.getElementById(‘ugokasu’)はそのまま、オブジェクトだとわかる表現です。

document.getElementById(‘ugokasu’).style.width = ‘400px’;

DOMはHTMLドキュメントの構造を指している

JavaScriptを使っているとDOMという言葉が出てきます。

Document Object Modelの略記がDOMです。

HTML文書を「木」のように枝分かれした構造と捉える考え方です。

（理科で原子モデルという言葉を聞いたことがありますか。原子モデルは、原子とはどのようなものか、原子の「見方」を提供する図式です）

DOMは「木」なので、「節」があります。それをNodeといいます。

ありとあらゆる「節」っぽいものをNodeということができます。

Elementと呼ばれているものもnodeです（多分。すみません断言できず）。

DOMという構造は「W3C」という非営利団体が定めました。

これによってインターネットがWorld WideなWebになったのです！

オブジェクトって何？

document.getElementById(‘ugokasu’).style.width = ‘400px’;

というコードを以前書きましたね。

これは

オブジェクト（document）.エレメント（getElementById）.プロパティ（style.width）という順番で並んでいます。

「オブジェクト」にはdocument,window,consoleがありました。（document.getElementById(‘ugokasu’).style.width全体をオブジェクトと呼ぶこともできます）

documentはHTML文書。

windowはブラウザのウィンドウ（ドキュメントではない）。

consoleはブラウザのコンソール（ドキュメントではない）を対象にして行う処理です。

ところで肝心の「オブジェクト」ですが。

英語でいえばただの「対象」を表す単語です。

操作を施す、指し示す「エレメント」全てを「オブジェクト」とも呼ぶようです。

よくわかりません。

エレメントを指定する方法は限られている。

「エレメント」にはidで指定する他に

getElementByID

getElementByTagName

getElementByClassName

getElementSelecter

といったJavaScriptのコマンドで指定ができます。

bodyをエレメントにすることもできます。

定義をした変数（定数？）をエレメントにすることもできるかなとおもってやってみました。

let words = "JavaScriptおもしろいなぁ"

document.write(words)

document.words.style.fontSize = "40px"

あれ、できないみたいですね。

要素（エレメント）を取得する方法は限られているようです。

JavaScriptでの要素の取得方法のまとめ

ピュアなJavaScriptで要素を取得したいとき、getElementByIdなら覚えているのですが、他のものになると忘れてしまうときがあるので、メモも兼ねて基本操作と一緒にまとめておきます。要素

 

<!DOCTYPE html>
<html>
<head>
<title>エレメントの指定の仕方は決められている</title>
</head>
<body>
<p id="blue">エレメントの指定の仕方を実験します</p>
<p id="size">うまくいくかなぁ</p>
<p id="color">むむむ</p>
<button onClick='chgclr()'>ここを押してごらんなさい！</button>

<script>

/*

間違った記述があると、それ以降のコードが動かなくなる。

//ダメだった。gettElementで指定しないと動いてくれない。
let words = "JavaScriptおもしろいなぁ"

document.write(words)
document.words.style.color = "blue";

*/

//できた。
bigbig = document.getElementById('size');
bigbig.onclick = function(){
bigbig.style.fontSize="40px"
};

//できた
function chgclr(){
bigbig = document.getElementById('color');
bigbig.style.color = "red"
}

</script>

</html>