[Java Script] JS HTML DOM

8816 ワード
JavaScript DOM html テキストリンク

HTML DOM



Webページがロードされると、ブラウザはドキュメントオブジェクトモデルを生成します.
ページ自体はDOM関数やオブジェクトとして扱うことができます.

property

document.getElementById("demo").innerHTML = ~~;
IDが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>
jsでonclickプロパティを変更する場合、関数Xを実行するには関数ソースを入れる必要があります.
ソースファイルを挿入しない場合、関数はすぐに実行されます.
ソースファイルを入れられません.
function(){ ~~ } // ~~에 실행시키고자 하는 코드 작성
同じ形式で記入します.

各種イベント属性


onmouseover


マウスを上に移動すると

onmouseout


マウスを上から離すと

onmousedown


マウスを押したまま

onmouseup


マウスでフォトフレームを移動

onclick


クリック時
selenium.common.exceptions.StaleElementReferenceExceptionエラーの原因
DataStructure 1 11かっこの値(2504)