[HTML] javascript DOM EX
32931 ワード
Ex_ getElementsby
Ex_ onkeyup
createElement():新しいエンティティを追加
createTextNode():新しいテキストを追加
appendChild():サブエレメントの作成
removeChild():サブエレメントの削除
Child()の置換:サブエレメントの変更
Exエイリアスの追加、サブエレメントの置換/削除
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="#" data-role="header">링크 클릭</a>
<a href="#" data-role="main">링크 클릭</a>
<a href="#" data-role="footer">링크 클릭</a>
<a href="#">링크 클릭</a>
<button onclick="btn1();">변경</button>
</body>
<script>
var tags = document.getElementsByTagName('a');
var btn = document.querySelector('button');
function btn1() {
for(var i=0; i<tags.length; i++){
var arr=tags[i].getAttribute('data-role');
if(arr=="header"){
tags[i].innerHTML="<h1>HEADER</h1>";
} else if(arr=="main"){
tags[i].innerHTML="<h1>MAIN</h1>";
} else if(arr=="footer"){
tags[i].innerHTML="<h1>FOOTER</h1>";
}
}
}
</script>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
당신이 입력한 값 : <span></span><br />
<input type="text" onkeyup="keyEvt();"><span>(0자 입력)</span>
</body>
<script>
var msg = document.getElementsByTagName('span');
var txt = document.getElementsByTagName('input');
function keyEvt() {
var val = txt[0].value;
if(val.length>=0 && val.length<7){
msg[1].style.color="black";
}
if(val.length>=7 && val.length <= 10){
msg[1].style.color="red";
}
if(val.length>=11){
val = val.substring(0, 10);
txt[0].value = val;
}
msg[0].innerHTML=val;
msg[1].innerHTML="(" + val.length + "자 입력)";
}
</script>
</html>
createElement():新しいエンティティを追加
createTextNode():新しいテキストを追加
appendChild():サブエレメントの作成
removeChild():サブエレメントの削除
Child()の置換:サブエレメントの変更
Exエイリアスの追加、サブエレメントの置換/削除
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="val" type="text" /><button onclick="addList();">추가</button>
<br>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<button id="btn1" onclick="appTest();">엘리먼트 추가</button>
<button id="btn2" onclick="dltTest();">자식요소 지우기</button>
<button id="btn3" onclick="chgTest();">자식요소 교체</button>
</body>
<script>
function addList() {
var tNode = document.getElementById('val').value;
var myList = document.getElementById('myList');
var list = document.createElement('li');
var txt = document.createTextNode(tNode);
list.appendChild(txt);
myList.appendChild(list);
}
function appTest() {
var t = document.createTextNode("CLICK ME");
var btn = document.createElement('button');
btn.appendChild(t);
document.body.appendChild(btn);
}
function dltTest() {
var list = document.getElementById('myList');
list.removeChild(list.childNodes[1]); // 배열 1부터 시작
}
function chgTest() {
var t = document.createTextNode("Water");
var item = document.getElementById('myList').childNodes[1];
item.replaceChild(t, item.childNodes[0]);
}
</script>
</html>
Reference
この問題について([HTML] javascript DOM EX), 我々は、より多くの情報をここで見つけました https://velog.io/@xyunkyung/HTML-javascript-DOM-EXテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol