DOM, DOM manipulation, Click event handler

1445 ワード

Domとは?
Document Object Model: structured representation of html documents. allwows javascript to access html element and styles to manipulate them.
connection point between HTML documents and Javascript code
Tree structure, generated by browser on HTML load

DOMはJSに属していません.
Web APIに属する子供で、JavaScriptとインタラクティブです.
たとえば、次のコードを使用すると
console.log(document.querySelector('.message').textContent);
ドームはメッセージというクラスからテキストの内容を読み込みます...
この状態でテキストの内容を別の文字で置換する場合は、次の操作を行います.
とても簡単に
document.querySelector('.message').textContent = 'Correct Number!💘';
これでいい...
これがdom操作!!
入力が必要な場合は、
console.log(document.querySelector('.guess').value);
これでtextContentの代わりにvalueを書きます.><
DOMでcssを操作することもできます.
方法は以下の通りです.
document.querySelector('body').style.backgroundColor = '#60b347';

document.querySelector('.number').style.width = '30rem';
あちなみにbodyの前に貼らない理由は
等級ではなく全体の体の色を変えるからです
とにかく上の方法でcss操作ができる事実!
数字だけを書くのではなく、常にstring形式で「」の間に
入れます.
クリックイベントをDOMで処理する方法は次のとおりです.
document.querySelector('.check').addEventListener('click', function () {}