엘리먼트 속성 변경

Method	Description
element.innerHTML=	html 엘리먼트를 변경
element.attribute=	html 속성 변경
element.setAttribute(attribute,value)	html 속성 변경
element.style.property=	html 스타일 변경
element.getAttribute(attribute)	html 속성 가져오기

 

innerHTML

 

 document.getElementById("변경할 태그의 아이디").innerHTML="바꿀 내용 <태그>"

- 선택한 속성의 HTML 내용을 변경한다. HTML 태그도 사용 가능

 

 

attribute

 

document.getElementById("sp1").(변경하길 원하는 속성[value,)="변경할 내용";

 

var tags=document.getElementsByTagName("input");

tags[0].type="button" // input 태그를 가진 첫번째 엘리먼트의 type을 button으로 바꾼다. 

 

setAttribute(attribute,value)

 

엘리먼트.setAttribute("속성", "바꿀내용")

 

var tags=document.getElementsByTagName("input");

tags[0].setAttribute("type","button");  // input 태그를 가진 첫번째 엘리먼트의 type을 button으로 바꾼다. 

 

element.style.property

 

엘리먼트.style.(변경할 속성)="변경할 속성"

 

document.getElementById("ex").style.color="red"; // 아이디를 ex로 가진 엘리먼트의 글자 색깔을 빨간색으로 변경한다.

 

element.getAttribute(attribute)

 

엘리먼트.getAttribute(속성)

 

var tags = document.getElementsByTagName("a"); //a태그인 엘리먼트들을 저장한다.

for (var i = 0; i < tags.length; i++) {

var attr = tags[i].getAttribute("data-role"); //  data-role 속성을 하나씩 가져온다.
            if (attr == "header") {
                tags[i].innerHTML = "

HEADER

";
            }
            if (attr == "main") {
                tags[i].innerHTML = "

MAIN

";
            }
            if (attr == "footer") {
                tags[i].innerHTML = "

FOOTER

";
            }