노드(node)
HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장
노드 종류
- 문서 노드
문서 전체를 나타내는 노드 - 요소 노드
HTML 모든 요소는 요소노드이며 속성노드를 가질 수 있음 - 속성 노드
HTML 모든 속성은 속성노드이며, 요소노드에 관한 정보를 가지고 있음 - 텍스트 노드
HTML 모든 텍스트는 텍스트 노드 - 주석 노드
HTML 모든 주석은 주석 노드
노드의 관계
parentNode : 부모 노드
chiledren: 자식 노드
childNodes: 자식 노드 리스트
firstChild: 첫번째 자식 노드
firstElementChild: 첫번째 자식 요소 노드
lastChild: 마지막 자식 노드
nextSibling: 다음 형제 노드
previousSibling: 이전 형제 노드
공백도 텍스트 노드로 취급되기 때문에 요소를 가지고 오고 싶을 때 Element가 붙어있는 걸 사용해야 한다.
노드 메서드
노드 추가
appendChild(): 새로운 노드를 헤당 노드의 자식 노드 리스트 맨 마지막에 추가insertBefore(): 새로운 노드를 특정 자식 노드 바로 앞에 추가insertData(): 새로운 노드를 텍스트 데이터로 추가
노드 생성
createElement(): 새로운 요소 노드를 만듦createAttribute(): 새로운 속성 노드를 만듦createTextNode(): 새로운 텍스트 노드를 만듦
노드 제거
removeChild(): 자식 노드 리스트에서 특정 자식 노드를 제거, 노드가 제거되면 해당 노드를 반환. 노드가 제거될 때 노드의 자식들도 다같이 제거removeAttribute(): 특정 속성 노드를 제거
노드 복제
cloneNode(): 기존에 존재하는 노드와 동일한 새로운 노드를 생성하여 반환
<body>
<h2 id="cl">노드</h2>
<div id="list">
<p id="id">node.js</p>
<p id="backend">HTML</p>
<p>css</p>
</div>
<p id="item2">React</p>
<h3 id="item1">JavaScript</h3>
<hr>
<p id="text">현재 시간은 오전 10시 30분</p>
<hr>
<button onclick="appendNode()">노드추가1</button>
<button onclick="insertNode()">노드추가2</button>
<button onclick="appendText()">텍스트노드추가</button>
<hr>
<p id="ct"></p>
<hr>
<button onclick="createNode()">노드생성</button>
<button onclick="createAttr()">속성노드생성</button>
<button onclick="createText()">텍스트노드생성</button>
<hr>
<button onclick="removeNode()">노드삭제</button>
<button onclick="removeAttr()">속성노드삭제</button>
<hr>
<button onclick="cloneNode()">노드복제</button>
</body>//- -----------------추기-------------------
function appendNode(params) {
const parent = document.getElementById('list');
console.log(parent);
const newItem = document.getElementById('item1');
console.log(newItem);
parent.appendChild(newItem);
}
function insertNode(params) {
const parent = document.getElementById('list');
const backend = document.getElementById('backend')
const newItem = document.getElementById('item2')
parent.insertBefore(newItem, backend)
}
function appendText(params) {
const text = document.getElementById('text').firstChild;
console.log(text);
text.insertData(7,'아주 피곤한 월요일 ')
}
//- -----------------생성-------------------
function createNode(params) {
const newItem = document.getElementById('item1')
const newNode = document.createElement('p')
newNode.innerHTML = `<b>🍕 맛있는 피자</b>`
document.body.insertBefore(newNode, newItem)
}
function createAttr(params) {
const newItem = document.getElementById('item2');
const newAttr = document.createAttribute('style');
newAttr.value = 'color:deeppink; background-color:gold;'
newItem.setAttributeNode(newAttr);
}
function createText(params) {
const textNode = document.getElementById('ct');
const newText = document.createTextNode('😍😎🤣😂😊😒');
textNode.appendChild(newText)
}
//- -----------------삭제-------------------
function removeNode() {
const parent = document.getElementById('list')
const removeItem = document.getElementById('backend')
const result = parent.removeChild(removeItem)
console.log(result);
}
function removeAttr() {
const newItem = document.getElementById('item2');
newItem.removeAttribute('style')
}
//- -----------------복제-------------------
function cloneNode(params) {
const parent = document.getElementById('list');
const originItem = document.getElementById('cl')
parent.appendChild(originItem.cloneNode(true)) //true 자식까지 복사
} 정규 표현식(Regular Expression: Regex)
문자열에서 특정 문자 조합을 찾기 위한 패턴
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{3}$/이메일 패턴 만들기
- 영문 대문자 또는 소문자, 숫자로 시작
- @, .이 포함
/^[A-Za-z0-9\-\.]+@[A-Za-z0-9\-\.]+\.+[A-Za-z]+$/정규표현식 정용 함수
test():정규표현식의 대입한 문자열이 패턴과 적합하면 true, 아니면 false
