[ 3D Web : Front _ JavaScript ] DOM(돔) : Document Object Model

 

 

 

 

[ 3D Web : Front _ JavaScript ] DOM(돔) : Document Object Model

 

 

---

 

 

∇ DOM.

목  차

1. innerHTMl
2. 특정 Element에 접근하기
3. Element 생성하기
4. Assignment
5. DOM Element를 동적으로 만드는 메서드
6. DOM 접근 메서드

 

 

---

 

문서 객체 모델(DOcument Objec Model,DOM)은 

HTML, XML 문서의 프로그래밍 interface입니다.

 

 

---

 

1. 요소의 내용(content) 바꾸기 innerHTML

---

       

  document.body.innerHTML = '내용 다 바꿔'

 

           웹 페이지 콘텐츠에 접근해서 내용을 바꾸는 기능이지만,

           innerHTML은 보안취약점과 성능이 나쁜 관계로 잘 사용하지 않습니다. 다음 글에서 대체 방법들을 적어볼게요.

 

 

---

2. 특정 element에 접근하기.

---

     tag, class, id 와 같은 class selector를 통해 접근 가능합니다.

     

      주의사항 !  JS에서 style을 수정할 때는 '-' 사용 불가

 

     camelCase로 작성해줘야 합니다.

let blueElement = document.querySelector('blue');
blueElement.style.backgroundColor = 'blue';

 

 

 

---

3. Element 생성하기

---

     .createElement(태그네임) 함수를 사용하면, element를 생성 가능합니다.

 

            -> 만든 후 붙이고 싶은 element에 append 시켜줘야 합니다. 

                 appendChild는 요소의 뒤쪽에 붙여줍니다.

 

 

---

4. Assignment

---

<h1 id="h1-title">
   <span>난 span</span>
      여기에 추가해주세요
</h1>

<script>
function addAssignment(){
  let makeptag = document.createElement('p'); 	//p태그를 만들자
  let h11 = document.getElementById('h1-title') //h1의 아이디를 가져와 변수로 만들기
  makeptag.innerHTML = 'DOM' //만든 p태그의 내용 입력
  makeptag.className = 'dom' //만든 p태그에 class명을 부여함
  h11.appendChild(makeptag)  //h1태그에 p태그를 append
}
addAssignment()
</script>

 

 

         ● P 태그를 생성하고    -  hint : createElement

         ● 해당 요소에 dom 이라는 class 이름을 부여    -  hint : className

         ● 해당 요소에 "DOM"이라는 텍스트를 넣어서    -  hint : innerHTML

         ● h1 요소 내부에 추가    -  hint : appendChild

 

 

 

---

5.  DOM Element를 동적으로 만드는 메서드들

---

 

 

 

---

6.  DOM 접근 메서드

---