JavaScript -03 (객체, 표준객체, DOM, Document에서의 요소 선택, 속성 추가, 노드 접근 등)

타다닥·2023년 9월 28일
JavaScript

JavaScript

목록 보기
3/3
post-thumbnail

JavaScript - 자료형

▶️ 기본 자료형과 객체 자료형의 차이

  • 기본자료형

    • 다른 변수에 값을 할당하거나 함수 인자를 넘길 때 값을 복사해서 전달

    • 값 자체를 전달한 것이기 때문에 아래에서 num과 num2는 각각 다른 공간이다. 값을 각 공간에 그대로 복사해서 사용한 것이다.

      let num =5;
let num2 =num;
num2 +=5;

console.log(num, num2) //5 10 출력.
  • 객체자료형

    • 값을 복사해서 전달하는 것이 아니라, 메모리 주소의 참조값(address)을 저장

    • 같은 객체를 참조를 하는거지 그대로 가져오는게 아니다! 같은 주소를 공유하게 된다고 생각.

      let arr = [1,2,3,4,5];
let arr2 = arr;
arr2.reverse()
console.log(arr,arr2)// 둘 다 [5, 4, 3, 2, 1] 출력.

//arr2에만 reverse()를 했는데 arr도 reverse가 되었다.
//단순히 값 자체를 주는 것이 아니라 주소값을 전달하기 때문! 같은 집주소를 공유한다고 생각하자.
//결국 근본이 같기 때문에 같은 공간을 사용하게 되고 arr2, arr 둘 다 reverse된다.

JavaScript - DOM

  • Document Object Model의 약자로 문서 객체 모델을 의미한다.
  • HTML 문서에 접근하기 위한 일종의 인터페이스로 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
  • 원하는 요소나 속성을 추가하거나 변경하거나 등을 할 수 있게 해준다.
  • 도라에몽 어디로든문? 과 같은 결로 생각하기로 했다. 원하는 곳에 접근해서 건드릴 수 있는.

JavaScript - Document

Document는 웹 페이지에 존재하는 HTML요소에 접근하여 행동을 하고자 할 때 사용하는 객체이다.

필요한 요소를 가져와서 쓰겠다고 생각하자.

  • Document의 속성 - 선택된 요소의 정보를 보여준다.

    • document.documentElement , document.head , document.title , document.body , document.URL , document.domain

      console.log(document.head)

      이렇게 <head>에 대한 정보를 출력해준다.

  • Document에서의 요소 선택 - Elements에서 ‘s’주의!

    • document.getElementById(아이디 속성값)
      let elById = document.getElementById("box")
            console.log(elById)
//ID가 box인 요소의 정보를 보여준다.
//ID는 기본적으로 하나의 값이 와야한다. 그래서 Element에 's'가 없다.
    • document.getElementsByClassName(클래스 속성값)
      let elByClass = document.getElementsByClassName("box")
            console.log(elByClass[0])
//이렇게 요소를 입력해주면 그에 맞는 내용을 출력해준다.
    • document.getElementsByTagName(태그 이름)
      let elByTag = document.getElementsByTagName("span")
            console.log(elByTag)
//Elements 이기 때문에 기본적으로 여러개 보여준다.
//원하는 값만 하려면 인덱스요소를 입력.
    • document.getElementsByName(name 속성값)
    • document.querySelector(CSS 선택자)
    • document.querySelectorAll(CSS 선택자)

    💡 <script>의 위치는 중요하다! 기본적으로 위에서 아래로 읽힌다. 이런 내용들을 불러오려면 해당 요소들이 작성 된 후에 입력해야 출력이 가능하다. 그래서 <body>태그의 마지막 부분에 작성하는 것이 적절하다.

  • querySelector (”요소 선택자”)
    • 요소 선택자를 사용해서 자신이 가져오고 싶어하는 요소를 가져오는 메소드이다.
    • 문서에서 만나는 제일 첫 번째 요소를 반환한다!
    • let elBySelector = document.querySelector(".box") 의 형태.
  • querySelectorAll (”요소 선택자”)
    • 문서에 존재하는 모든 요소를 찾아주는 메소드이다.
    • 모든 요소를 가져와서 배열처럼 보이는 데이터로 만들어준다.
    • let elBySelectorAll = document.querySelectorAll(".box") 의 형태.
  • getElementById(“ID이름”)

    • 해당 ID를 가지는 요소를 불러오는 메소드이다.

      const newId = document.getElementById("input")
//newId라는 이름의 변수를 선언, id가 "input"인 요소를 데리고 와서 쓰겠다는 의미.

Document 요소 다루기

▶️ .textContent, .innerText, .innerHTML

  • .textContent :선택돈 요소의 내부에 들어갈 문자열을 지정해준다.
<div id="box2">
    <b>hello</b> box2
</div>

<script>
	let elBox2 = document.getElementById("box2")
		console.log(elBox2.textContent="추가!")
</script>
// 원래 elBox2는 "hello box2"가 출력된다.
//.textContent로 "추가!"라는 문자열이 들어가도록 만들었다.
//결국 웹화면에는 "추가!" 문자만 보여진다.
  • .innerText : 요소 안의 text를 가져온다. 태그를 작성해도 text로 받아들인다.
  • .innerHTML : HTML태그를 인식해서 text와 태그를 함께 가져온다.
element.innerText = "<div style='color:red'>A</div>"
//<div style='color:red'>A</div> 출력.

element.innerHTML = "<div style='color:red'>A</div>"
//글자색이 빨간색인 A 출력.

▶️ classList

  • 선택 요소에 class를 더하거나, 빼거나, 클래스가 존재하는지 체크하는 메소드
  • 요소.classList.add( ) : 지정한 값을 class의 목록에 추가.
  • 요소.classList.remove( ) : 지정한 값을 class의 목록에서 삭제.
  • 요소.classList.contains( ) : class의 목록에 특정한 class가 포함되어 있는지 확인.
  • 요소.classList.toggle( ) : class값을 토글링한다.

▶️ className과 classList

  • className은 특정 요소의 속성값을 가져오거나 설정할 수 있다.
  • classList는 요소의 목록에 접근할 수 있다.
newBox.classList.add("box")
newBox.classList.add("red")
//위에 두줄과 하래 한 줄은 같다.
//버튼을 클릭했을 때 "class명이 box red"인 빨간색네모를 화면에 추가하고 싶다면 이런식으로 작성.
newBox.className="box red"

▶️ setAttribute (html 요소 속성 추가)

  • 선택한 요소의 속성 값을 직접 지정할 수 있다.
  • 요소.setAttribute(”속성명”, “지정할 속성”) 의 형태이다.

▶️ 노드 접근

  • 요소.children / 요소.children[0]
    • 특정 노드를 선택 후 자식 요소에 접근한다.
    • children은 기본적으로 배열을 반환해준다.
    • 아래처럼 작성 후 container.children 을 하게 되면 아래 이미지럼 출력된다.
      <div class="container">
        <div class="box red"></div>
        <div class="box orange"></div>
        <div class="box yellow"></div>
</div>
      const container = document.querySelector(".container");
        console.log(container.children)//아래 이미지처럼 전체 배열 반환
				console.log(container.children[1])//인덱스 1번인 "box orange"내용이 출력.
  • 요소.parenetNode : 특정 노드를 선택 후 부모 요소에 접근한다.
  • 요소.previousElementSibilings : 다음 형제 요소 하나가 온다.
  • 요소.nextElementSibilings : 이전 형제 요소 하나가 온다.

▶️ createElenent(’html 요소’)

  • html의 특정 노드를 생성해준다. 괄호 안에 html 요소인 태그명을 넣어준다.
  • 추가할 요소를 새로 만들 수 있는 것. 그렇다고 내맘대로는 할 수 없다. html에 있는 태그를 사용!
  • 그리고 요소를 만들었다면 어느 부분에 추가할건지 뭘 추가할건지 등 까지 같이 작성해주어야한다.
function addBox(){
    const container2 = document.querySelector(".container")
    const newBox = document.createElement("div")
    newBox.classList.add("box")
    newBox.classList.add("red") 
    container2.append(newBox);
}

//html에서 만든 "box 추가"버튼을 누르면 실행 될 함수를 생성한다.
//어떤 부분을 사용할건지를 선택해주어야한다. 어디에 추가할건지?
//html에서 쓰인 class="container"와 div요소를 가져와서 사용해준다. 각각 const로 선언!
//뭘 추가할건지? 어떤 요소를 새로 추가할건지?
//classList로 요소의 목록에 접근해서 add해준다. 뭐를? class="box"를.
//어디에 추가할건지?
//.container에 마지막 자식요소(append)로 추가하겠다.
  • 요소를 추가하려면?

    • 요소.append( ), 요소.appenChild( ) : 선택된 요소의 맨 뒤의 자식 요소로 추가.

    • 요소.prepend( ) : 선택된 요소의 맨 앞쪽인 자식 요소로 추가.

    • 요소.before( ) : 선택된 요소의 앞에 있는 형제 요소로 추가.

    • 요소.after( ) : 선택된 요소의 바로 뒤인 형제 요소로 추가.

    • createElenent(’html 요소’)에서와 같은 코드일 때 추가되는 위치를 비교해보자.

      container2.append(newBox);
container2.prepend(newBox);
container2.before(newBox);
container2.after(newBox);

  • 요소를 삭제하려면?
    • 요소.remove( ) : 선택된 요소 삭제.
    • 요소.removeChild(’요소의 자식요소’) : 선택된 요소의 자식 요소가 삭제.

▶️ append와 appendChild 모두 부모 노드에 자식 노드를 추가하는 메소드이다. 차이는?

  • append : 선택된 요소의 맨 뒤의 자식 요소로 추가.
    • 노드 객체뿐만 아니라 문자열도 추가할 수 있다.
    • TextNode를 따로 생성하지 않아도 String을 삽입할 수 있다.
    • 한 번에 2개 이상의 자식 노드를 추가할 수 있고, return값을 반환하지 않는다.
      const div = document.createElement('div');
div.append('hi')

// 결과 : <div>hi</div>
      const div = document.createElement('div')
const p = document.createElement('p')

document.body.append(div, p, 'hello')

//결과 : <div></div> <p></p> hello
  • appendChild : 선택된 요소의 맨 뒤의 자식 요소로 추가.
    • 노드 객체만 추가할 수 있다. 문자열을 추가하면 에러가 발생한다.
    • 텍스트를 추가하고 싶다면 createTextNode를 생성 후 삽입 해주어야한다.
    • 한 번에 2개 이상의 요소를 추가할 수 없다. return값을 반환한다.
      const divElem = document.createElement('div')
const pElem = document.createElemment('p')

divElem.appendChild(pElem)'

// 결과 : <div><p></p></div>

도움받은 링크1, 도움받은 링크2, 도움받은 링크3

▶️ remove와 removeChild 모두 요소를 삭제해주는 메소드이다. 차이는?

  • remove
    • 요소를 제거한다. 노드를 메모리에서 삭제하고 종료한다.
    • 요소를 제거하고 메모리자체에서 아예 지워버린다고 생각.
  • removeChild
    • 부모 노드와의 부모-자식 관계를 끊고 DOM트리에서 해제를 한다.
    • 완전 사라지는게 아니라 잔상이 남는다고 생각. 완전 제거가 아니라 부모에게서 자식을 떼어낸다고 생각.
    • 매개변수로 전달되는 요소는 꼭 부모요소의 자식요소여야 한다.
    • 특정 부모요소의 자식요소 중 하나를 제거할 때 빠르게 작동한다.

💬

  • 코드를 해석해나가면서 왜 이런 결과가 보여지는지 맞춰가는 과정이 재미있다. 문제는 내가 스스로 생각해고 뱉어내려면 뭘 뱉어야 할 지 모르겠다는 것이다. 이건 이전에 생각한 것 같이 어떤 결과가 나올지 내가 먼저 생각하는걸 우선으로 하기로!
  • 수업 실습시간에 내가 생각한대로 코드를 작성했다. 그리고 이게 맞다고 생각했는데 실행이 안되었다. 그래서 다른분들이 올린 걸 봤는데 비슷하거나 일치하는 부분이 있었다. 분명히 실행이 되어야 하는데 안되어서 20분동안 조금씩 바꿔가며 해매었다. 근데 결국은 오타가 있었다. click을 clik으로 썼다… 어쨌든 저 위치에는 내가 분명히 ‘클릭’이라는 단어를 썼으니 확인하면서도 그냥 넘어간 것 같다. 타자를..신중히 쳐야겠다… 허무하면서 허탈하면서 그래도 내가 작성한게 맞기는 맞았구나 하는 기분좋음까지 다양한 감정을 느낄 수 있었다..
profile
타다닥
프론트엔드 ㄱH발ㅈr ㅎH보ㅈr - ☆
이전 포스트

JavaScript -02 (for문, while문, break, continue, for of, forEach)

0개의 댓글