직무교육 9일차(JavaScript)

봄봄이ㅤ 2017. 7. 20. 09:37

2017. 7. 20. 09:37

[DOM 다루기]

· tt.innerHTML="<h1>대한민국</h1>";

- innerText말고 innerHTML을 사용하면 태그를 사용할 수 있다.

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

tt = document.getElementById('test1');//getElements -> array

tt.innerHTML="<h1>대한민국</h1>";

ctest=document.getElementsByClassName('test2');

ctest[0].innerText="헬로";

for(n=0; n<ctest.length; n++)

{

ctest[n].innerText="헬로";

}

mydiv=document.getElementsByTagName('div')//태그명이 div인 array

for(n=0; n<mydiv.length; n++)

{

mydiv[n].innerText="헬로";

}

myli=document.getElementsByTagName('li');//태그명이 li인 array

myli=Array.from(myli);//for in문 사용하기 위해서 array로 변경

for(n in myli){

myli[n].innerText="hello"

}

myin=document.getElementsByName('myname');//name속성이 myname인 것

myin[0].style.backgroundColor="yellow";

myin[1].style.backgroundColor="blue";

}

</script>

</head>

<body>

<ul>

</ul>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

img{

width:300px;

height:300px;

}

</style>

function fn() {

/*aa=document.querySelector('#test1');

//css의 selecor과 동일. 하나만 return

aa.innerText="hello";*/

/*bb = document.querySelector('.test2');//여러개일 경우 첫번재 하나만 return

bb.innerText="hello1";*/

/*cc = document.querySelectorAll('div');//all은 array로 return

for(d in cc)

{

cc[d].innerText="hello2";

}*/

/*cc[0].innerText="hello2";

cc[2].innerText="hello2";//for문 돌려서 하기*/

/*dd = document.querySelectorAll('[name="myname"]');//name속성이 myname인 것

dd = Array.from(dd);//HTMLCollection을 array로 변환

dd.forEach(function (v, i) {

v.style.backgroundColor="yellow";

})*/

/*ee = document.querySelectorAll('#fruit li');//id fruit이고 li인 것

ee = Array.from(ee);//HTMLCollection을 array로 변환

ee.forEach(function (v, i) {

v.style.backgroundColor="yellow";

})*/

/*ff = document.querySelectorAll('img');//image인 것

//ff = document.querySelectorAll('[src*="image"]');

ff = Array.from(ff);//HTMLCollection을 array로 변환

ff.forEach(function (v, i) {

v.style.border= "5px dashed blue";

})*/

gg = document.querySelectorAll('#fruit li:nth-child(2n)');

//id fruit이고 li에서 2의 배수인 것

gg = Array.from(gg);//HTMLCollection을 array로 변환

for(d in gg)

{

gg[d].innerText="과일";

gg[d].style.backgroundColor="skyblue";

}

</script>

</head>

<body>

</ul>

<ul>

</ul>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

/*//radio

selGrade = document.querySelector('[name="grade"]:checked');

mydiv.innerText=selGrade.value;*/

/*std = document.querySelector('[type="checkbox"]');

//std.checked = true;//checkbox에 체크가 된다.

if(std.checked == true){//checkbox에 체크되어있을 경우

mydiv.innerText="학생";

}else{//checkbox에 체크가 안되어있을 경우

mydiv.innerText="학생아님";

}*/

/*txt = document.querySelector('[type="text"]');

mydiv.innerText=txt.value;//input에 작성에 text가 출력됨*/

/*chkHobby = document.querySelectorAll('[name="hobby"]:checked');

chkHobby=Array.from(chkHobby);

mydiv.innerText="";

chkHobby.forEach(function (v, i) {

mydiv.innerText += v.value;

})//checkbox에 체크된게 출력됨*/

/*carSel = document.querySelector('.car option:checked');//select옵션이 선택되었을 경우

mydiv.innerText=carSel.value;*/

}

</script>

</head>

<body>

</select>

1학년 : <input type="radio" value="1학년" name="grade"><br>

2학년 : <input type="radio" value="2학년" name="grade"><br>

3학년 : <input type="radio" value="3학년" name="grade"><br>

</fieldset>

<br>

</fieldset><br>

이름:<input type="text"><br><br>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

//mydiv.innerHTML="<h1>korea</h1>";

h1 = document.createElement('h1');

h1.innerText="korea"

mydiv.appendChild(h1);//div에 child로 h1태그가 적용된 korea가 나타난다. appendChild는 요소를 계속 추가한다.

myli = document.createElement('li');

//txt=document.querySelector('[type="text"]'); myli.innerText=txt.value;

myli.innerText=myin.value;

myul.appendChild(myli);//id가 myul인 곳에 child로 li태그가 적용된 input 값이 나타난다.

}

</script>

</head>

<body>

</ul>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

/*xml parsing할 때 많이 쓰인다.*/

//myul.firstElementChild.innerText="hello";//첫번재 요소를 바꾼다.

//myul.firstElementChild.nextElementSibling.innerText="hello2";//첫번째 요소의 옆 형제 요소를 바꾼다.

//myul.firstElementChild.nextElementSibling.nextElementSibling.innerText="hello3";//첫번째 요소의 옆, 옆 형제 요소를 바꾼다.

//myul.nextElementSibling.innerText="hi"//ul 옆에 있는 div 텍스트를 바꾼다.

//myul.children[0].innerText="hello";//ul에 대한 array를 가져온다.

/*for(n=0; n<myul.children.length; n++){

myul.children[n].innerText="hello";

}*/

//mydiv.firstElementChild.innerText="korea"

//mydiv.nextElementSibling.innerText="korea2"

//mydiv.firstChild.nodeValue="korea1";//자식이 아닌 div에 있는 요소 글자 바꿀 경우

//mydiv.firstChild.nextSibling.firstChild.nodeValue="korea222"//div안에 있는 글자 옆의 div의 글자를 바꿀 경우

//mydiv.childNodes[0].nodeValue="하이1...";//주어진 요소의 자식 노드 모음을 반환

//mydiv.childNodes[1].firstChild.nodeValue="하이2...";//1번 div의 첫번째

//mydiv.nextElementSibling.innerText="dd"

/*elemnet 삭제*/

/*tt=document.querySelector('#mydiv div');

mydiv.removeChild();//mydiv.removeChile(mydiv.firstElementChild);*/

mli=document.createElement('li');

mli.innerText="korea";

//myul.appendChild(mli);

//myul.insertBefore(mli,myul.firstElementChild.nextElementSibling);//(a,b)이면 a를 b앞쪽에 추가해라

myul.insertBefore(mli, app.nextElementSibling);

}

</script>

</head>

<body>

<div id="mydiv">헬로

</div>

</ul>

</body>

</html>

[BOM 다루기]

· BOM

- 브라우저 객체 모델(Browser Object Model)

- 웹 브라우저가 가지고 있는 모든 객체를 의미

- 최상위 객체 : window -> 따라서 window 생략 가능함

- navigator, location, history, screen, document, frames 객체가 있다.

· window.open 속성

저작자표시

'SK고용디딤돌' 카테고리의 다른 글

직무교육 11일차(웹어플리케이션 & ajax) (0)	2017.07.24
직무교육 10일차(JavaScript) (0)	2017.07.21
직무교육 8일차(JavaScript) (0)	2017.07.19
직무교육 7일차(JavaScript) (0)	2017.07.18
직무교육 6일차(JavaScript) (0)	2017.07.17

동그리동동닷컴

직무교육 9일차(JavaScript)

'SK고용디딤돌' 카테고리의 다른 글

+ Recent posts

티스토리툴바