(DOM & Events 03) element 변경하기

SoloLearn JS 번역

Changing Attributes

속성 변경하기

  • Once you have selected the element(s) you want to work with, you can change their attributes.
    • 작업하려는 element를 선택했다면, 속성을 변경할 수 있다.
  • We can change the text content of an element using the innerHTML property.
    • innerHTML 속성을 사용해서 element의 텍스트 내용을 변경할 수 있다.
  • Similarly, we can change the attributes of elements.
    • 마찬가지로, element의 속성도 변경할 수 있다.
  • For example, we can change the src attribute of an image:
    • 예를 들어, 이미지의 src 속성을 변경할 수 있다.
<img id="myimg" src="orange.png" alt="" />

   var el = document.getElementById("myimg");
   el.src = "apple.png";

  • We can change the href attribute of a link:
    • 링크의 href 속성을 변경할 수 있다.
<a href="https://www.example.com">Some link</a>

   var el = document.getElementsByTagName("a");
   el[0].href = "https://www.sololearn.com";

코드 실행 확인

Practically all attributes of an element can be changed using JavaScript.

element의 거의 모든 속성은 JavaScript를 사용해서 변경할 수 있다.

Changing Style

style 변경하기

  • The style of HTML elements can also be changed using JavaScript.
    • HTML element의 style은 JavaScript를 사용해서 변경할 수도 있다.
  • All style attributes can be accessed using the style object of the element.
    • 모든 style 속성은 element의 style 객체를 사용해서 액세스할 수 있다.
<div id="demo" style="width:200px">
   some text

   var x = document.getElementById("demo");
   x.style.color = "6600FF";
   x.style.width = "100px";

코드 실행 확인

  • The code above changes the text color and width of the div element.
    • 위 코드는 div element의 텍스트 colorwidth를 변경한다.

All CSS properties can be set and modified using JavaScript.

모든 CSS 속성은 JavaScript를 사용해서 설정하고 수정할 수 있다.

Just remember, that you cannot use dashes (-) in the property names: there are replaced with camelCase versions, where the compound words begin with a capital letter.

속성 이름에는 dash(-)를 사용할 수 없다.

복합어가 대문자로 시작하는 camelCase 버전으로 대체된다.

For example: the background-color property should be referred to as backgroundColor.

예: background-color 속성은 backgroundColor로 나타내야 한다.


  • Fill in the blanks to select all images of the page and change their src attribute.
    • 페이지의 모든 이미지를 선택하고, src 속성을 변경해라.
var arr = document.getElementsByTagName("img");

for (var i = 0; i < arr.length; i++) {
   arr[i].src = "demo.jpg";

  • Fill in the blanks to change the background color of all span elements of the page.
    • 페이지 내 모든 span element의 배경색을 변경해라.
var s = document.getElementsByTagName("span");

for (var i = 0; i < s.length; i++) {
   s[i].style.backgroundColor = "#20a19c";