JavaScript
DOM🛒
- 문서 객체 모델(Document Object Model)
- HTML을 계층화시켜 트리구조로 만든 객체 모델
- 자바스크립트에서 HTML에 접근해 동적 기능을 구현한다.
document변수로 접근한다.
사진 출처 :
https://www.w3schools.com/js/js_htmldom.asp
예시
<ul>
<li><input type="text" name="" id="input1" class="ul1"></li> <!--[0]-->
<li><input type="text" name="" id="input2" class="ul1"></li> <!--[1]-->
<li><input type="text" name="" id="input3" class="ul1" value="반갑습니다"></li> <!--[2]-->
<li><input type="text" name="" id="input4" class="ul1"></li> <!--[3]-->
<li><input type="text" name="" id="input5" class="ul1"></li> <!--[4]-->
<li><input type="text" name="" id="input6" class="ul1"></li> <!--[5]-->
</ul>
<ul>
<li><input type="text" name="" id="" class="ul2"></li> <!--[6]-->
<li><input type="text" name="" id="" class="ul2"></li> <!--[7]-->
<li><input type="text" name="" id="" class="ul2"></li> <!--[8]-->
</ul>
<ul>
<li><input type="checkbox" name="ul3" id="" class="ul3" value="1"></li>
<li><input type="checkbox" name="ul3" id="" class="ul3" value="2"></li>
<li><input type="checkbox" name="ul3" id="" class="ul3" value="3" checked></li>
</ul>HTML 요소를 JavaScript로 가져와보자
getElementsByTagName
- 태그 이름으로 값을 가져온다.
document.getElementsByTagName("input")[1].value = "안녕하세요";
//getElementsByTagName : 태그의 이름으로 접근한다([번호]는 반드시 작성)
//document가 권한을 줌
let input3 = document.getElementsByTagName("input")[2].value;
//input3변수에 세번째 input의 value값을 대입
//문서 전체의 input태그에 대해 적용된다
console.log(input3);getElementsByClassName
- 클래스 이름으로 값을 가져온다.
document.getElementsByClassName("ul1")[3].value = "7기";
//class이름이 "ul1"인 애들중에서 4번째getElementsByName
- name속성으로 값을 가져온다.
- checkbox, radio에 많이 쓰인다.
let check2 = document.getElementsByName("ul3")[1].value;
console.log(check2); //2
let check3 = (document.getElementsByName("ul3")[2].checked)?document.getElementsByName("ul3")[2].value:"none";
console.log(check3);
//checked되어있으면 value를 가져오고 아니면 nonegetElementById
- id속성으로 값을 가져온다.
document.getElementById("input6").value = "내일도 모두 화이팅";
//id는 고유값이기 때문에 [번호]를 작성하지 않는다!querySelector
- class, id 중 원하는 속성으로 가져올 수 있다.
- .은 class, #은 id속성이다.
- name은 안된다.
document.querySelector("#input1").value = "querySelector로 접근한 문장";
//# : id querySelectorAll
- 다수의 속성
document.querySelectorAll(".ul1")[4].value="querySelectorAll로 접근";
// . : class
document.querySelectorAll("ul")[0].style="border : 1px solid red";
//value만 가능한건 아님 style도 가능DOM 조작해보자
innerHTML
- HTML요소의 content(내용)을 변경할 수 있다.
document.body.innerHTML = '내용 다 바꿈';
//<body>태그 안의 내용을 바꾼다.style
- HTML요소의 style을 조작할 수 있다.
- camelCase를 사용한다. (background-color → backgroundColor)
const element = document.getElementById('myDiv');
//<div id="myDiv"></div>
element.style.backgrondColor = "red";
//위 div의 background-color속성을 추가했다.createElement
- HTML요소 생성
- appendChild : 특정 요소의 자식으로 요소를 추가한다.
- html코드로 직접 추가한게 아니어서 코드를 눈으로 볼 수는 없다.
const item = document.createElement('h1');
//item 변수에는 <h1></h1>이 담겨있다.
item.innerHTML = "제목" //<h1>제목</h1>
const here = document.getElementById("hereH1");
//here변수에는 item을 추가할 위치를 넣는다.
here.appendChild(item);
// here의 자식으로 item을 추가한다.요소 속성 조작
id
const element = document.getElementById('myDiv');
element.id = 'newId';
//id를 myDiv에서 newId로 변경
const noId = document.getElementsByClassName("noid");
noId.id = 'haveId';
//id를 추가했다!class
const element = document.getElementById('myDiv');
element.className = 'newClass';
//class 추가
const haveClass = document.getElementsByClassName("className");
haveClass.className = 'newClass';
//class를 className에서 newClass로 변경style
const element = document.getElementById('myDiv');
element.style.backgroundColor = "red";
//스타일 추가(수정)Ghost Rain
HTML, CSS, JavaScript로 간단한 웹게임 만들기
- 2022.09.22 hero.js 파일 추가
GhostRain깃허브 바로가기↗
프론트엔드 개발자를 꿈꾸는 사람( •̀ ω •́ )✧