HTML DOM 세부 정보 개체

<시간/>

HTML DOM Details 개체는 HTML

요소와 연결됩니다. 이렇게 하면 사용자가 보고 싶어할 때만 표시할 수 있는 정보를 숨길 수 있습니다.

속성

다음은 세부 정보 개체의 속성입니다 -

Sr.No	속성 및 설명
1	열기 세부 정보가 사용자에게 표시되어야 하는지 여부를 설정하거나 반환합니다.

구문

다음은 −

의 구문입니다.

세부 정보 개체 만들기 -

var p = document.createElement("DETAILS");

예시

HTML DOM 세부 정보 개체에 대한 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<body>
<h2>Details object</h2>
<p>Click the below button to create a DETAILS element about a monument</p>
<button onclick="detCreate()">CREATE</button>
<br><br>
<script>
   function detCreate() {
      var et = document.createElement("DETAILS");
      var sum=document.createElement("SUMMARY");
      var sumText=document.createTextNode("Eiffel Tower");
      var txt = document.createTextNode("It is one of the most popular monument in the world");
      sum.appendChild(sumText);
      et.appendChild(txt);
      document.body.appendChild(sum);
      document.body.appendChild(et);
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 세부 정보 개체

CREATE 버튼을 클릭한 다음 화살표를 클릭하여 세부 정보를 확장할 때 -

HTML DOM 세부 정보 개체

위의 예에서 -

사용자가 클릭할 때 detCreate() 함수를 실행하는 CREATE 버튼을 만들었습니다 -

<button onclick="detCreate()">CREATE</button>

detCreate() 함수는 문서 객체의 createElement() 메서드를 사용하여

요소를 생성하고 이를 변수 et에 할당합니다. 그런 다음

요소의 일부이고 문서 객체의 createElement() 메서드에 의해 내부에 포함된 또 다른 요소

를 만들고 변수 sum에 할당합니다.

그런 다음

및

요소에 각각 추가되는 두 개의 텍스트 노드 sumtxt 및 txt가 생성됩니다. 새로 생성된

요소와 details 요소는 appendChild() 메서드를 사용하여 문서 본문에 추가하고 추가할 요소를 매개변수로 전달합니다 -

function detCreate() {  
   var et = document.createElement("DETAILS");  
   var sum=document.createElement("SUMMARY");  
   var sumText=document.createTextNode("Eiffel Tower");  
   var txt = document.createTextNode("It is one of the most popular monument in the world");    
   sum.appendChild(sumText);  
   et.appendChild(txt);  
   document.body.appendChild(sum);  
   document.body.appendChild(et);
}