JavaScript - .map , ELEMENT :: 아빠개발자의 노트

JavaScript - .map , ELEMENT

2019. 2. 27. 09:49

<!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 로 바뀐다

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 공부내용정리(2) (0)	2019.02.27
자바스크립트 - 제어대상 찾기 (dom요소 찾기) (0)	2019.02.27
JavaScript - NODE 객체 (0)	2019.02.27
javascript - let,var,const 차이 (0)	2019.02.27
javascript - DOM 선택 STYLE 바꾸기 (0)	2019.02.27

아빠개발자의 노트

JavaScript - .map , ELEMENT

'프로그래밍 > JavaScript' 카테고리의 다른 글

+ Recent posts

티스토리툴바