목차

JS Reference HTML DOM Aside Object

  • description : HTML DOM Aside Object
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-06-03


the Source of the article

HTML DOM Aside Object

Aside Object

Aside 객체는 HTML <aside> 요소를 나타냅니다.

Note: <aside> 요소는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.

Access an Aside Object

getElementById()를 사용하여 <aside> 요소에 액세스 할 수 있습니다:

Example

<body>
 
  <h3>A demonstration of how to access an ASIDE element</h3>
 
  <p>"My family and I visited The Epcot center this summer."</p>
 
  <aside id="myAside">
    <h4>Epcot Center</h4>
    <p>The Epcot Center is a theme park in DisneyWorld, Florida.</p>
  </aside>
 
  <p>click the button to set the textcolor of the aside content to red.</p>
 
  <button onclick="myFunction()">Try it</button>
 
  <script>
    function myFunction() {
      var x = document.getElementById("myAside");
      x.style.color = "crimson";
    }
  </script>
 
</body>

Create an Aside Object

document.createElement() 메서드를 사용하여 <aside> 요소를 만들 수 있습니다.

Example

<body>
 
  <p>Click the button to create an ASIDE element containing a H4 and P element.</p>
 
  <button onclick="myFunction()">Try it!</button>
  <!-- 
    버튼 클릭 시 
  Epcot Center
 
  The Epcot Center is a theme park in Disney World.
  -->
 
  <script>
    function myFunction() {
      var x = document.createElement("ASIDE");  // aside 요소 만들고, 변수 x 에 대입 
      x.setAttribute("id", "myAside");    // aside 요소에 myAside라는 값을 가진 id 속성을 추가
      document.body.appendChild(x); // body에 aside 요소를 추가
 
      var heading = document.createElement("H4"); // h4 요소를 만들고, 변수 heading에 대입
      var txt1 = document.createTextNode("Epcot Center"); // h4요소에 텍스트 노드 Epcot Center를 변수 txt1에 대입
      heading.appendChild(txt1);  // h4에 Epcot Center를 내용으로 추가
      document.getElementById("myAside").appendChild(heading);  // id=myAside를 가진 <aside>요소에 Epcot Center를 내용으로 추가하여 가져온다.
 
      var para = document.createElement("P"); //p 요소 생성
      var txt2 = document.createTextNode("The Epcot Center is a theme park in Disney World.");  // 텍스트를 생성하여 변수 txt2에 대입
      para.appendChild(txt2); // p 요소에 txt2 내용을 추가
      document.getElementById("myAside").appendChild(para);
      // id=myAside를 가진 <aside>요소에 txt2를 내용으로 추가하여 가져온다. 
    }
  </script>
 
</body>
, , , ,