JavaScript Day5

노드(node)

HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장

노드 종류

- 문서 노드 : 문서 전체를 나타내는 노드
- 요소 노드 : HTML 모든 요소는 요소노드이며, 속성노드를 가질 수 있음
- 속성 노드 : HTML 모든 속성은 속성노드이며, 요소노드에 관한 정보를 가지고 있음
- 텍스트 노드 : HTML 모든 텍스트는 텍스트노드
- 주석 노드 : HTML 모든 주석은 주석노드

 

노드의 관계

parentNode : 부모 노드
children : 자식 노드
childNodes : 자식 노드 리스트
firstChild : 첫번째 자식 노드
firstElementChild : 첫번째 자식 요소 노드
lastChild : 마지막 자식 노드
nextSibling : 다음 형제 노드
previousSibling : 이전 형제 노드

 

노드 메서드

1. 노드 추가

appendChild() : 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가
insertBefore() : 새로운 노드를 특정 자식 노드 바로 앞에 추가
insertData() : 새로운 노드를 텍스트 데이터로 추가

 

2. 노드 생성

createElement() : 새로운 요소 노드를 만듦
createAttribute() : 새로운 속성 노드를 만듦
createTextNode() : 새로운 텍스트 노드를 만듦

3. 노드 제거

removeChild() : 자식 노드 리스트에서 특정 자식 노드를 제거. 노드가 제거되면 해당 노드를 반환. 노드가 제거될 때 노드의 자식들도 다 같이 제거됨.
removeAttribute() : 특정 속성 노드를 제거

 

4. 노드 복제

cloneNode() : 기존의 존재하는 노드와 동일한 새로운 노드를 생성하여 반환

 

정규 표현식(Regular Expression: Regex)

문자열에서 특정 문자 조합을 찾기 위한 패턴

    <input type='text' id='userid' name='userid'>
    4자 이상, 20자 이하로 체크
    특수문자 들어갈 수 없음
    한글 들어갈 수 없음


정규 표현식 표기
    / 정규 표현식 패턴 /



정규 표현식 패턴
https://coding-yesung.tistory.com/131 참고

 

아이디 패턴 만들기

- 영문 대문자 또는 소문자, 길이는 4자이상 20자이하로 입력 가능
    /^[A-Za-z]{4,20}/

이름 패턴 만들기

- 한글만 사용
    /^[가-힣]+$/

 

휴대폰 번호 패턴 만들기

- 010-111-1111 또는 010-1111-1111
    /^\d{3}-\d{3,4}-\d{4}$/

이메일 패턴 만들기

- 영문 대문자 또는 소문자, 숫자로 시작
- @, .이 포함
    /^[A-Za-z0-9\-\.]+@[A-Za-z0-9\-\.]+\.+[A-Za-z]+$/

 

정규표현식 적용 함수

test() : 정규표현식의 대입한 문자열이 패턴이 적합하면 true, 아니면 false를 리턴함

※조심할것! test()입니다. 종종 오타로 text()로 작성하시면 실행이 안됩니다.