안녕하세요 개발적금입니다.
오늘은 JavaScript에서 DOM을 설명드리고
Array에대해 좀더 알아보려고합니다.
목차
1. DOM이란?
2. Array에 대해
1. DOM이란?
Document Object Model(문서 객체 모델)의 약자로 Javascript라기 보다는
HTML 조작하는 기능을 Javascript에서 구현한것이다.
즉 DOM은 브라우저가 만들어준 기능으로써 , 브라우저마다 기능이 조금씩
다를수 있습니다
쉽게말해 HTML문서에 접근하기 위한 일종의 인터페이스 종류중 하나입니다(Web APIs)
이 객체모델은 문서내에 모든 요소를 정리하고 , 각각의 요소에 접근하는 방법을 제공합니다!!
<!-- 기존에 html문서를 css파일이나 js파일 연결할때에는 head 부분에
<llink href="" , type="text/css"></link>
<script src="" type=text/javascript></link>
로 하였지만, DOM은 head부분이 아닌 body부분에 작성해줘야 한다
-->
기본적으로 javascripts를 사용하면 한번 위아래로 쭉훑는다.
그리고 const 변수명 = window.document.getElementById("title"); 를보면
window 객체 안에 , document객체 안에 , getElementById()라는 메소드를 사용해서
title에 저장하겠다 라는말입니다.
<html>
<head></head>
<body>
<h1 id=title></h1>
<span>span4</span>
<h2 id="DOM-title">
DOM
<span class="sp">span1</span>
<span class="sp">span1</span>
<span class="sp">span1</span>
</h2>
<script src="./public/js/dom.js"></script>
</body>
</html>const title = window.document.getElementById("title");
-> title변수에 Id가 "title"이라는 것들을 넣습니다.
title.innerHTML("DOM에 온것을 환영합니다");
>> innerHTML은 값을 바꿔주는 역할을 합니다.
아무것도 없던 <h1></h1> 태그에 DOM에 온것을 환영합니다 / 출력될것입니다.
이와 같이 HTML의 태그값이나 id , class를 따로 선택하는것이 두가지 더있는데
1. window.document.getElementById
->window 객체 안에 , document 객체안에 , getElementById라는 메소드를
사용하여 값을 title에 저장한것입니다.
2. getElementsByTagName
const sample = document.getElementsByTagName("span");
console.log(sample)
-> document 안에 getElementsByTagName라는 메소드를 사용해
span 앨리먼트가 몇개있냐? 물어보는것입니다.
위의 예시를보며 설명드리면 , span 태그는 <h2></h2>안에 3개 밖에 1개가있습니다.
안에있는 span만 바꾸고싶어서 저는 따로 h2에 Id값을 지정했습니다.
const domTitle = document.getElementById("DOM-title");
->Id가 DOM-title이라는 값을 따로 변수 domTitle에 저장했습니다. 그리고 나서
const spList = domTitle.getElementsByTagName("span");
-> domTitle안에 span 앨리먼트들을 따로 spList에 저장한것입니다.
3.getElementsByClassName
이것도 위의 예시와 같은데 특정 class를 가지고있는 요소에 접근하기위해
사용하는것입니다. 위에와 사용방법이 동일하여
예제는 적지않겠습니다..
그런데 이렇게 몇번 사용하시다 보니까
너무 길고 귀찮고.. 저는 오타도 몇번 냈었어요ㅠ 그래서 이것보다
간편한 문법이 나왔습니다.
<html>
<head></head>
<body>
<h1>logo</h1>
<ul id="gnb">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src=""></script>
</body>
</html>
1. querySelector
const gnb = document.querySelector("#gnb > li");
-> 저희가 알던 코드로 작성을하려면
-> const gnb2 = document.getElementById("gnb"); ->id값을 가져오고
-> const list2 = gnb2.getElementsByTagName("li"); -> li값을 list2에 할당을 합니다.
그런데 querySelector를 사용하면 기존의 CSS에서 사용하던것과같이
사용가능합니다.
## 인자값 안에 지정된 선택자와 일치하는 document의 첫번째 element를 반환합니다.
## 일치하는 요소가 없으면 null을 반환합니다
2.querySelectorAll
그러면 querySelectorAll은 다른점이 뭘까요? 사용방법은 같습니다. 하지만
아이디로 선택자를 지정한경우 html엔 하나의 id만 존재하기때문에 문제는 없지만,
class를 선택자로 지정할때 여러 class가 존재할경우 제일 첫번째 class만 지정됩니다..
이런 문제를 해결하기위해 querySelectorAll이 존재합니다!
return되는 값은 배열형태의 객체 타입입니다.
const list = document.querySelectorAll("#gnb > li");
console.log(list);
-> 출력하시면 list[li,li,li,li,li,li] 로 출력이 됩니다.
이를 응용하여 1번째 인덱스에 있는 li를 Hello World로 바꿔보겠습니다.
이미 위에서 list안에 #gnb > li 에있는 앨리먼트 값을 넣었습니다.
확인하시려면 console.log(list[1]);
하시면됩니다! 그리고 저희가 아까 배워봤던것처럼
list[1].innerHTML = "Hello World!!"
->list객체 안에 1번째 인덱스의 내용을 "Hello World"로 바꿔달라고 하고
console.log(list[1]);
-> 하시면 출력이 바뀌는것을 확인할수있습니다!
2. Array에 대해 알아보자
사실 Array는 저번에 글을 올리긴했는데 미흡한것 같아
추가설명을 몇가지 해볼까합니다.
const arr = ["apple","banana","orange"];
const arr2 = [];
console.log(arr === arr2);
// false -> arr는 객체형 데이터로 둘을 비교했을때
// 값은 물론이거니와 각각의 고유 주소도 다릅니다.
console.log(arr[0]) -> arr의 인덱스 0번째 값은 apple
console.log(arr[1]) -> arr의 인덱스 1번째 값은 banana
console.log(arr[2]) -> arr의 인덱스 2번째 값은 orange
console.log(arr.legnth) -> arr의 총길이는? 3개의 값이있으니 0,1,2 총 3개입니다.
// 배열의 주소값(인덱스)은 0번부터 시작이 됩니다.
// 이것을 이용해서 배열안에 있는값들을 순서대로
// apple , banana , orange를 출력해보겠습니다.
for(let i = 0 ; i < arr.legnth ; i++){
console.log(arr[i]);
}
// for문을 활용하여 배열의 크기(arr.legnth)만큼 반복해주고
// arr[i]번째의 값을 출력해줍니다
// 여기서 제가 melon을 추가하고싶을땐? push라는 메소드를 사용합니다.
arr.push("melon");
// push는 array의 맨마지막 요소에 추가시켜줍니다
console.log(arr[3]); // melon
//배열을 추가했으면 뺄수도 있어야죠?
//배열을 빼는것은 pop()입니다.
arr.pop(); //배열의 마지막요소를 삭제함
console.log(arr); // -> 마지막에 넣은 melon이 빠졌습니다.
Array.push() 와 Arr.pop() 에대해 알아보았습니다.
코드를 보여드리면서 설명해야할것같아 코드블럭을 사용했습니다.
배열을 빼는방법이 Arr.pop()말고 두가지가 더있습니다.
1. splice
const arr4 = [1,2,3,4,5,6,7];
arr4.splice(2,1)
console.log(arr4);0번 인덱스(주소값)부터 시작하는 배열 arr4에 , 1부터 7까지의 값이 담겨져있습니다.
arr4.splice(인자1 , 인자2);
인자1 : 삭제를 시작할 인덱스 값
인자2 : 삭제를 종료할 인덱스 값
arr4.splice(2,1)
-> arr4배열에 2번째 인덱스(값 : 3)을 시작으로해서 1개만지워라 입니다.
-> 출력값은 [1,2,4,5,6,7] 이 나오게됩니다!
2.slice
slice는 삭제의 개념이라기보다는 "추출"의 개념이라고 생각하시면됩니다.
위의 splice 예제를 통해 알아보겠습니다.
arr4.slice(인자1 , 인자2);
인자1 : 추출을 시작할 인덱스(값포함)
인자2 : 추출을 종료할 인덱스 (값 미포함)
arr4.slice(3,5)
-> 3번째 인덱스안에 값 4부터 , 4번째인덱스 5 까지 출력됩니다.
반환값은 추출한 요소를 포함한 새로운데이터입니다.
여기서 splice와 slice의 차이점은 splice는 기존배열의
데이터를 변형시키지만 , slice는 기존의 데이터는 그대로 두고
새로운 데이터를 반환 한다는 점입니다!
오늘은 DOM과 Array에대해 좀더 배워봤습니다.
배운것을 토대로 문제를 몇개 풀어보았습니다.
// 선형검색 (Linear search) 완전탐색!
// 총길이 length : 10
// 무작위로 배열형태로 [10,6,3,8,21,5,8,12,99,7] 되어있습니다.
// 값이 5인녀석 index가 몇번인가요? 단, 값이 없을경우 -1 출력
function linearSearch(array,target){ //매개변수 array와 target을 받는 함수입니다.
const length = array.length; // 변수를 선언하여 array의 길이를 구합니다.
for(let i = 0 ; i < length ; i++){
if(array[i] === target){
return i;
// array[i]의 값이 target과 같은경우,
// i 를 return합니다.(i번째 인덱스의 값이 target과 같다는뜻)
}
} //for end
return -1; //값이 없을경우 -1을 return합니다
}
const search1 = linearSearch([10,6,3,8,21,5,8,12,99,7],21);
// 21은 배열 4번째 인덱스에 있으므로 -> 4 출력
const search2 = linearSearch([10,6,3,8,21,5,8,12,99,7],99);
// 99는 배열 8번째 인덱스에 있으므로 -> 8출력
const search3 = linearSearch([10,6,3,8,21,5,8,12,99,7],8);
// 8은 배열 3번째 인덱스에 있으므로 -> 3출력 / 8은 두개인데 맨앞에것 출력됩니다
const search4 = linearSearch([10,6,3,8,21,5,8,12,99,7],100);
// 100은 배열의 인덱스에 없으므로 -> -1출력
console.log(search1);
console.log(search2);
console.log(search3);
console.log(search4);
해석은 주석처리 해놓았습니다. 감사합니다!
'Javascript' 카테고리의 다른 글
| Javascript Event에대해 좀더 깊게 그리고 loginform을 간단하게 만들어보자 (0) | 2022.11.09 |
|---|---|
| JavaScript의 addEventListener에대해 알아보자 (0) | 2022.11.09 |
| JavaScript 상속의 개념 / new Date() 생성자 함수 / 삼항연산자 / indexOf에 대해 알아보자 (0) | 2022.11.04 |
| Javascript 메서드 , this , getter/setter , 생성자(생성자함수)를 알아보 (0) | 2022.11.04 |
| Javascript의 객체에 대해 알아보자!! (1) | 2022.11.02 |