인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.
HTML Element 컨트롤
<기본 개념>
//HTML Element에 접근하는 방법
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
Text:
<br>
<input type="text" id="text1">
<br>
<button type="button" onclick="doSave();">Save</button>
<script>
function doSave( ){
var oText1 = document.getElementById("text1");
console.log(oText1);
var oText2 = document.querySelector("#text1");
console.log(oText2);
// 결과 : <input type="text" id="text1">
//위의 두 가지 방법으로 HTML Element에 접근할 수 있으며,
//콘솔창의 결과 값은 모두 <input type="text" id="text1">로 동일하다.
}
</script>
</body>
</html>
//HTML Element에 접근하여, 속성 값을 새롭게 부여하는 방법
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
Text:
<br>
<input type="text" id="text1">
<br>
<button type="button" onclick="doSave();">Save</button>
<script>
function doSave( ){
document.getElementById("text1").value = "32831831";
//이 경우, id가 'text1'인 HTML Element의 value 값은 32831831이 된다.
//이처럼 HTML Element에 접근하여 해당 Element의 속성 값을
//새롭게 부여하거나 변경할 수 있다.
}
</script>
</body>
</html>
//HTML Checkbox에 접근하는 방법
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<br> 관심사:
<label>
<input type="checkbox" name="chk_interest" value="it">IT/컴퓨터</label>
<label>
<input type="checkbox" name="chk_interest" value="entertainment">엔터테인먼트</label>
<label>
<input type="checkbox" name="chk_interest" value="sports">스포츠</label>
<label>
<input type="checkbox" name="chk_interest" value="shopping">쇼핑</label>
<label>
<input type="checkbox" name="chk_interest" value="book">도서</label>
<br>
<script>
function doSave( ){
var oCheckbox = document.getElementsByName("chk_interest");
var oCheckbox2 = document.querySelectorAll("[name=chk_interest]");
// 결과 : NodeList(5) [input, input, input, input, input]
//이러한 방식으로 Checkbox에 접근할 수 있다.(두 가지 방법 모두 동일한 결과)
//Checkbox의 name이 동일해야만, 하나의 Checkbox로 묶일 수 있다.
}
</script>
</body>
</html>
//HTML Checkbox에서 체크된 값만 가져오는 방법
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<br> 관심사:
<label>
<input type="checkbox" name="chk_interest" value="it">IT/컴퓨터</label>
<label>
<input type="checkbox" name="chk_interest" value="entertainment">엔터테인먼트</label>
<label>
<input type="checkbox" name="chk_interest" value="sports">스포츠</label>
<label>
<input type="checkbox" name="chk_interest" value="shopping">쇼핑</label>
<label>
<input type="checkbox" name="chk_interest" value="book">도서</label>
<br>
<script>
function doSave( ){
var oCheckbox = document.getElementsByName("chk_interest");
for(var i = 0 ; i < oCheckbox.length ; i++){
if(oCheckbox[i].checked){
console.log(oCheckbox[i].value);
}
}
var oCheckbox2 = document.querySelectorAll("[name=chk_interest]:checked");
console.log(oCheckbox2);
// 결과 : 두 가지 방식 모두 동일하게 Checkbox에서 체크된 값을 가져온다.
//document.getElementsByName은 for문과 함께 사용하는 반면에,
//document.querySelectorAll은 parameter 값으로
//[name=chk_interest]:checked를 사용하면 동일한 결과 값을 얻을 수 있다.
//즉, document.querySelectorAll의 parameter 값이
//[name=chk_interest]라면, name이 chk_interest인 Element를
//모두 가져오겠다는 의미이며, 만약 parameter 값이
//[name=chk_interest:checked]라면, name이 chk_interest인
//Element에서 체크된 값만 가져오겠다는 의미이다.(for문과 동일한 기능)
//결국 querySelectorAll을 사용했을 때 코드가 더욱 간결해진다.
//document.querySelectorAll의 결과 값은 무조건 배열 형태로 출력된다.
}
</script>
</body>
</html>
//HTML Radio에 접근하는 방법
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<br> Radio:
<label>
<input type="radio" name="radio_email_yn" value="Y" checked>동의</label>
<label>
<input type="radio" name="radio_email_yn" value="N">거부</label>
<br>
<script>
function doSave( ){
var oRadio = document.querySelector("[name=radio_email_yn]:checked");
console.log(oRadio);
// 결과 :
//<input type="radio" name="radio_email_yn" value="Y" checked="">
//이러한 방식으로 HTML의 Radio에 접근할 수 있다.
//Radio는 선택된 값이 1개이므로, querySelectorAll이 아닌
//querySelector를 사용해야 한다.
}
</script>
</body>
</html>
//HTML Select에 접근하는 방법
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<br> Select:
<select id="select1">
<option value="KO">Korea</option>
<option value="CN">China</option>
<option value="JP">Japan</option>
</select>
<br>
<script>
function doSave( ){
var oSelect = document.getElementById("select1");
console.log(oSelect.value);
// 결과 : 선택된 옵션의 value 값이 출력된다.
//이러한 방식으로 HTML의 Select에 접근할 수 있다.
}
</script>
</body>
</html>
//HTML div 태그에 접근하는 방법
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<br>
<div id="div1"><h1>ABCDEFG</h1></div>
<br>
<script>
function doSave( ){
console.log(document.getElementById("div1"));
// 결과 : <div id="div1"><h1>ABCDEFG</h1></div>
console.log(document.getElementById("div1").innerText);
// 결과 : ABCDEFG
console.log(document.getElementById("div1").innerHTML);
// 결과 : <h1>ABCDEFG</h1>
console.log(document.getElementsByTagName("div"));
// 결과 : HTMLCollection [div#div1, div1: div#div1]
//HTML의 모든 div 태그를 가져온다.
}
</script>
</body>
</html>
댓글