windowオブジェクトとは
JavaScriptが動作しているブラウザのwindowを指します。
この中にブラウザ操作のための関数やオブジェクトがあります。
windowオブジェクトのメソッド確認を確認するには
devtoolsを開いた後に
consoleにwindowを入力するとwindowのオブジェクトの確認ができます。
そうするとalertやconsoleなどたくさん出てきます。
window.console.log('ポチ'); //devtoolsなどでポチと出力されます。
window.alert('失敗');//アラートで失敗と出力
documentオブジェクトとは
DOM操作ができるものです。
DOMが操作できるとHTMLを追加したり削除できたりします。
⚫︎DOMとは
略してDocument Object Modelでドキュメントを物として扱うモデルという意味です。
JavaScriptを通してhtmlやXMLのようなマークアップ言語を操作するための仕組みです。
DOM操作
DOMはJavaScroptからHTMLの操作ができるものです。
devtoolsのconsoleにdocumentを入力するとHTMLが見れるようになります。
document;
これだけでokです。
このHTMLを前提にやっていきます。
<body>
<div class="テスト">テスト</div>
<div class="alert" id="alert">アラート</div>
<script src="./javascript/main.js"></script>
</body>
⚫︎DOMの取得
devtoolsのconsoleに以下のように入力します。
const elements = document.getElementsByClassName('id');
console.log('elements')
で出力すると
HTMLCollection [div.テスト]
でdevtoolsに出力され、
const elements = document.getElementsByClassName('id');
console.log('elements')
<div class="テスト">テスト</div>
がdevtoolsに出力されます。
const elements = document.getElementById('alert');
console.log(elements);
に変えると
<div class="alert" id="alert">アラート</div>
がdevtoolsに出力されます。
もう少し見ていきます。
<h1>終了時点コード</h1>
const h1Element = document.querySelector("h1");
console.log(h1Element);
//accessKey: ""
//align: ""
//ariaAtomic: null
//h1の中身が見れる
こんな感じでも出力されているはずです。
h1タグの内容を変更する場合は以下のようにします。
const h1Element = document.querySelector("h1");
console.log(h1Element);
console.log(h1Element.textContent);
h1Element.textContent = "変更したタイトル";
console.dir
console.dir()はオブジェクトをJSON型で表示します。このやり方も試してみてください。
DOMの書き換え
innerTextを使うと書き換えができます。
const elements = document.getElementsByClassName('id');
console.log('elements');
elements.innerText = 'アラートの試験中'; //アラートからアラートの試験中
devtoolsで出力すると
<div class="alert" id="alert">アラートの試験中</div>
に変わります。
●DOM作成
DOMの作成ではappendChildを使います。
const element = document.getElementById('alert');
console.log(element);
element.innerText = 'アラートの試験中';
//DOM作成
const dom_new = document.createElement('div');
dom_new.innerText = 'DOM作成';
element.appendChild(dom_new);
Eventlistenerについて
まずEventについてですがこれはクリックされた時や、キーが押された時、
ある領域にカーソルが入った時に使います。
イベントリスナーとはシステムからイベントが発生したメッセージを受け取る為の機能です。
elm.addEventListener('event',
function(){
//処理
}
)
const element = document.getElementById('alert');
console.log(element);
const alertFunc = function () {
alert('アラート');
};
element.addEventListener('click', alertFunc);
もう少し見ていきます。
<h1>終了時点コード</h1>
<button>ボタン</button>
const h1Element = document.querySelector("h1");
console.log(h1Element);
console.log(h1Element.textContent);
h1Element.textContent = "変更したタイトル";
const btnEl = document.querySelector("button");
const helloFn = (e) => {
console.dir(e.target.textContent);
console.log("hello");
};
btnEl.addEventListener("click", helloFn);
参考資料
https://tektektech.com/what-is-window-object/
https://eng-entrance.com/what-is-dom
https://www.wakuwakubank.com/posts/306-javascript-dom/
https://developer.mozilla.org/ja/docs/Web/Events
https://www.udemy.com/course/react-complete-guide/