반응형


<
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> </head> <body> <ul> <li>html</li> <li>css</li> <li>abcdbcd</li> </ul> <script> var li = $('li'); li.map(function(index,elem){ console.log(index,elem); $(elem).css('color','red'); }) </script> </body> </html>

li 를 제이쿼리 객체로 만들고

map 이라는 메소드는 함수로 인자를 받게되있다.

map li 에 있는 객체의 배열을 다 돌면서 .map 의 메소드로 index 값과 elem(엘리먼트값)을 뽑아낸다

elem 에 돔 객체가 담겨있찌만 제이쿼리 함수가 아니라서

$(elem) 이렇게 감싸서 제이쿼리 객체로 변환해서 제이쿼리 메소드를 사용해야한다.

Element 객체

저번 블로그 포스팅에도 작성하였지만

Element 는 html 만을 위해서 있는게 아닌

xml , svg , xul , html 등의 각각의 요소들을 다루는것이

Element 이다 그중에서 Element가 상속? 같은걸 받아서

html에서 사용하는게 htmlElement 이다



dom 의 관계

element 는 식별자 , 조회 , 속성 3가지가 있다.

식별자

엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자가 필요하다.

HTML에서 엘리먼트의 Name 과 id 그리고 class 는 식별자로 사용된다.

식별자 API는 이 식별자를 가져오고 변경하는 역활을 한다.

1. ) Element.tagName

Element.tagName //엘리먼트 객체의 태그의 이름을 뽑는다

만약 document.getElementById('active').tagName

// 을 하게될경우 id값이 active인 tag의 이름을 출 력한다

//다만 읽기전용이라 document.getElementById('active').tagName = a 를 해도 변하지는 않는다

2. ) Element.ID

var active = document.getElementById('active'); // id 가 active인 값을 찾아 저장한다 console.log(active.id); // active active.id = 'active222'; // id 값을 active222 로 바꿔준다 console.log(active.id); // active222

3. ) Element.className , Element.classList

먼저 Element.className 은 class로 등록된 이름을 찾는다. var active = document.getElementById('active'); // id가 active인 엘리먼트를 저장 console.log(active.className); // id가 active인 요소의 클래스명을 출력 active.className = 'ab213'; // 클래스명을 ab213 으로 바꿈 console.log(active.className); // ab213 그다음 Element.classList var active = document.getElementById('active'); console.log(active.classList); 이렇게 담아주게 되면 DOMTokenList 라는 객체에 유사배열로 className이 active인것을 담는다 active.classList.add('abc'); //하면 클래스에 abc 이름이 추가된다 ex) class = 'active abc' active.classList.remove('abc'); // 클래스에 abc 이름이 삭제된다 ex) class = 'active' active.classList.toggle('abc'); // 클래스에 abc 이름이 있으면 지우고 없으면 생긴다.

조회

조회 API는 엘리먼트를 조회하는 기능이다.

조회방법은 위에서 계속 나왔기 때문에 조회대상을 제한하는 방법만 소개한다.

document.getElementsBy* 메소드를 통해서 엘리먼트를 조회했다.

document객체는 문서 전체를 의미하는 엘리먼트이기 때문에 document로 조회하면 문서전체중에 조회한다

Element 객체도 getElementsBy* 엘리먼트가 있는데 Element객체의 조회 메소드는 해당 엘리먼트위 하위 엘리먼트를 대상으로만 조회를 한다.

Element.getElementsByClassName // 클래스의 이름을 찾는다

Element.getElementsByTagName // 태그의 이름으로 찾는다

Element.querySelector // 정해준 이름값으로 찾지만 1개의 결과만 내놓는다

Element.querySelectorAll //정해준 이름값으로 찾아 유사배열로 만든다.

속성

Element.getAttribute(name)

Element.setAttribute(name,value)

Element.hasAattribute(name);

Element.removeAttribute(name);

//html <a href="http://www.naver.com" title="네이버" id ="target">네이버</a> //script var t = document.getElementById('target'); t.getAttribute('href'); // http://www.naver.com **href 의 값을 뽑는다 t.setAttribute('href','http://google.com'); // href = 'http://google.com' 바뀜 t.hasAttribute('href'); // true **href 속성이 있나 확인 t.removeAttribute('href'); //href **속성 제거

이렇게 다양한 방법으로 엘리먼트를 접근해서 수정할수있는데

여기서 프로퍼티방식과 속성방식은 미묘하게 차이가있다

클래스명을 바꿀때 프로퍼티방식으로 active.className = 'abcd' 이렇게 사용하지만

속성방식으로는 active.setAttribute('class','abcd'); 이렇게 사용한다 ( class는 예약어이기때문)



또한 href도 조금 미묘한 차이가 있는대. <a id="target" href="./demo1.html">link</a> var target = document.getElementById('target'); //현재 url 주소가 http://localhost/web/elements/abcd.html 이라면 console.log('target.href',target.href); // http://localhost/web/elements/demo1.html 로 바뀌지만 console.log('target.getAttribute("href")', target.getAttribute("href")); // 이렇게 하면 href의 경로는 ./demo1.html 로 바뀐다


반응형

+ Recent posts