javascript

JAVASCRIPT 2022. 1. 12. 19:31

1. DOM

(1) id

<body>

<ul>

<li id="apple">Apple</li>

<li id="banana">Banana</li>

<li id="grape">Grape</li>

<li id="pine">PineApple</li>

</ul>

//관례적으로 노드 변수는 이름 앞에 $기호를 붙입니다.

const $apple = document.getElementById('apple');

console.log($apple.attributes[0]);

$apple.style.fontSize = '40px';

document.body.style.background = 'tomato';

//없는 아이디로 취급: null이 반환됩니다.

const $item = document.getElementById('banana');

console.log($item);

if($item !== null){

$item.style.color = 'yellow';

}

//요소에 id 부여 시 아이디값으로 자동 전역변수가 생성됩니다.

grape.style.color = 'violet';

</script>

</body>

(2)tagname

<body>

<li id="apple">Apple</li>

<li id="banana">Banana</li>

<li id="grage">Grape</li>

<li id="pine">PineApple</li>

</ul>

<ol>

</ol>

const $ul = document.getElementById('fruits');

//유사배열

//key가 인덱스처럼 구성되어 있고, length 프로퍼티가 있습니다.

const $test = document.getElementsByTagName('li');

console.log($test);

const $liArray = document.getElementsByTagName('li');

console.log($liArray);

console.log($liArray[0]);

console.log($liArray.length);

console.log($liArray.banana);

for(let $ele of $liArray){

$ele.style.fontStyle = 'italic';

}

for(let i=0; i<$liArray.length; i++){

$liArray[li].style.color = 'red';

}

</script>

</body>

(3) classname

<body>

<li class="fruit apple">Apple</li>

<li class="fruit banana">Banana</li>

<li class="fruit grape">Grape</li>

</ul>

const $elements = document.getElementsByClassName('fruit');

console.log($elements);

const $banana = document.getElementsByClassName('banana');

$banana[0].style.color = 'yellow';

</script>

</body>

(4)queryselector

<body>

<li class="fruit apple">Apple</li>

<li class="fruit banana">Banana</li>

<li class="fruit grape">Grape</li>

</ul>

//const $elem = document.querySelector('.banana');

//const $elem = document.querySelector('#fruits > li:nth-child(2)');

//const $elem = document.querySelector('li[class="fruit banana"');

const $elem = document.querySelector('li.apple + li');

console.log($elem);

$elem.style.color = 'yellow';

const $element = document.querySelectorAll('#fruits > li');

console.log($elem);

for(let $ele of $element){

$ele.style.background = 'red';

}

// 없는 선택자 지목 시 null이 아니라 빈 노드리스트 객체가 리턴됩니다.

const $test = document.querySelector('.peach');

console.log($test);

</script>

</body>

(6) 유사 배열 주의

<style>

ul > li {

font-size: 30px;

}

.red{

color: red;

}

</style>

</head>

<body>

<li class="red">Apple</li>

<li class="red">Banana</li>

<li class="red">Grape</li>

<li class="red">Peach</li>

</ul>

//유사배열 NodeList 리턴

//const $elements = document.querySelectorAll('.red');

//유사배열 HTMLCollection 리턴

const $elements = document.getElementsByClassName('red');

console.log($elements);

//배열 아닙니다.

let $ele = $elements.pop();

//유사배열객체를 배열처럼 제어할 때는 순수 배열로 변경해서 사용해야 합니다.

// const realArray = Array.from($elements);

const realArray = [...$elements]; //6문법

let $ele = realArray.pop();

console.log(realArray);

for(let i=0; i<realArray.length; i++){

realArray[i].className = 'blue';

}

</script>

</body>

2.DOM 제어

(1) 자식 노드 탐색

<body>

<li class="apple">Apple</li>

<li class="banana">Banana</li>

<li class="grape">Grape</li>

</ul>

</div>

//노드 탐색의 기점이 되는 ul 요소 취득

const $fruits = document.getElementById('fruits');

//기준 노드의 모든 지식 노드를 탐색, 텍스트 노드 포함

const $childNodes = $fruits.childNodes;

console.log($childNodes);

//기준 노드의 모든 지식 노드를 탐색, 텍스트 노드 제외

const $children = $fruits.children;

console.log($children);

//기준 노드의 첫번째 자식 노드를 탐색

//firstChild는 텍스트 노드가 나올 가능성이 있습니다.

const $firstChild = $fruits.firstChild;

console.log('first-child: ' + $firstChild); //텍스트 노드

console.log('first-element-child: ' + $fruits.firstElementChild);

console.log('last-element-child: ' + $fruits.lastElementChild);

//기준 노드에 자식 노드가 있는지 여부를 확인할 수 있습니다.

// 텍스트 노드가 있을 시 true가 나올 수 있습니다.

const $test = document.getElementById('test');

console.log($test.hasChildNodes);

//텍스트 노드를 제외한 요소 노드의 여부를 확인합니다.

//자식 요소 노드를 취한 뒤 length 값을 논리로 바꾸어서 확인합니다.

console.log($test.children.length);

</script>

</body>

(2) 부모, 형제 노드

<body>

<li class="apple">Apple</li>

<li class="banana">Banana</li>

<li class="grape">Grape</li>

</ul>

</div>

<tr>

</tr>

<tr>

</tr>

</table>

const $banana = document.querySelector('.banana');

//부모 노드 탐색

const $parent = $banana.parentNode;

console.log('parnet: ' + $parent);

const $div = $banana.parentNode.parentNode;

console.log('grandparent: ' + $div);

//이전 형제 노드 탐색

const $prev = $banana.previousElementSibling;

console.log($prev);

//다음 형제 노드 탐색

const $next = $banana.nextElementSibling;

console.log($next);

//더 이상 지목할 형제가 없을 시에는 null이 옵니다.

const $prev2 = $next.nextElementSibling;

console.log($prev);

//table 태그는 자식 태그로 tbody를 자동으로 삽입합니다.

const $board = document.getElementById('board');

const $tbody = $board.children;

console.log($tbody[0].children);

</script>

</body>

(3)textcontent

<body>

<div id="greeting">Hello <span>World!</span></div>

const $div = document.getElementById('greeting');

// console.log($div.childNodes[0].nodeValue);

console.log($div.textContent);

//textContent는 마크업을 제외한 텍스트 전체를 지목합니다.

//태그를 작성해도 텍스트로 인식을 합니다.

$div.textContent = '<span>안녕</span>하세요~';

</script>

</body>

(4)innerHTML

<body>

<li class="apple">Apple</li>

</ul>

const $fruits = document.getElementById('fruits');

console.log($fruits.innerHTML);

//노드 추가

$fruits.innerHTML += '<li class="banana">Banana</li>';

//노드 삭제

$fruits.innerHTML = '';

console.log(!!$fruits.children.length);

innerHTML로만 노드를 제어해서는 안 됩니다.

보안과 성능에 문제가 있습니다.

HTML 변환이 필요한 문자열에만 사용을 하는 것이 좋습니다.

</script>

</body>

(5) 노드 생성 추가

<body>

<li>Apple</li>

</ul>

const $fruits = document.getElementById('fruits');

//1. 요소 노드 생성(추가 기능은 없기 때문에 따로 추가해 주어야 합니다.)

const $newLi = document.createElement('li');

//2. 텍스트 삽입

$newLi.textContent = 'Banana';

//3. ul에 새로운 li노드 추가

$fruits.appendChild($newLi);

</script>

</body>

(6) 복수 노드 생성

<body>

//Live DOM: 사전에 미리 랜더링 되어 있는 요소의 노드

const $fruits = document.getElementById('fruits');

//과일 이름 텍스트 배열

const fruitName = ['Apple', 'Banana', 'Grape', 'Orange'];

# Virtual DOM의 문제점:

- 이미 활성화된 Live DOM에다가 반복해서 가상 DOM을 추가하는 행위는

메모리상 높은 코스트가 발생합니다.

- 활성화된 DOM을 변경 조작하는 것은 가능한 한 횟수를 줄여줘야 합니다. */

//가상의 부모 DOM 생성

//DocumentFragment: 다른 노드를 담는 임시 컨테이너 역할을 하는 가상 DOM 객체

const $frag = document.createDocumentFragment();

for(let f of fruitName){

const $li = document.createElement('li');

$li.textContent = f;

$frag.appendChild($li);

}

$fruits.appendChild($frag);

</script>

</body>

(7) 노드 삽입

<body>

<li>Apple</li>

<li>Banana</li>

<li>Grape</li>

</ul>

const $fruits = document.getElementById($fruits);

const $li = document.createElement('li');

$li.textContent = 'Mango';

//두 번째 매개값으로 전달된 노드는 반드시

//insertBefore를 호출한 노드의 자식이어야 합니다.

$fruits.insertBefore($li, $fruits.lastElementChild);

const $banana = document.querySelector('#fruits > li:nth-child');

$fruits.insertBefore($banana, $fruits.firstElementChild);

</script>

</body>

(8) 노드 이동

<body>

<li>Apple</li>

<li>Banana</li>

<li>Grape</li>

</ul>

const $fruits = document.getElementById('fruits');

//배열 디스트럭처링

const [$apple, $banana, $grape] = [...$fruits.children];

const $mango = document.createElement('li');

$mango.textContent = 'Mango';

//맨 마지막에 추가

$fruits.appendChild($mango);

//이미 활성화된 요소를 추가하면 이동합니다.

$fruits.appendChild($banana);

$fruits.insertBefore($apple, $mango);

//grape를 맨 마지막 노드 바로 앞으로 옮겨 보세요.

//Apple - Mango - Grape - Banana가 되어야 합니다.

$fruits.insertBefore($grape, $fruits.lastElementChild);

</script>

</body>

(9) 노드 복사

<body>

<li>Apple</li>

</ul>

const $fruits = document.getElementById('fruits');

const $apple = $fruits.firstElementChild;

//apple의 사본을 생성(얕은 복사: 자기 자신 노드만 복사)

const $shallowClone = $apple.cloneNode();

console.log($shallowClone);

$shallowClone.textContent = $apple.textContent;

$fruits.appendChild($shallowClone);

//apple의 사본을 생성(깊은 복사: 자기 자신을 포함한 모든 자손 노드를 복제)

const $deepClone = $apple.cloneNode(true);

$fruits.appendChild($deepClone);

//ul을 깊은 복사

const $ulClone = $fruits.cloneNode(true);

$fruits.appendChild($ulClone);

</script>

</body>

(10) 노드 교체, 삭제

<body>

<li>Apple</li>

<li>Banana</li>

</ul>

const $fruits = document.getElementById('fruits');

const $mango = document.createElement('span');

$mango.textContent = 'Mango';

$fruits.replaceChild($mango, $fruits.firstElementChild);

$fruits.removeChild($fruits.lastElementChild);

</script>

</body>

'JAVASCRIPT' 카테고리의 다른 글

javascript (0)	2022.01.17
javascript (0)	2022.01.14
javascript (0)	2022.01.13
javascript (0)	2022.01.12
javascript (0)	2022.01.11

ABOUT ME

afullmoon afullmoon

'JAVASCRIPT' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'JAVASCRIPT' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바