I. 엘리먼트 객체 선택하기 (05)
문서에서 태그와 연관되어있는 메모리상 객체를 엘리먼트 객체라고한다.
1. 스크립트 작성방식 : ID를 직접 이용하는 방식의 문제점
<body>
<input type = "button" value="출력"
id="btnPrint">
</body>구분자로 id로 이름을 달게되면 된다.
그러나 id 를 JS에 직접 가져다 쓰면 문제가있다.
btn-print로 JS 는 대시(-)는 쓸 수 없다.
우리는 이렇게 보다 document 보따리 다른말로 컨테이너(엘리먼트를 가지고있는 박스) 이 컨테이너가 다큐먼트 객체이다
다큐먼트 객체에게 내가 이 이름을 호명할 것이니까 이 객체 좀 얻어줘라는 방식으로한다.
오류가 나니까 이 이름을 바꾸고 가지고온다.
id 를 가지고 element 줘 라고 하는 의미이다.
꺼내서 변수 규칙에 맞게 쓴다.
id를 쓸수있다고 해서 쓰기보다는 얻어가지고 쓰는것이 바람직하다.
window.addEventListener("load",function(){
var btnPrint = this.document.getElementById("btn-Print");
//html 대신에 여기에 만들어줌
// btnPrint.onclick = printResult; //이렇게 해야 호출 됨
btnPrint.onclick = printSum; //이렇게 해야 호출 됨
function printSum(){
var x = prompt('x : ');
var y = prompt('y : ');
x = parseInt(x);
y = parseInt(y);
var result = x + y;
btnPrint.value = result;
console.log(result);
}
});
- 없으면 null 로 됨
나의 경우 오타로 null이 떳다.
기본적 핵심은 객체 얻어내고, 이벤트 바인딩하는것이 방식이다.
객체얻어내고, 객체 속성으로 값 바꾸거나 얻어낼수있는 기본적 능력배움
이제 객체선택방법 배우자
-스스로 해본 버튼클릭시 버튼 value 가 텍스트에 옮겨지기
window.addEventListener("load", function(){
var btnInput = this.document.getElementById("btn-input");
var pText = this.document.getElementById("text-print");
btnInput.onclick = printText;
function printText(){
pText.value = btnInput.value
}
})here 가 click로 바뀜
II. 엘리먼트 객체 선택하기 (06)
1. 객체를 선택하는 일반적인 방법
(1) Document 인터페이스의 노드 선택방법
ById
ByName
ByClassName
ByTagName
이렇게 있다
Byid는 document 객체만가지고있다.
ByName
ByClassName
ByTagName
이는 모든 element 객체가 가지고있다.
(2) 선택해야 할 객체가 여러 개일경우
1) 노드 선택위한 DOM 객체의 메소드
HTML모든 녀석에다가 하려면 각 id를 부여해야한다
ID 모든 문서에 할때마다 부여한다 함은 (id는 식별자, url 의 일부구성) 마구잡이로하면 여러명이서 하면 충돌 발생도 될수있다.
모든 element에다가 id부여는 바람직하지 않고, 식별자는 가급적 class name이 좋다
만약 그렇다고 하더라도, 태그에다가 주기보다는 울타리(section)에다가 줄 수있다.
무조건 태그에다가 쓰기보다 section이 좋아
ById 로 section에 id를 얻어온다
이제 다큐먼트 전체보다 section에만 찾을 수있다.
이후 안 내용들은 document 가 아니라 section으로 접근한다.
window.addEventListener("load", function(){
var section = this.document.getElementById("s1");
var input = section.getElementsByClassName("input");
var button = section.getElementsByClassName("buttonn");
button.onclick=function(){
console.log("ddd")
}
})하지만 로그에 뜨지않는다
getElements
로 s가있다.
하나만 가져오는게 아니다.
배열이 아니고, Noad list 형태 컬렉션으로 얻어준다.
그래서 배열형태로 해주어야한다.
즉 배열형태인데 그렇다면 1번이후 인덱스들은 어떻게 구성되는 것일까?
이러한 인덱스들은 같은 이름의 className들의 경우에 배열로 구성된다.
var section = this.document.getElementById("s1");
var input = section.getElementsByClassName("input")[0];
var button = section.getElementsByClassName("buttonn")[0];III. Selectors API
j쿼리가 가지고있는 노드선택방법이다
j쿼리 뛰어난기능?
1. 크로스플랫폼 (브라우저 종류 상관없이 단일 인터페이스)
2. 노드(DOM)객체를 사용하기 위해서 노드선택 시 엘리먼트 객체꺼내는 작업을 CSS가 가지고있는 Selector구문으로 객체를 얻을수 있게끔하였다. (HTML에도)
1. Selector API LEVEL 1
두가지 종류가있다.
문서내 유일한것은 쿼리셀렉터 쓰고 / 문서내 여러개 목록(클래스명, 폼 등) 선택하는것은 쿼리셀렉터all 로가능하다
2. 기존 코드에서 노드 선택방식을 변경하기
# 은 id 이다 (CSS기법임)
바로 input 을하면 안된다. 태그명으로 인식하기 때문이다.
(.) 을 넣어서 클래스명으로 해주어야한다.
이제 section에다가 id부여필요 없고 클래스명으로도 가능하다.
id명에대한 부담 덜어낼수있음
window.addEventListener("load",function(){
// var section = this.document.getElementById("s1");
// var input = section.getElementsByClassName("input")[0];
// var button = section.getElementsByClassName("button")[0];
var section = document.querySelector("#s1");
var input = section.querySelector(".input");
// 또는
//var input = section.querySelector("input[type=text]");
var button = section.querySelector(".button");
button.onclick = function(){
input.value = "안녕하세요";
console.log("test");
}
})
앞으로 특별한사정이없으면 Selector API를 쓸것이다.
1. 보충
(1) Selectors
What (정의) : CSS를 적용하기위해서 HTML로부터 엘리먼트 특정하기 위해서
Why (존재이유) : HTML에 style을 적용하기 위해서
How (방법) : style을 하고자 하는 엘리먼트를 셀렉터를 이용해서 특정하고, 당해 엘리먼트에 스타일을 넣는다.
(2) getElementsByClassName 와 querySelectorAll의 차이는 무엇일까?
1) 리턴타입에서 차이가 있다
전자의 경우에는 HTMLCollection 이고
후자의 경우에는 NodeList 이다.
전자의 경우 속도가 더 빠르지만, 후자의 경우 element외에도 다른선택자들을 다양하게 택할수있다는 점에서 용이하다
결국 후자의 경우에 생산성과 편의성이 더 높다고 할수있다
(3) HTML 요소에서 id와 class의 차이는 뭘까?
1) id의 경우 유일한 고유식별자라면 / class 의 경우 재사용이 가능하다
2. 회고
1) 여러번 반복하자
그리고 기능간 유래와 용도를 파악하자!
'배움 __IL > addtionalFrontEnd' 카테고리의 다른 글
| TIL : 웹퍼블리싱 HTML 4회 (8,9) (0) | 2023.01.07 |
|---|---|
| TIL : 웹퍼블리싱 HTML 3회 (6,7) (0) | 2023.01.06 |
| TIL : 웹퍼블리싱 HTML 2회 (5) (0) | 2023.01.04 |
| TIL : 웹퍼블리싱 HTML 1회 :SIMPLE (1~4) (1) | 2023.01.04 |
| TIL : DOM 1회 (0) | 2023.01.02 |