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とインタラクティブです.
たとえば、次のコードを使用すると
この状態でテキストの内容を別の文字で置換する場合は、次の操作を行います.
とても簡単に
これがdom操作!!
入力が必要な場合は、
DOMでcssを操作することもできます.
方法は以下の通りです.
等級ではなく全体の体の色を変えるからです
とにかく上の方法でcss操作ができる事実!
数字だけを書くのではなく、常にstring形式で「」の間に
入れます.
クリックイベントを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 () {}
Reference
この問題について(DOM, DOM manipulation, Click event handler), 我々は、より多くの情報をここで見つけました https://velog.io/@pouryourlove/DOMテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol