[Java Script] JS HTML DOM
8816 ワード
HTML DOM
Webページがロードされると、ブラウザはドキュメントオブジェクトモデルを生成します.
ページ自体はDOM関数やオブジェクトとして扱うことができます.
property
document.getElementById("demo").innerHTML = ~~;文字列だけでなくhtmlタグも入力できます.
Finding HTML Elements
document.getElementById(id)
IDで検索
document.getElementsByTagName(name)
タグnameのすべての要素を検索
document.getElementsByClassName(name)
classがnameのすべての要素を検索
Changing HTML Elements
innerHTML
attribute
style.property
Adding and Deleting Elements
document.createElement(element)
document.removeChild(element)
document.appendChild(element)
document.replaceChild(new, old)
document.write(text)
JSへのイベントの追加
属性として追加
<!DOCTYPE html>
<html>
<body>
<button onclick = "addfunc()"> add function </button>
<button id="demo"> hi </button>
<script>
function addfunc(){
document.getElementById("demo").onclick = function(){window.alert(1)};
}
</script>
</body>
</html>addEventListner() method
<!DOCTYPE html>
<html>
<body>
<button onclick="addfunc()">add Function</button>
<button id="demo">hi</button>
<script>
function addfunc(){
document.getElementById("demo").addEventListener("click", function(){newFunc("seokwon")});
}
function newFunc(name){
document.write(document.body.innerHTML + "<br>My name is " + name);
}
</script>
</body>
</html> ソースファイルを挿入しない場合、関数はすぐに実行されます.
ソースファイルを入れられません.
function(){ ~~ } // ~~에 실행시키고자 하는 코드 작성各種イベント属性
onmouseover
マウスを上に移動すると
onmouseout
マウスを上から離すと
onmousedown
マウスを押したまま
onmouseup
マウスでフォトフレームを移動
onclick
クリック時
Reference
この問題について([Java Script] JS HTML DOM), 我々は、より多くの情報をここで見つけました https://velog.io/@seokwon99/Java-Script-JS-HTML-DOMテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol