728x90
Node ?
- JavaSciprt에서 html 모든 요소
- window
- document -> 문서노드
- html -> 루트노드
- src, width, height 속성노드 cf) <img, src, width = 400, height = 400>
ParentNode
<!DOCTYPE html>
<head>
<style>
.f{
border: 1px solid gray;
padding: 20px;
border-radius: 10px;
width: 500px;
}
</style>
</head>
<body>
<div class="f">
<h1>JavaScript</h1>
<P>
가나다라마바사아자차카타파하
abcdefghijklmnopqrstuvwxyz
한글
English
얄리얄리얄라셩 얄라리얄라
나랏말사미 듕귁에 달라
</P>
<button id="bu">클릭</button>
</div>
<script>
let f=document.querySelector(".f");
let b=document.getElementById("bu");
// 버튼 클릭시 이벤트 발생
b.addEventListener('click',function(){
this.parentNode.style.backgroundColor='gold';
this.parentNode.style.boxShadow='0 0 20px navy';
//parentnode 부모노드 선택
})
</script>
</body>
</html>
childNode
cf) 공백을 지울때는 remove line breaks를 하고 하는게 좋다!
<!DOCTYPE html>
<head>
<style>
</style>
</head>
<body>
<div class="f">
<h1>javascript</h1>
<p>
(세종=연합뉴스) 신선미 기자 = 정부가 물량 부족에 따른 가격 상승을
막기 위해 2030년까지 사과·배 계약재배물량을 각각 세 배,
1.5배로 늘리고 기후변화에 대응해 강원도에 사과 재배지를
2천㏊(헥타르·1만㎡) 조성하기로 했다.
</p>
<button id="bu">클릭</button>
</div>
</body>
<script>
let f=document.querySelector(".f");
let n=f.childNodes.length;
f.childNodes[1].style.color='red';
</script>
</html>
<!DOCTYPE html>
<head>
<style>
</style>
</head>
<body>
<div class="f">
<h1>javascript</h1>
<p>
(세종=연합뉴스) 신선미 기자 = 정부가 물량 부족에 따른 가격 상승을
막기 위해 2030년까지 사과·배 계약재배물량을 각각 세 배,
1.5배로 늘리고 기후변화에 대응해 강원도에 사과 재배지를
2천㏊(헥타르·1만㎡) 조성하기로 했다.
</p>
</div>
</body>
<script>
let f=document.querySelector(".f");
f.firstChild.textContent='첫번째 텍스트';
//첫번째 자손
f.lastChild.textContent='마지막 텍스트';
//마지막 자손
</script>
<!DOCTYPE html>
<head>
<style>
</style>
</head>
<body>
<div class="f">
<h1>javascript</h1>
<p>
(세종=연합뉴스) 신선미 기자 = 정부가 물량 부족에 따른 가격 상승을
막기 위해 2030년까지 사과·배 계약재배물량을 각각 세 배,
1.5배로 늘리고 기후변화에 대응해 강원도에 사과 재배지를
2천㏊(헥타르·1만㎡) 조성하기로 했다.
</p>
</div>
</body>
<script>
let f=document.querySelector(".f");
f.firstElementChild.style.color='red';
//공백을 뺀 첫번째 자손
f.lastElementChild.style.color='blue';
//공백을 뺀 마지막 자손
</script>
</html>
ElementSibling
<!DOCTYPE html>
<head>
<style>
</style>
</head>
<body>
<div class="f">
<h1>javascript</h1>
<div class="c">
<h2>css</h2>
<p>
(세종=연합뉴스) 신선미 기자 = 정부가 물량 부족에 따른 가격 상승을
막기 위해 2030년까지 사과·배 계약재배물량을 각각 세 배,
1.5배로 늘리고 기후변화에 대응해 강원도에 사과 재배지를
2천㏊(헥타르·1만㎡) 조성하기로 했다.
</p>
</div>
</div>
</body>
<script>
let f = document.querySelector(".f");
let c = document.querySelector(".c");
let z = document.querySelector(".c h2");
// p태그 선택
z.nextElementSibling.style.border = '2px solid red';
c.previousElementSibling.style.border = '2px solid blue';
</script>
</html>
form 요소 접근
document.폼네임.요소네임
<!DOCTYPE html>
<head>
<style>
</style>
</head>
<body>
<form name="test">
<input type="text" name="test2">
</form>
</body>
<script>
//document.폼네임.요소네임
//document.forms['폼네임'].elements['요소네임']
//document.forms['폼네임']['요소네임']
let n=document.test.test2;
n.style.border='2px solid red';
let n2=document.forms['test'].elements['test2'];
n2.style.backgroundColor='yellow';
let n3=document.forms['test']['test2'];
n3.style.padding='20px';
</script>
</html>
<!DOCTYPE html>
<head>
<style>
</style>
</head>
<body>
<form name="test">
<input type="text" name="test2">
</form>
<div id="pr"></div>
</body>
<script>
let n=document.test.test2; //<input>
let n2=document.getElementById('pr'); //<div>
n.onkeyup=function(){
let n3=this.value; //text에 입력한 값이 n3에 저장(내가 입력한값)
//입력한 값을 n2에 띄운다
n2.textContent=n3;
}
</script>
</html>
onkeyup 으로 접근
<!DOCTYPE html>
<head>
<style>
</style>
</head>
<body>
<form name="test" class="t">
<input type="text" name="first" maxlength="6"
value="001111" disabled>
<input type="text" name="gender" maxlength="1">
<input type="radio" name="g1" id="male">
<label for="male">남</label>
<input type="radio" name="g1" id="female">
<label for="female">여</label>
</form>
</body>
<script>
let n=document.test.gender; //하나의 숫자
let male=document.getElementById('male');
let female=document.getElementById('female');
n.onkeyup=function(){
let num=this.value;
if(num >=1 && num<=4){
if(num==1 || num==3){
male.checked=true;
female.checked=false;
}
else{
male.checked=false;
female.checked=true;
}
}
}
</script>
</html>
<!DOCTYPE html>
<head>
<style>
.di {
border-radius: 10px;
width: 300px;
box-shadow: 0 0 20px red;
padding: 20px;
}
#me .di2 {
display: flex;
margin: 10px 0;
}
#me .di2 label {
flex: 3;
/* flex:1 = flex-grow :1, flex-shrink:1, flex-basis:0 */
}
#me .di2 input {
border: 1px solid greenyellow;
border-radius: 5px;
padding: 5px;
}
#inputb {
width: 100%;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="di">
<h2>정보입력</h2>
<form id="me" name="test" class="t">
<div class="di2">
<label for="username">이름</label>
<input type="text" id="username" name="username">
</div>
<div class="di2">
<label for="addr">주소</label>
<input type="text" id="addr" name="addr">
</div>
<input type="submit" value="정보입력" id="inputb">
</form>
</div>
</body>
<script>
let n = document.getElementById('me'); //form
n.onsubmit = function () {
let n2 = document.createElement('p');
n2.textContent = this.username.value + ' , ' + this.addr.value;
//p태그에 입력한 이름, 주소 들어감
n.appendChild(n2);
this.username.value = '';
this.addr.value = '';
return false;
}
</script>
</html>
<!DOCTYPE html>
<head>
<style>
</style>
</head>
<body>
<form name="" f">
<p>수 입력</p>
<input type="number" name="num" id="num" min="1" max="100" required>
<button type="button" id="ch">확인</button>
</form>
<div id="di"></div>
</body>
<script>
let n=document.getElementById('num');
let n2=document.getElementById('ch');
let n3=document.getElementById('di');
n2.addEventListener('click', function(){
if(n.checkValidity()){ //입력요소에 유효한 데이터면 true, 아니면 false
n3.innerHTML='유효한 데이터임';
}
else{ // 유효성이 거짓일 경우 메시지 띄우기
n3.innerHTML=n.validationMessage;
}
});
</script>
</html>728x90
'Language > JavaScript' 카테고리의 다른 글
| [JS] 종합복습 (0) | 2024.04.03 |
|---|---|
| [JS] className, dataset (0) | 2024.04.03 |
| [JS] 예시 (0) | 2024.04.03 |
| [JS] setInterval (0) | 2024.04.02 |
| [JS] window, location 객체 메소드 (0) | 2024.04.02 |