HTML 요소 제어 03. 웹페이지 시작하기

HTML 속성 제어

hasAttribute(속성 이름)

• 선택요소에 속성의 존재 확인
• 인수로 지정된 속성의 존재 여부를 boolean 반환한다.

mytag.hasAttribute(name);        //— 선택요소에 속성의 존재 확인.인수로 지정된 속성의 존재 여부를 boolean 반환한다.

getAttribute(속성값)

• 선택요소에 속성값을 가져옴

mytag.getAttribute(name);        //— 선택요소에 속성값을 가져옴.

setAttribute(속성이름 , 속성값)

• 선택요소에 속성값을 변경함(=추가함,덮어씌워진다,수정된다)

mytag.setAttribute(name, value); //— 선택요소에 속성값을 변경함.

removeAttribute(속성이름)

• 요소의 첫번째 속성을 제거한다.

mytag.removeAttribute(name);     //— 선택요소의 첫번째 클래스 속성을 제거함.

예제

<script>
        /* 01.a태그의 모든 클래스요소 선택 */
        const linkList = document.querySelectorAll(".link");
        /* 02.for of반복문으로 linkList객체에 담긴 배열 반복 */
        for (const item of linkList) {
            /* 03. 대상객체에 click 이벤트타입 지정 및 이벤트가 나타났을때 
                동작하게 해줄 addEventListener 함수 */
            item.addEventListener('click', e => {
                //링크에 대한 클릭 이벤트 발생 후 href 속성이 동작
                /* 06. 아래 구문은 링크에 대한 클릭이벤트 동작 후,
                    href 속성이 동작하는 것을 방지한다.*/
                e.preventDefault();
                /* 04.HTML 속성값 접근하기 : getAttribute */
                //->링크에 담긴 원본 이미지 주소
                const src = e.currentTarget.getAttribute("href");   //-> img/img04.jpg
                const title = e.currentTarget.getAttribute("title");   //-> 텍스트 이미지 4
                console.log(src);
                console.log(title);
                /* 05.HTML 속성값 추가하기 :setAttribute */
                //viewer안에 자식요소 img태그선택
                const target = document.querySelector("#target")
                target.setAttribute("src", src);
                target.setAttribute("alt", title);
                /* 
                click이벤트가 지정된 아이템에 이벤트리스너가 호출되면
                현재 클릭이 발생한 요소자신의 속성값에 접근이되고,
                target요소에 클릭 된 해당 요소의 속성값이 덮어씌워진다.(추가된다=수정된다) 
                */
            });
        }
    </script>