[javascript] getElement 관련 함수

[javascript] getElement 관련 함수

---

✔️ getElement 관련 함수

function result() {
	let str;
	
	// id로 접근
	let name = document.getElementById("name").value;
	// name으로 접근
	let age = document.getElementsByName("age")[0].value;
	// tag로 접근
	let birth = document.getElementsByTagName("input")[2].value;
	// 선택자로 접근
	// let chk = document.querySelector("input[type=checkbox]").value;
	let chk = document.querySelector("input[type=checkbox]").checked;
	// let chk = document.querySelectorAll("input[type=checkbox]")[0].checked;
	// class 속성으로 접근
	let tel = document.getElementsByClassName("telClass")[0].value;
	
	str = "이름 : " + name + "<br>";
	str += "나이 : " + age + "<br>";
	str += "생일 : " + birth + ", 양력 : " + chk + "<br>";
	str += "전화 : " + tel + "<br>";
	str += "과목 : ";

	let ss = document.querySelectorAll("input[name=subject]");
	for(let s of ss) {
		str += s.value + " ";
	}
	
	document.querySelector("#resultLayout").innerHTML = str;
	
	const inputs = document.querySelectorAll("input[type=text]");
	for(let el of inputs) {
		el.style.border = "1px solid #f00";
	}
}

💡 input 타입이 checkbox 이며 체크된 경우
document.querySelector("input[type=checkbox]").checked;

💡 클래스 이름으로 접근
document.getElementsByClassName("telClass")[0].value