663
No
element.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<li>아이템1<br><a href="#">test</a></li>
<li>아이템2</li>
<li>아이템3</li>
<li>아이템4</li>
<li>아이템5</li>
</ul>
<ul>
<li>아이템6</li>
<li>아이템7</li>
<li>아이템8</li>
<li>아이템9</li>
<li>아이템10</li>
</ul>
<script>
/* getElementsByTagName("태그이름")
getElementsByName("태그의 name")
getElementById("태그의 id") $("#id") */
//현재 문서의 모든 ul 태그를 선택함
var list = document.getElementsByTagName("ul")[0];
// var list = $("ul")[0];
//첫번째 ul 태그의 모든 li 태그를 선택함
var allItems = list.getElementsByTagName("li");
for(i=0; i<allItems.length; i++){
alert(allItems[i].firstChild.data);
}
</script>
</body>
</html>
- 아이템1
test - 아이템2
- 아이템3
- 아이템4
- 아이템5
- 아이템6
- 아이템7
- 아이템8
- 아이템9
- 아이템10
change.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var sw=true;
function get(){
val=document.getElementById("ex").innerHTML;
alert(val);
}
function set(str){
document.getElementById("ex").innerHTML=str;
}
function set2(){
text =document.getElementById("text").value;
set(text);
//id 가 ex 내용을 변경
//document.getElementById("ex").innerHTML=text;
}
function changeImage(){
img =document.getElementById("image");
if(sw){
img.src="http://t1.daumcdn.net/midas/new/creative/194311/1940630/01Premium_300x150.jpg";
img.style.width="302px";
img.style.height="150px";
}else{
img.src="http://t1.daumcdn.net/midas/new/creative/194311/1942287/01_TB_655x120_m_0508_3_p.jpg";
img.style.width="655px";
img.style.height="120px";
}
sw = !sw;
}
function changeHide(){
document.getElementById("image").style.visibility="hidden";
}
function changeShow(){
document.getElementById("image").style.visibility="visible";
}
function changeStyle(){
ex=document.getElementById("ex");
ex.style.color="red"; //전경색(글자색);
ex.style.backgroundColor="yellow"; //배경색
ex.style.fontSize="30px"; //폰트 사이즈
ex.style.fontFamily="궁서체"; //폰트 변경
ex.style.fontStyle="italic"; //이탤릭체
}
</script>
</head>
<body>
<div id="ex">div 영역</div>
<a href="#" onclick="get()">div의 내용</a>
<a href="#" onclick="set('변경되었습니다.')" >div 변경</a>
<input id="text" onkeydown="set2()">
<a href="#" onclick="set2()">div변경2</a>
<br>
<img id="image" src="http://t1.daumcdn.net/midas/new/creative/194311/1942287/01_TB_655x120_m_0508_3_p.jpg">
<input type="button" value="이미지 변경" onclick="changeImage()">
<input type="button" value="이미지 숨김" onclick="changeHide()">
<input type="button" value="이미지 표시" onclick="changeShow()">
<input type="button" value="글자 스타일 변경" onclick="changeStyle()">
</body>
</html>
Hello
append.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function addText(t){
//alert(document.createTextNode);
if(document.createTextNode){ //노드 추가가 가능하면
br=document.createElement("br"); //태그 생성
//id가 teger 인 태그에 자식노드 <br> 추가
document.getElementById("div3").appendChild(br);
btn=document.createElement("button");
node=document.createTextNode(t); //버튼의 텍스트
btn.appendChild(node); //버튼에 텍스트를 붙임
//id 가 target인 태그에 버튼을 붙임
document.getElementById("div3").appendChild(btn);
}
}
function removeNode(){
parent=document.getElementById("div1");
child=document.getElementById("p1");
parent.removeChild(child); //자식노드 제거
}
</script>
</head>
<body>
<div id="target" onclick="addText('동적으로 추가')">
여기를 클릭하세요
</div>
<div id="div1">
<p id="p1" >첫번째 단락</p>
<p id="p2" >두번째 단락</p>
</div>
<button onclick="removeNode()">단락 제거</button>
<div id="div3">
</div>
</body>
</html>
여기를 클릭하세요
첫번째 단락
두번째 단락
단락 제거
동적으로 추가
동적으로 추가
동적으로 추가
동적으로 추가
동적으로 추가
동적으로 추가
댓글 ( 4)
댓글 남기기