-html 문서의 모든 것 = 노드
document = 문서 노드
html요소 = 요소 노드
html내부 텍스트 = 텍스트 노드
html태그 속성 = 속성 노드
주석 = 주석 노드
hhtml 태그 = 루트 노드
Node간의 탐색
| 노드 속성 종류 | 설명 |
| parentNode | 선택된 문서객체의 부모노드선택 |
| childNodes[노드번호] | 선택된 문서객체의 자손노드선택 - 여러개일 수 있으므로 배열로 선택 |
| firstChild | 선택된 문서객체의 첫번째 자손노드선택 |
| lastChild | 선택된 문서객체의 마지막 자손노드 선택 |
| nextSibling | 선택된 문서객체의 바로 다음(동생) 동위요소 노드 선택 |
| previousSibling | 선택된 문서객체의 바로 이전(형) 동위요소 노드 선택 |
공백도 포함되어서
요소만 세고 싶으면 [childElementCount]라는 속성을 쓰면 되고
짝수들은 대부분 공백, 홀수들은 실제 요소로 인정되는 부분
퍼스트 라스트도 공백처리된다
= 요소를 선택하려면 노드가 아니고 요소로 선택 -> firstElementChild
-----------------------------------------------------------------------------
Forms
1. form요소의 name속성 선택
문법
document.폼네임.요소네임;
//or
document.forms['폼네임'].elements['요소네임'];
//or
document.forms['폼네임']['요소네임'];
//input태그에 작성된 값(value)를 p태그에 반환하는 예제
<form action="#" name="myForm">
<input type="text" name="myInput">
</form>
<p id="text"></p>
<script>
var box = document.myForm.myInput;
var text = document.getElementById('text');
box.onkeyup = function () {
var v = this.value;
text.textContent = v;
}
</script>
2. form요소의 속성과 메서드 종류
| 종류 | 설명 |
| checked | input태그의 checkbox나 radio가 체크되어 있으면 true를 반환, 그렇지 않으면 false를 반환 |
| defaultValue | 초기 설정값을 반환 |
| disabled | 요소가 활성상태이면 false를 반환, 비활성상태이면 true를 반환 |
| length | 요소의 개수를 반환 |
| value | input, select, textarea 요소의 value값을 반환 |
| blur() | 요소에서 포커스를 없앰 |
| focus() | 요소에 포커스를 맞춤 |
| submit() | form 요소 값들을 전송 |
| reset() | form 요소 값들을 초기화 |
checked 예시
// 사용자에게 주민등록번호를 받아 뒷자리의 첫글자가 1 혹은 3이면,
남자가 체크되게 처리하고, 2 혹은 4이면 여자가 체크되도록 처리하시오.
단, 1~4사이 숫자를 입력한 것이 아니라면 [1~4사이 숫자로 입력하세요]라는 경고창이 뜨게하고,
비어있을때는 아무런 명령이 발생되지 않게 처리하시오.
<body>
<form action="#" name="myForm">
<input type="text" name="idBefore" maxlength="6"> //앞 6자리 입력받는곳
-
<input type="text" name="idAfter" maxlength="1" style="width: 10px;">XXXXXX //뒷 1자리 입력받는곳
<br>
<input type="radio" name="gender" id="male">
<label for="male">남자</label>
<input type="radio" name="gender" id="female">
<label for="female">여자</label>
</form>
<p id="text"></p>
<script>
var box = document.forms['myForm']['idAfter'];
var male = document.getElementById('male');
var female = document.getElementById('female');
box.onkeyup = function () {
var v = this.value;
if (v == 1 || v == 3) {
male.checked = true;
female.checked = false;
} else if (v == 2 || v == 4) {
male.checked = false;
female.checked = true;
} else if (v) {
alert('1~4사이 숫자로 입력하세요');
}
}
</script>
</body>
3. form 유효성 관련 속성과 메서드
| DOM메서드 종류 | 설명 |
| checkValidity() | 입력요소에 유효한 데이터가 있으면 true를 반환 |
| setCustomValidity() | 입력 요소의 validationMessage속성을 설정 |
//1~100사이의 숫자를 입력하지 않으면 유효성메시지를 띄우시오.
<form action="#" name="myForm">
<p>숫자를 입력하고 확인을 클릭해주세요.(1~100)</p>
<input type="number" id="numbox" name="numBox" min="1" max="100" required>
<button type="button" id="btn">확인</button>
</form>
<p id="text"></p>
<script>
var numBox = document.forms['myForm']['numBox'];
var btn = document.getElementById('btn');
var text = document.getElementById('text');
btn.onclick = function(){
if(!numBox.checkValidity()){ // 이 부분을 if(numBox.validity.rangeOverflow)이렇게 쓸수있음
text.innerHTML = numBox.validationMessage;
}else{
text.innerHTML = '유효한 값입니다.';
}
}
</script>
유효성관련 DOM 속성
| 속성 종류 | 설명 |
| validity | 입력 요소의 유효성과 관련된 불 속성을 포함 |
| validationMessage | 유효성이 거짓일 때 브라우저가 표시할 메시지를 포함 |
| willValidate | 입력 요소의 유효성을 검사할지 여부를 나타냄 |
validity의 속성
| 속성 종류 | 설명 |
| customError | 사용자 정의 유효성 메시지가 설정된 경우 true로 설정 |
| patternMismatch | 요소의 값이 패턴 속성과 일치하지 않는 경우 true로 설정 |
| rangeOverflow | 요소의 값이 최대 속성보다 큰 경우 true로 설정 |
| rangeUnderflow | 요소의 값이 최소 속성보다 큰 경우 true로 설정 |
| stepMismatch | 요소의 값이 단계 속성 당 유효하지 않은 경우 true로 설정 |
| tooLong | 요소의 값이 maxLength 속성을 초과하는 경우 true로 설정 |
| typeMismatch | 요소의 값이 유형 속성에 따라 유효하지 않은 경우 true로 설정 |
| valueMissing | 요소(필수 속성 포함)에 값이 없는 경우 true로 설정 |
| valid | 요소의 값이 유효하면 true로 설정 |
'코딩 > 자바스크립트' 카테고리의 다른 글
| JS / 에러, 클래스 (0) | 2022.04.05 |
|---|---|
| JS / 정규표현식 RegExp (0) | 2022.04.05 |
| JS / 문서객체생성과 이벤트 (0) | 2022.04.04 |
| JS / 코딩앙마 유튜브강의 노트 (0) | 2022.04.04 |
| JS / DOM - 속성, 메서드, 준비구문 (0) | 2022.04.04 |