문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== JS Reference HTML DOM Aside Object ======
<WRAP left notice 70%>
  * description : HTML DOM Aside Object
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-06-03
</WRAP>
<WRAP clear></WRAP>
\\
=====the Source of the article===== 
[[https://www.w3schools.com/jsref/dom_obj_aside.asp|HTML DOM Aside Object]]\\

=====Aside Object=====
Aside 객체는 %%HTML <aside>%% 요소를 나타냅니다.\\
\\
**Note:** %%<aside>%% 요소는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.\\
\\
====Access an Aside Object====
%%getElementById()%%를 사용하여 %%<aside>%% 요소에 액세스 할 수 있습니다:\\

====Example====
<code javascript>
<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>
</code>

=====Create an Aside Object=====
%%document.createElement()%% 메서드를 사용하여 <aside> 요소를 만들 수 있습니다.\\

====Example====
<code javascript>
<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>
</code>








{{tag>오션 HTML DOM Aside Object }}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구