[Javascript] html 태그의 속성 바꾸기, 태그 편집하기, 요소 변경하기

자바스크립트로도 html의 속성을 자유자재로 변경할 수 있다.

 1. 쉽게 태그의 내용 바꾸기 

<div id="Element" style="width:100%"></div>

여기서 style을 삭제해보자.

var el = document.getElementById('Element');
el.style = null;

이렇게 스타일을 비우게 되면 html 태그 코드는 하단의 내용처럼 바뀌게 된다.

<div id="Element" style></div>

자바스크립트가 웬일로 매우 직관(?)적이다.

매우 간단하다.

하지만 저기 걸린 style 이 마음에 안든다.

성능상 관계없기는 하지만 style 단어까지 없앨수는 없을까..?

 2. Attribute 

자바스크립트에는 속성 자체를 자유자재로 편집할 수 있는 간단한 코드가 존재한다.

var el = document.getElementById('menu');
// - 속성의 추가 : 엘리먼트에 새로운 속성과 속성값을 추가한다.
el.setAttribute(속성명, 속성값);
// - 속성의 변경 : 엘리먼트에 지정된 속성명을 새로운 속성값으로 바꾼다.
el.setAttribute(속성명, 속성값);
// - 속성의 삭제 : 엘리먼트에서 지정된 속성명과 일치하는 속성을 삭제한다.
el.removeAttribute(속성명);
// - 속성값 조회 : 엘리먼트에서 지정된 속성명의 속성값을 가져간다.
el.getAttribute(속성명);