엘리먼트(태그, 요소)를 잡는 6가지 방법
<script type="text/javascript"> // 여기서부터 script 작성을 시작한다.
window.onload = function() { // 문자를 다 로딩한 이후에 태그를 잡는다는 의미이다. ==> 문자를 로딩하자마자 출력된다. 반면 onclick 은 클릭한다면 출력된다.
// === 1. 자바스크립트에서 태그를 가지고 선택자를 잡는 방법 ===
/*
document.getElementsByTagName("태그명"); 이다.
document.getElementsByTagName("태그명"); 을 실행하면 리턴타입은 모두 객체(object)배열 타입이다. * <body> <div> 등 태그는 모두 객체(object)이다.
==> 태그를 노드 라고도 부른다. 배열을 리스트 라고도 부른다.
*/
const arrDiv = document.getElementsByTagName("div");
// alert("배열 arrDiv 의 길이 => " + arrDiv.length); // alert() 는 웹사이트상 경고창을 띄우는 것이다.!!
// 배열 arrDiv 의 길이 => 3
for(var i=0; i<arrDiv.length; i++) {
// alert(arrDiv[i].innerText); // red green blue 이 순서대로 출력된다.
arrDiv[i].style.display = "inline-block"; // arrDiv[i].style. ==> 객체(arrDiv[i] 즉, div 태그의 배열)에 css의 속성값을 주는 것이다. display = "inline-block" 속성을 주었다.
arrDiv[i].style.border = "solid 1px gray"; // border 속성
arrDiv[i].style.width = "200px"; // width 속성
arrDiv[i].style.height = "150px"; // height 속성
arrDiv[i].style.margin = "20px"; // margin 속성
arrDiv[i].style.backgroundColor = arrDiv[i].innerText; // backgroundColor 속성
// CSS에서 background-color 와 같이 스네이크기법으로 했던것은 자바스크립트에서는 backgroundColor 와 같이 카멜기법으로 바꾸어야만 한다.!!!!
arrDiv[i].style.color = "white"; // color 속성(글씨 색상)
}// end of for-----------------------------------------
// === 2. 자바스크립트에서 클래스명을 가지고 선택자를 잡는 방법 ===
/*
document.getElementsByClassName("클래스명"); 이다.
document.getElementsByClassName("클래스명"); 을 실행하면 리턴타입은 모두 객체(object)배열 타입이다. * <body> <div> 등 태그는 모두 객체(object)이다.
*/
const arrBtn = document.getElementsByClassName("btn");
for(var i=0; i<arrBtn.length; i++) {
arrBtn[i].style.backgroundColor ="navy";
arrBtn[i].style.color ="white";
}// end of for-----------------------------------------
// === 3. 자바스크립트에서 name 속성을 가지고 선택자를 잡는 방법 ===
/*
document.getElementsByName("name값"); 이다.
document.getElementsByName("name값"); 을 실행하면 리턴타입은 모두 객체(object)배열 타입이다. * <body> <div> 등 태그는 모두 객체(object)이다.
*/
const arrHobby = document.getElementsByName("hobby");
for(var i=0; i<arrHobby.length; i++) {
console.log(arrHobby[i].value); // 콘솔에 출력한다. arrHobby[i].value ==> arrHobby[i] 배열의 value 값을 출력한다.
/*
game
movie
writing
music
*/
}// end of for-----------------------------------------
// checkbox 의 개수와 <span> 태그의 개수가 같은 것을 이용한다.
const arrSpan = document.getElementsByClassName("hobby_val");
for(var i=0; i<arrSpan.length; i++) {
arrSpan[i].innerHTML = arrHobby[i].value // 비어있는 <span> 태그에 arrHobby[i].value(즉, arrHobby[i] 배열의 value)값을 넣어준다.
}// end of for-----------------------------------------
const arrLabel = document.getElementsByTagName("label");
for(var i=0; i<arrLabel.length; i++) {
arrLabel[i].style.color ="red";
}// end of for-----------------------------------------
// === 4. 자바스크립트에서 id 값을 가지고 선택자를 잡는 방법 ===
/*
document.getElementById("id값"); 이다.
document.getElementById("id값"); 을 실행하면 리턴타입은 객체(object) 타입이다. * <body> <div> 등 태그는 모두 객체(object)이다.
*/
const btnOK = document.getElementById("btnOK");
// --- btnOK(확인버튼)을 클릭하면 alert("확인버튼을 클릭하셨군요"); 를 띄우고자 한다.
// === 엘리먼트(객체)를 클릭하면 발생하는 이벤트 핸들러 생성하기 ===
/*
btnOK.onclick = function() { // btnOK 은 객체 (태그는 모두 객체이다.) onclick 은 클릭하는 것이다.
// btnOK 를 이벤트소스 라고 부른다.
// onclick 을 이벤트 라고 부른다. 지금은 클릭이벤트 이다.
// function() { } 부분을 핸들러(처리)라고 부른다.
// window.alert("확인버튼을 클릭하셨군요 -1"); // window 는 생략가능하다.
alert("확인버튼을 클릭하셨군요 -1");
};
*/
// --- 또는 ---
/*
btnOK.addEventListener("click", function(){
alert("확인버튼을 클릭하셨군요 -2");
});
*/
// --- 또는 ---
btnOK.addEventListener("click", ()=>{
alert("확인버튼을 클릭하셨군요 -3");
});
// --- btnChkbox(체크박스에 체크된것 알아오기)을 클릭하면 체크박스에 체크된것만의 value값 알아오기 ---- //
const btnChkbox = document.getElementById("btnChkbox");
// === 엘리먼트(객체)를 클릭하면 발생하는 이벤트 핸들러 생성하기 === //
btnChkbox.onclick = function(){ // {} 를 벗어나면 소멸된다.
const arrHobby = document.getElementsByName("hobby"); // arrHobby 는 체크박스를 의미한다.
let result = "";
let cnt = 0;
console.log("\n~~~~~~~~~~~~~~~~~~~~~~\n");
for(var i=0; i<arrHobby.length; i++) {
// console.log(arrHobby[i].value + "=> " + arrHobby[i].checked ); // arrHobby[i] 는 체크박스를 의미한다.
// 체크박스의엘리먼트.checked ==> 체크가 되어져 있으면 true, 체크가 안되어져 있으면 false ==> 이말은 arrHobby[i] 즉, 체크박스에서 checked 가 되면 true, 안되면 false 로 나타난다. (웹브라우저상 F12)
if(arrHobby[i].checked) { // 체크박스에 체크가 되었더라면
cnt++;
let s_comma = (cnt==1)?"":","; // 삼항연산자. s_Comma 는 stirng 타입 comma 라는 의미이며, 통상적으로 개발자들 사이에서 쓰인다. 그냥 comma 로 입력해도 된다.
result += s_comma + arrHobby[i].value; // value 값은 게임, 영화감상, 글쓰기, 음악감상
}
}// end of for-----------------------------------------
// 게임과 글쓰기와 음악감상을 체크를 했다라면 결과물은 콘솔창에
// game, writing, music 와 같이 출력되어야 한다. ==> ,game, writing, music 에서 맨앞 콤마(,) 만 출력을 안해주면 된다.
// console.log(result); // result 값을 출력한다.
document.getElementById("result").innerHTML = result;
};
//////////////////////////////////////////////////////////////////////////////
const btnEraser = document.getElementById("btnEraser");
btnEraser.addEventListener("click", function() {
document.getElementById("result").innerHTML = " "; // 클릭해주면, 싹 비워라(" ")
});
//////////////////////////////////////////////////////////////////////////////
const btnChkboxClear = document.getElementById("btnChkboxClear");
btnChkboxClear.onclick = ()=>{ // 클릭해주면,
const arrHobby = document.getElementsByName("hobby");
for(var i=0; i<arrHobby.length; i++) {
arrHobby[i].checked = false; // arrHobby 즉, 체크박스는 모두 해제된다.
}// end of for-----------------------------------------
};
//////////////////////////////////////////////////////////////////////////////
// === 5. 자바스크립트에서 css 선택자를 가지고 잡는 방법 ===
// document.querySelectorAll(css선택자) 이다.
const arr_li = document.querySelectorAll("body > section:last-child > ol > li:nth-child(3)"); // 각 li:ntn-chile(3) 만 잡아온다. 복수개이므로 arr 배열을 만들어준다.
for(var i=0; i<arr_li.length; i++) { // 복수개이므로 for 문으로 돌린다.
arr_li[i].style.color = "#ff6666";
arr_li[i].style.fontStyle = "italic";
arr_li[i].style.fontWeight = "bold";
}// end of for-----------------------------------------
// === 6. 자바스크립트에서 css 선택자를 가지고 잡는 방법 ===
// document.querySelectorAll(css선택자) 이다.
/*
const arr2_li = document.querySelectorAll("body > section:last-child > ol > li:first-child");
for(var i=0; i<arr2_li.length; i++) {
arr2_li[i].style.color = "#40ff00";
arr2_li[i].style.fontWeight = "bold";
}// end of for-----------------------------------------
*/
// const apple = document.querySelectorAll("body > section:last-child > ol > li:first-child")[0]; // "body ~ > li:first-child" 중에서 index 0인 것(1번째 항목)만 적용한다.
// 또는
const apple = document.querySelector("body > section:last-child > ol > li:first-child");
/*
const apple = document.querySelectorAll("body > section:last-child > ol > li:first-child")[0]; 와
const apple = document.querySelector("body > section:last-child > ol > li:first-child"); 은 같은 것이다.
==> 복수개가 아닌 1개 항목에만 적용시킨다면, querySelector 로 사용해도 된다. 단, 복수개 항목에 적용시킨다면, querySelectorAll 을 사용해야 한다.
*/
apple.style.color = "#40ff00";
apple.style.fontWeight = "bold";
}// end of window.onload = function() {}--------------------------------------------
</script>
</head>
<body>
<div>red</div>
<div>green</div>
<div>blue</div>
<br/>
<section>
<button type="button" class="btn">버튼1</button> <!-- 홀수번째에 class="btn" 속성을 주었다. -->
<button type="button">버튼2</button>
<button type="button" class="btn">버튼3</button>
<button type="button">버튼4</button>
<button type="button" class="btn">버튼5</button>
<button type="button">버튼6</button>
</section>
<br/>
<section>
<ul style="list-style-type: none;"> <!-- 리스트 앞에 기호없음 -->
<li>
<label for="hobby1">게임</label> <!-- label태그 for속성 == input태그 id속성은 동일해야 한다. --> <!-- label태그는 form 태그의 제목(이름) -->
<input id="hobby1" type="checkbox" value="game" name="hobby" /> <!-- type="checkbox"(다중선택 필드) 가 나오면 name속성이 무조건 동일해야 한다.!!! -->
<span class="hobby_val"></span>
</li>
<li>
<label for="hobby2">영화감상</label>
<input id="hobby2" type="checkbox" value="movie" name="hobby" />
<span class="hobby_val"></span>
</li>
<li>
<label for="hobby3">글쓰기</label>
<input id="hobby3" type="checkbox" value="writing" name="hobby" />
<span class="hobby_val"></span>
</li>
<li>
<label for="hobby4">음악감상</label>
<input id="hobby4" type="checkbox" value="music" name="hobby"/>
<span class="hobby_val"></span>
</li>
</ul>
<button type="button" id="btnOK">확인</button>
<button type="button" id="btnChkbox">체크박스에 체크된것 알아오기</button>
<button type="button" id="btnEraser">지우기</button>
<button type="button" id="btnChkboxClear">체크박스 모두 해제하기</button>
<br/>
체크박스에 체크가 되어진 값 : <span id="result"></span>
</section>
<section>
<ol>
<li>사과</li>
<li>딸기</li>
<li>포도</li>
<li>수박</li>
</ol>
<ol>
<li>파스타</li>
<li>모밀</li>
<li>칼국수</li>
<li>비빔냉면</li>
</ol>
<ol>
<li>국어</li>
<li>영어</li>
<li>수학</li>
<li>체육</li>
</ol>
</section>
</body>※ 태그를 노드 라고도 부른다. 배열을 리스트 라고도 부른다.
※ CSS에서 background-color 와 같이 스네이크기법으로 했던것을
자바스크립트에서는 backgroundColor 와 같이 카멜기법으로 바꾸어야만 한다!!
1. 태그를 가지고 선택자를 잡는 방법
document.getElementsByTagName("태그명");
document.getElementsByTagName("태그명"); 을 실행하면 리턴타입은 모두 객체(object)배열 타입이다.
<body> <div> 등 태그는 모두 객체(object)이다.
const arrDiv = document.getElementsByTagName("div"); // arrDiv 은 배열이다.
// alert("배열 arrDiv 의 길이 => " + arrDiv.length); // alert() 는 웹사이트상 경고창을 띄우는 것이다.
// 배열 arrDiv 의 길이 => 3
for(var i=0; i<arrDiv.length; i++) {
arrDiv[i].style.display = "inline-block"; // arrDiv[i].style. ==> 객체(arrDiv[i] 즉, div 태그의 배열)에 css의 속성값을 주는 것이다. display = "inline-block" 속성을 주었다.
arrDiv[i].style.border = "solid 1px gray"; // border 속성
arrDiv[i].style.width = "200px"; // width 속성
arrDiv[i].style.height = "150px"; // height 속성
arrDiv[i].style.margin = "20px"; // margin 속성
arrDiv[i].style.backgroundColor = arrDiv[i].innerText; // backgroundColor 속성. arrDiv[i].innerText = 속성값 즉, 배열 arrDiv[i]의 안에 innerText(red,gree,blue) 글자 그대로 적용시킨다.
arrDiv[i].style.color = "white"; // color 속성(글씨 색상)
}// end of for-----------------------------------------
------------------------------------------------------------------------------------------------------
<body>
<div>red</div>
<div>green</div>
<div>blue</div>
</body>
1. 배열명[i].style.속성 = "속성의 타입 ";
: 배열명[i].style ==> 객체(배열명[i] 즉, div 등 태그의 배열)에 css의 속성값을 주는 것이다.
속성 = "속성의 타입" ==> 속성을 지정한다.
1-1 arrDiv[i].style.display = "inline-block"; // arrDiv[i].style.
: arrDiv[i].style. ==> 객체(arrDiv[i] 즉, div 태그의 배열)에 css의 속성값을 주었다.
display = "inline-block" 속성을 주었다.
1-2. arrDiv[i].style.backgroundColor = arrDiv[i].innerText;
: arrDiv[i].style. ==> 객체(arrDiv[i] 즉, div 태그의 배열)에 css의 속성값을 주었다.
backgroundColor = "arrDiv[i].innerText" 속성을 주었다. 즉, 배열 arrDiv[i]의 안에 innerText(red, gree, blue)
글자 그대로 적용시킨다.
※ innerHTML 과 innerText 차이점
두가지 모두 버튼을 눌렀을 때 div 영역에 내용을 출력하는데 사용하는 프로퍼티이다.
아래와 같이 차이점을 가지고 있다.
innerHTML : 설정한 엘리먼트의 HTML 구조 모든 것을 가져온다. 즉, text 와 css 속성을 모두 가져와 반영하는 것이다.
innerText : 설정한 엘리먼트의 입력된 텍스트 값만 가져온다. 즉, 오로지 text 값만 가져오는 것이다.
2. alert() : 웹사이트상 경고창을 띄우는 것을 의미한다.
2. 클래스명을 가지고 선택자를 잡는 방법
document.getElementsByClassName("클래스명");
document.getElementsByClassName("클래스명"); 을 실행하면 리턴타입은 모두 객체(object)배열 타입이다.
<body> <div> 등 태그는 모두 객체(object)이다.
const arrBtn = document.getElementsByClassName("btn");
for(var i=0; i<arrBtn.length; i++) {
arrBtn[i].style.backgroundColor ="navy";
arrBtn[i].style.color ="white";
}// end of for-----------------------------------------
-----------------------------------------------------------------------------------------------------
<body>
<section>
<button type="button" class="btn">버튼1</button> <!-- 홀수번째에 class="btn" 속성을 주었다. -->
<button type="button">버튼2</button>
<button type="button" class="btn">버튼3</button>
<button type="button">버튼4</button>
<button type="button" class="btn">버튼5</button>
<button type="button">버튼6</button>
</section>
</body>
3. name 속성을 가지고 선택자를 잡는 방법
document.getElementsByName("name값");
동일한 Name 속성이 잡힌 태그의 value 속성을 매칭한다.
Name 속성이 동일한 value 값을 배열로 묶어주어 출력한다.
document.getElementsByClassName("클래스명"); 을 실행하면 리턴타입은 모두 객체(object)배열 타입이다.
<body> <div> 등 태그는 모두 객체(object)이다.
const arrHobby = document.getElementsByName("hobby");
for(var i=0; i<arrHobby.length; i++) {
console.log(arrHobby[i].value); // 콘솔에 출력한다. name 속성을 가지고 선택자를 잡으면, arrHobby[i].value ==> arrHobby[i] 배열의 value 값을 출력한다.
/*
game
movie
writing
music
*/
}// end of for-----------------------------------------
// checkbox 의 개수와 <span> 태그의 개수가 같은 것을 이용한다.
const arrSpan = document.getElementsByClassName("hobby_val"); // span 태그의 class 속성을 가지고 선택자를 잡으면, arrHobby[i].value ==> arrHobby[i] 배열의 value 값을 출력한다.
for(var i=0; i<arrSpan.length; i++) {
arrSpan[i].innerHTML = arrHobby[i].value // 비어있는 <span> 태그에 arrHobby[i].value(즉, arrHobby[i] 배열의 value)값을 넣어준다.
}// end of for-----------------------------------------
const arrLabel = document.getElementsByTagName("label");
for(var i=0; i<arrLabel.length; i++) {
arrLabel[i].style.color ="red"; // 게임 영화감상 글쓰기 음악감상
}// end of for-----------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------
<section>
<ul style="list-style-type: none;"> <!-- 리스트 앞에 기호없음 -->
<li>
<label for="hobby1">게임</label> <!-- label태그 for속성 == input태그 id속성은 동일해야 한다. --> <!-- label태그는 form 태그의 제목(이름) -->
<input id="hobby1" type="checkbox" value="game" name="hobby" /> <!-- type="checkbox"(다중선택 필드) 가 나오면 name속성이 무조건 동일해야 한다.!!! -->
<span class="hobby_val"></span>
</li>
<li>
<label for="hobby2">영화감상</label>
<input id="hobby2" type="checkbox" value="movie" name="hobby" />
<span class="hobby_val"></span>
</li>
<li>
<label for="hobby3">글쓰기</label>
<input id="hobby3" type="checkbox" value="writing" name="hobby" />
<span class="hobby_val"></span>
</li>
<li>
<label for="hobby4">음악감상</label>
<input id="hobby4" type="checkbox" value="music" name="hobby"/>
<span class="hobby_val"></span>
</li>
</ul>
</section>
1. const arrHobby = document.getElementsByName("hobby");
for(var i=0; i<arrHobby.length; i++) {
console.log(arrHobby[i].value); // game, movie, writing, music
}
: 콘솔에 출력한다. name 속성을 가지고 선택자를 잡으면, arrHobby[i].value ==> arrHobby[i] 배열의 value 값을 출력한다.
2. const arrSpan = document.getElementsByClassName("hobby_val");
for(var i=0; i<arrSpan.length; i++) {
arrSpan[i].innerHTML = arrHobby[i].value
}
: innerHTML 방식으로 출력한다.
span 태그의 class 속성을 가지고 선택자를 잡으면, arrHobby[i].value ==> arrHobby[i] 배열의 value 값을 출력한다. 비어있는 태그에 arrHobby[i].value(즉, arrHobby[i] 배열의 value)값을 넣어준다.
3. const arrLabel = document.getElementsByTagName("label");
for(var i=0; i<arrLabel.length; i++) {
arrLabel[i].style.color ="red"; // 게임 영화감상 글쓰기 음악감상 => 글자색에 빨강을 주었다.
}
: 객체(arrLabel[i])에 css의 속성값을 주었다.
color = "red" 속성을 주었다. 즉, 배열 arrLabel[i]의 안에 글자색을 빨강으로 변경한다.
4. id 값을 가지고 선택자를 잡는 방법
document.getElementById("id값");
※ Element 주의! (앞에서는 Elements 였다.)
동일한 Id 속성이 잡힌 태그의 value 속성을 매칭한다.
Id 속성이 동일한 value 값을 배열로 묶어주어 출력한다.
document.getElementsByClassName("클래스명"); 을 실행하면 리턴타입은 모두 객체(object)배열 타입이다.
<body> <div> 등 태그는 모두 객체(object)이다.
const btnOK = document.getElementById("btnOK");
// --- btnOK(확인버튼)을 클릭하면 alert("확인버튼을 클릭하셨군요"); 를 띄우고자 한다.
// === 엘리먼트(객체)를 클릭하면 발생하는 이벤트 핸들러 생성하기 ===
/*
btnOK.onclick = function() { // btnOK 은 객체 (태그는 모두 객체이다.) onclick 은 클릭하는 것이다.
// btnOK 를 이벤트소스 라고 부른다.
// onclick 을 이벤트 라고 부른다. 지금은 클릭이벤트 이다.
// function() { } 부분을 핸들러(처리)라고 부른다.
// window.alert("확인버튼을 클릭하셨군요 -1"); // window 는 생략가능하다.
alert("확인버튼을 클릭하셨군요 -1");
};
*/
// --- 또는 ---
/*
btnOK.addEventListener("click", function(){
alert("확인버튼을 클릭하셨군요 -2");
});
*/
// --- 또는 ---
btnOK.addEventListener("click", ()=>{
alert("확인버튼을 클릭하셨군요 -3");
});
// --- btnChkbox(체크박스에 체크된것 알아오기)을 클릭하면 체크박스에 체크된것만의 value값 알아오기 ---- //
const btnChkbox = document.getElementById("btnChkbox");
// === 엘리먼트(객체)를 클릭하면 발생하는 이벤트 핸들러 생성하기 === //
btnChkbox.onclick = function(){ // {} 를 벗어나면 소멸된다.
const arrHobby = document.getElementsByName("hobby"); // arrHobby 는 체크박스를 의미한다.
let result = "";
let cnt = 0;
console.log("\n~~~~~~~~~~~~~~~~~~~~~~\n");
for(var i=0; i<arrHobby.length; i++) {
// console.log(arrHobby[i].value + "=> " + arrHobby[i].checked ); // arrHobby[i] 는 체크박스를 의미한다.
// 체크박스의엘리먼트.checked ==> 체크가 되어져 있으면 true, 체크가 안되어져 있으면 false ==> 이말은 arrHobby[i] 즉, 체크박스에서 checked 가 되면 true, 안되면 false 로 나타난다. (웹브라우저상 F12)
if(arrHobby[i].checked) { // 체크박스에 체크가 되었더라면
cnt++;
let s_comma = (cnt==1)?"":","; // 삼항연산자. s_Comma 는 stirng 타입 comma 라는 의미이며, 통상적으로 개발자들 사이에서 쓰인다. 그냥 comma 로 입력해도 된다.
result += s_comma + arrHobby[i].value; // value 값은 게임, 영화감상, 글쓰기, 음악감상
}
}// end of for-----------------------------------------
// 게임과 글쓰기와 음악감상을 체크를 했다라면 결과물은 콘솔창에
// game, writing, music 와 같이 출력되어야 한다. ==> ,game, writing, music 에서 맨앞 콤마(,) 만 출력을 안해주면 된다.
// console.log(result); // result 값을 출력한다.
document.getElementById("result").innerHTML = result;
};
//////////////////////////////////////////////////////////////////////////////
const btnEraser = document.getElementById("btnEraser");
btnEraser.addEventListener("click", function() {
document.getElementById("result").innerHTML = " "; // 클릭해주면, 싹 비워라(" ")
});
//////////////////////////////////////////////////////////////////////////////
const btnChkboxClear = document.getElementById("btnChkboxClear");
btnChkboxClear.onclick = ()=>{ // 클릭해주면,
const arrHobby = document.getElementsByName("hobby");
for(var i=0; i<arrHobby.length; i++) {
arrHobby[i].checked = false; // arrHobby 즉, 체크박스는 모두 해제된다.
}// end of for-----------------------------------------
};
-----------------------------------------------------------------------------------------------------
<section>
<button type="button" id="btnOK">확인</button>
<button type="button" id="btnChkbox">체크박스에 체크된것 알아오기</button>
<button type="button" id="btnEraser">지우기</button>
<button type="button" id="btnChkboxClear">체크박스 모두 해제하기</button>
<br/>
체크박스에 체크가 되어진 값 : <span id="result"></span>
</section>
1. btnOK(확인버튼)을 클릭하면 alert("확인버튼을 클릭하셨군요"); 를 띄우는 방법
엘리먼트(객체)를 클릭하면 발생하는 이벤트 핸들러 생성하는 것은 아래와 같이 세가지 방법이 있다.
1. const btnOK = document.getElementById("btnOK");
btnOK.onclick = function() { // {} 를 벗어나면 소멸된다.
// window.alert("확인버튼을 클릭하셨군요 -1"); // window 는 생략가능하다.
alert("확인버튼을 클릭하셨군요 -1");
};
: btnOK 를 이벤트소스 라고 부른다. btnOK 은 객체 (태그는 모두 객체이다.)
onclick 을 이벤트 라고 부른다. 지금은 클릭이벤트 이다. onclick 은 클릭하는 것이다.
function() { } 부분을 핸들러(처리)라고 부른다.
2. const btnOK = document.getElementById("btnOK");
btnOK.addEventListener("click", function(){
// window.alert("확인버튼을 클릭하셨군요 -2"); // window 는 생략가능하다.
alert("확인버튼을 클릭하셨군요 -2");
});
3. const btnOK = document.getElementById("btnOK");
btnOK.addEventListener("click", ()=>{ // function 생략 가능!!
// window.alert("확인버튼을 클릭하셨군요 -3"); // window 는 생략가능하다.
alert("확인버튼을 클릭하셨군요 -3");
});
2. btnChkbox(체크박스에 체크된것 알아오기) 클릭하면, 체크박스에 체크된것만의 value값 알아오는 방법
엘리먼트(객체)를 클릭하면 발생하는 이벤트 핸들러 생성하는 것은 아래와 같은 방법이 있다.
1. const btnChkbox = document.getElementById("btnChkbox");
btnChkbox.onclick = function(){
const arrHobby = document.getElementsByName("hobby"); // arrHobby 는 체크박스를 의미한다.
let result = "";
let cnt = 0;
for(var i=0; i<arrHobby.length; i++) {
// console.log(arrHobby[i].value + "=> " + arrHobby[i].checked );
if(arrHobby[i].checked) { // 체크박스에 체크가 되었더라면
cnt++;
let s_comma = (cnt==1)?"":","; // 삼항연산자.
result += s_comma + arrHobby[i].value; // value 값 => 게임, 영화감상, 글쓰기, 음악감상
}
}// end of for-----------------------------------------
document.getElementById("result").innerHTML = result; // result 값을 출력한다.
}; // end of btnChkbox.onclick = function(){---------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------
const btnEraser = document.getElementById("btnEraser");
btnEraser.addEventListener("click", function() {
document.getElementById("result").innerHTML = " "; // 클릭해주면, 싹 비워라(" ")
});
------------------------------------------------------------------------------------------------------------------------------------------------------
const btnChkboxClear = document.getElementById("btnChkboxClear");
btnChkboxClear.onclick = ()=>{ // 클릭해주면,
const arrHobby = document.getElementsByName("hobby");
for(var i=0; i<arrHobby.length; i++) {
arrHobby[i].checked = false; // name 속성이 hobby 인 배열 arrHobby(게임,영화감상,글쓰기,음악감상)
즉, 체크박스는 모두 해제된다.
}// end of for-----------------------------------------
};
};
- console.log(arrHobby[i].value + "=> " + arrHobby[i].checked );
: arrHobby[i] 는 체크박스를 의미한다.
체크박스의엘리먼트.checked ==> 체크가 되어져 있으면 true, 체크가 안되어져 있으면 false
따라서, arrHobby[i] 즉, 체크박스에서 checked 가 되면 true, 안되면 false 로 나타난다. (웹브라우저상 F12)
- s_comma
: s_Comma 는 stirng 타입 comma 라는 의미이며, 통상적으로 개발자들 사이에서 쓰인다. 그냥 comma 로 입력해도 된다.
- let s_comma = (cnt==1)?"":","; // 삼항연산자.
result += s_comma + arrHobby[i].value;
: 게임과 글쓰기와 음악감상을 체크를 했다라면 결과물은 콘솔창에 game, writing, music 와 같이 출력되어야 한다.
==> ,game, writing, music 에서 맨앞 콤마(,) 만 출력을 안해주면 된다.
5. css 선택자를 가지고 잡는 방법 1번째 방법
document.querySelectorAll(css선택자) ;
const arr_li = document.querySelectorAll("body > section:last-child > ol > li:nth-child(3)"); // 각 li:ntn-chile(3) 만 잡아온다. 복수개이므로 arr 배열을 만들어준다.
for(var i=0; i<arr_li.length; i++) { // 복수개이므로 for 문으로 돌린다.
arr_li[i].style.color = "#ff6666";
arr_li[i].style.fontStyle = "italic";
arr_li[i].style.fontWeight = "bold";
}// end of for-----------------------------------------
-----------------------------------------------------------------------------------------------------
<section>
<ol>
<li>사과</li>
<li>딸기</li>
<li>포도</li>
<li>수박</li>
</ol>
<ol>
<li>파스타</li>
<li>모밀</li>
<li>칼국수</li>
<li>비빔냉면</li>
</ol>
<ol>
<li>국어</li>
<li>영어</li>
<li>수학</li>
<li>체육</li>
</ol>
</section>
const arr_li = document.querySelectorAll("body > section:last-child > ol > li:nth-child(3)");
// css 속성을 적용시킬 각 li:nth-child(3) 만 잡아온다. 복수개이므로 arr 배열을 만들어준다.
for(var i=0; i<arr_li.length; i++) { // 배열은 복수개이므로 for 문으로 돌린다.
arr_li[i].style.color = "#ff6666";
arr_li[i].style.fontStyle = "italic";
arr_li[i].style.fontWeight = "bold";
} // end of for-----------------------------------------
- const arr_li = document.querySelectorAll("body > section:last-child > ol > li:nth-child(3)");
: css 속성을 적용시킬 각 "body > section:last-child > ol > li:nth-child(3)" 만 잡아온다.
복수개이므로 arr 배열을 만들어준다
6. css 선택자를 가지고 잡는 2번째 방법
document.querySelectorAll(css선택자) ;
/*
const arr2_li = document.querySelectorAll("body > section:last-child > ol > li:first-child");
for(var i=0; i<arr2_li.length; i++) {
arr2_li[i].style.color = "#40ff00";
arr2_li[i].style.fontWeight = "bold";
}// end of for-----------------------------------------
*/
const apple = document.querySelector("body > section:last-child > ol > li:first-child");
apple.style.color = "#40ff00";
apple.style.fontWeight = "bold";
-----------------------------------------------------------------------------------------------------
<section>
<ol>
<li>사과</li>
<li>딸기</li>
<li>포도</li>
<li>수박</li>
</ol>
<ol>
<li>파스타</li>
<li>모밀</li>
<li>칼국수</li>
<li>비빔냉면</li>
</ol>
<ol>
<li>국어</li>
<li>영어</li>
<li>수학</li>
<li>체육</li>
</ol>
</section>
const arr2_li = document.querySelectorAll("body > section:last-child > ol > li:first-child");
// css 속성을 적용시킬 각 li:first-child 만 잡아온다. 복수개이므로 arr 배열을 만들어준다.
for(var i=0; i<arr2_li.length; i++) {
arr2_li[i].style.color = "#40ff00";
arr2_li[i].style.fontWeight = "bold";
} // end of for-----------------------------------------
- const arr2_li = document.querySelectorAll("body > section:last-child > ol > li:first-child");
: css 속성을 적용시킬 각 "body > section:last-child > ol > li:first-child" 만 잡아온다.
복수개이므로 arr 배열을 만들어준다
------------------------------------------------------------------------------------------------------------------------------------------------------
const apple = document.querySelector("body > section:last-child > ol > li:first-child");
// 또는 const arr2_li = document.querySelectorAll("body > section:last-child > ol > li:first-child")[0];
apple.style.color = "#40ff00";
apple.style.fontWeight = "bold";
} // end of window.onload = function() {}--------------------------------------------
- const apple = document.querySelector("body > section:last-child > ol > li:first-child");
// 변수 apple의 "body > section:last-child > ol > li:first-child" 만 적용한다.
또는
- const arr2_li = document.querySelectorAll("body > section:last-child > ol > li:first-child")[0];
// 배열 arr2_li의 body > section:last-child > ol > li:first-child" 중에서 index 0인 것(1번째 항목)만 적용한다.
: 위의 두 코드식은 동일한 것이다.
1개 항목에만 적용시킨다면, querySelector 을 사용하고,
복수개 항목에만 적용시킨다면, querySelectorAll 을 사용하면 된다.
※ 웹브라우저에 출력하는 2가지 방법
console.log 과 innerHTML(innerText ) 을 이용하는 두가지 방법이 있으며, 아래와 같이 차이점을 가지고 있다.
1. console.log 를 이용한 방법
단, 웹브라우저 상 키보드 F12 을 눌렀을 경우에만 콘솔창에서 확인 가능하다.
innerHTML(innerText ) 보다 빠르게 확인이 가능하다는 장점이 있지만, 실행 형태가 아닌 코드가 출력만 된다.
- console.log(객체명.value) : console.log 안에 출력하고자 하는 객체명.value 를 찍어준다. 해당 value 값이 출력된다.
- console.log(배열명.value) : console.log 안에 출력하고자 하는 배열명.value 를 찍어준다. 해당 value 값이 순서대로 출력된다.
2. innerHTML(innerText ) 를 이용한 방법
웹브라우저 상 바로 확인 가능하다. 실행 형태로 보여진다.
- 객체명.innerHTML(innerText ) = 객체명.value : 객체명.innerHTML(또는 객체명.innerText) = 객체명.value를 찍어준다.
해당 value 값이 출력된다.
- 배열명.innerHTML(innerText ) = 배열명.value : 객체명.innerHTML(또는 객체명.innerText) = 객체명.value를 찍어준다.
해당 value 값이 순서대로 출력된다.
'Langauge > JavaScript' 카테고리의 다른 글
| [JavaScript] 배열(2) - 배열의 메소드 (0) | 2022.08.15 |
|---|---|
| [JavaScript] 배열(1) - 배열 생성, FOR 문, 반복문으로 사용되는 forEach(), 이벤트 처리 (0) | 2022.08.15 |
| [JavaScript] Number(숫자 타입) 속성 (0) | 2022.08.11 |
| [JavaScript] String 속성 (0) | 2022.08.10 |
| [JavaScript] object 속성 (0) | 2022.08.10 |