- HTML요소에 접근하기(아이디, 태그명, name, class, 선택자)
- 문자열과 숫자 (문자열 메소드, 문자열 html메소드, 수학메소드, 산술연산, 형변환)
💡 HTML 요소에 접근하기 (= 해당 요소객체 가져오기)
➡️ 1) 아이디를 이용해서 요소 가져오기
document.getElementById("아이디명") ==> 선택된 요소객체 반환 !
<📌1번 예제>
1) .area 스타일에 스타일 부여하여 박스 만들기
2) div id가 area1이고 class가 area인 div 요소 하나 만들기
3) 클릭 버튼을 만들고 함수 호출하기
4) script에서 accessId 함수 만들기
5) area1이라는 변수에 요소객체 가져오기 `document.getElementById("area1")`
6) 선택한 요소의 속성값 가져오기 `area1.innerHTML = "아이디로 접근 성공"`
7) 추가로 선택한 요소의 속성값 변경도 가능 `area1.style.width=200px`
- 실행 전 화면
- 실행 후 화면
<📌2번 예제>
1) div id가 area2이고 class가 area이고 스타일 속성값으로 배경 빨간색 설정하기 2) 클릭 버튼 만들고 onclick=changeColor(); 함수 호출하기 3) script에 changeColor 함수 만들기 4) area2라는 변수에 요소객체 가져오기 5) 조건문으로 area2의 배경색이 빨간색과 일치하면 노란색으로 바꾸고, 빨간색이 아니라면, 다시 빨간색으로 변경하기 조건식 작성하기
- 클릭 전
- 클릭 후
➡️ 2) 태그명을 이용해서 요소 가져오기
document.getElementsByTagName("태그명") ==> 선택된 요소객체들이 배열에 담겨서 반환 !
<📌1번 예제>
1) ul>li{목록$}*5 만들기
2) 버튼 만들고 accessTagName(); 함수 호출하기
3) script에서 accessTagName() 함수 만들기
4) list라는 변수에 요소객체(태그명) 가져오기 `document.getElementsByTagName("li")`
5) for문을 활용해서 텍스트와 배경색 입혀주기
6) i가 0부터 list의 길이까지 1씩 증가하면 list의 i인덱스들이 list[i].innerHTML = "안녕하세요"; -> 목록이라고 쓰여있던 것들이 안녕하세요로 바뀜
7) list[i].style.backgroundColor = "rgb(130, 220, " + blueColor + ")";
blueColor += 50;
=> for문 위에 blueColor 변수를 하나 생성해주기.
=> rgb 컬러색상으로 마지막을 blueColor로 설정해주고 반복문이 돌때마다 50씩 증가하여 색상이 바뀜 !
- 클릭 전
- 클릭 후
➡️ 3) name속성값을 이용해서 요소 가져오기
document.getElementsByName("name속성값") ==> 선택된 요소객체들이 배열에 담겨서 반환 !
1) form을 하나 만들어주고 취미를 고를 수있는 checkbox 생성하기
2) div id=area3, class=area인 요소 하나 생성
3) 버튼 만들고 함수 호출
4) script에서 accessName()함수 생성
5) hobby라는 변수에 input요소객체 가져오기
=> document.getElementsByName("hobby");
6) area3라는 변수에 div 요소객체 가져오기
=> document.getElementById("area3");
7) for문으로 hobby가 체크되면 div 요소의 변수인 area3.innerHTML을 호출하여 hobby의 인덱스의 값이 출력됨
* area3.innerHTML = ""; 이거는 해당 창에 중복으로 나타나지 않게 초기화 시켜주는 구문임 !
- 클릭 전
- 클릭 후
➡️ 4) 클래스를 이용해서 요소 가져오기
document.getElementsByClass("class속성값") ==> 선택된 요소객체들이 배열에 담겨서 반환 !
➡️ 5) 선택자를 이용해서 요소 가져오기
document.querySelector("선택자") => 선택된 요소객체 딱 하나 반환
document.querySelectorAll("선택자") => 선택된 요소객체가 담긴 배열 반환
1) divEl 변수에 div 요소객체 가져오기 (선택자로 == #test) 2) h2El 변수에 h2 요소객체 가져요기 (선택자로 == .test>h2) 3) spanEl 변수에 span 요소객체 가져오기 (선택자로 == .test+span)
- 콘솔 창
