JavaScript 위치

html에서 js파일 불러오기

<script src="자바스크립트파일명.js"></script>

html script태그 내에서도 JavaScript 코드 작성이 가능하나,
별도 외부 파일로 작성해서 분리하는 것이 유지보수에도 좋다

html script태그에서 js코드 작성하기

<script> 
  function sayHi() { 
    console.log('여기는 index.html파일입니다.'); 
  } 

  sayHi();
</script>

---

DOM(Document Object Model)

DOM이란 웹페이지의 HTML을 계층화 시켜 트리구조로 만든 객체(Object) 모델이다
JavaScript는 이 model로 웹페이지에 접근하고, 페이지를 수정할 수 있다

DOM은 HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 잇는 역할을 한다

document라는 전역객체를 통해 JavaScript는 HTML에 접근할 수 있다

JavaScript의 document 객체는 DOM 구조를 접근하는 관문이며, HTML 문서를 나타낸다고 할 수 있다

Document : html
Object : 객체
Model : 모델

왜 HTML에 접근해야 할까?
API를 통해 서버에서 카테고리 목록의 데이터를 가져올 수 있다
document객체는 DOM트리의 root node에 접근하게 해준다
document객체로 요소(element)에 접근, 요소의 속성(attribute)에도 접근할 수 있다
그래서 class, id 추가, style도 수정 할 수 있다

그래서 태그에 일일히 반응하니까?
웹사이트를 더 동적으로 만들 수 있는것 같다 html에 접근해서 조작할 수 있다

객체의 키를 통해 값에 접근하는것과 똑같다
html 객체이기 때문

---

요소의 내용(content) 접근, 수정하는법

innerHTML 사용

document.body.innerHTML = 'body 태그 내용 다 바꿈';

---

특정 element, tag에 접근 하는법

특정 element에 접근하고 싶을 때는
tag, class, id와 같은 css selector와 (querySelector)
직접 tag, class, id 이름을 이용해 접근할 수 있다 (getElementById, getElementsByClassName, getElementsByTagName)

css selector 이용 (스타일 수정 시 주의사항)

스타일도 수정할 수 있는데 css 에서 사용했던 property 명과는 다르다
js에서 style 수정할 때 hypen(-)은 사용할 수 없다!
객체에서 프로퍼티 이름에 hypen(-)을 사용할 수 없던 이유와 같다...(언제 나왔지?)
그러므로 style의 프로퍼티에 접근하고 싶을 때는 camelCase로 바꿔서 사용해야 한다

// class name blue에 접근
let blueElement = document.querySelector('.blue');

// css style 속성 바꾸기 
blueElement.style.backgroundColor = 'blue';

tag, class, id 이름을 이용해 접근

getElementById('아이디 이름')
id name은 고유하므로 복수형이 아니라 이걸로 입력하면 끝

getElementsByClassName('클래스 이름')[몇번째 순서인지(index)]
getElementsByTagsName('태그 이름')[몇번째 순서인지(index)]
class name, tag name 은 중복할 수 있다
위 메서드를 사용하면 ()에 들어있는 이름을 배열로 리턴하는데 거기서 몇번째 순서인지 index넣어주기

id name

function updateTitle() {
  let title = document.getElementById('h1-title');
  
  title.innerHTML = '바뀐 제목!!!';
}

updateTitle();

tag name
class name으로 하는법도 동일

function addClass(name) {
// 0번째 h1 태그에 적용
  let title = document.getElementsByTagName('h1')[0];
  
  title.innerHTML = "wecode.com/img.png";
}

addClass('title');

element 생성하기

1. .creatElement(태그이름) : 요소 생성 가능
2. innerHTML로 내용 추가하기
3. appendChild로 요소 뒤쪽에 붙여 추가시켜주기

리스트를 만들어보자!

function addElement() {
  // unorder list를 만들기 위한 ul태그 생성
  let listWrap = document.createElement('ul');
  // li 태그 생성
  let list = document.createElement('li');
  // span 태그 생성
  let listContent = document.createElement('span');

  // 생성한 span태그에 내용 추가
  listContent.innerHTML = "목록이다";
  // li 태그에 span태그 넣기
  list.appendChild(listContent);
  // ul 태그에 li태그(안에 span태그) 넣기
  listWrap.appendChild(list);
  
  // body 태그에 만든 list 넣기
  document.body.appendChild(listWrap);
}

addElement();

---

예제

p태그 생성하고 dom이라는 class이름 주고 요소에 DOM이라는 텍스트 넣어서 h1요소 내부에 추가

!codepen[jinsk9268/embed/VweZYyP?height=265&theme-id=light&default-tab=html,result]

function addTag() {
  // h1태그 가져오기
  let title = document.getElementsByTagName('h1')[0];
  
  // p태그 생성
  let tagAdd = document.createElement('p');
  
  // p태그의 class 속성 부여, class 이름은 dom
  // 클래스 이름 객체 키값에 돔 부여
  tagAdd.className = 'dom';
  
  // p태그의 content에 DOM 삽입
  tagAdd.innerHTML = 'DOM';
  
  // h1태그에 위에 만든 p태그 (태그안의 content 추가)
  title.appendChild(tagAdd);
}

addTag();