HTML DOM header用法及代碼示例

HTML DOM 標頭對象與 HTML 5 中引入的 HTML <header> 元素相關聯。使用標頭對象，我們可以分別使用 createElement() 和 getElementById() 方法創建和訪問 <header> 元素。

用法

以下是語法 -

創建標題對象 -

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

示例

讓我們看一個 HTML DOM 標頭對象的示例 -

<!DOCTYPE html>
<html>
<body>
<h1>Header object example</h1>
<p>Create a header element by clicking the below button</p>
<button onclick="headerCreate()">CREATE</button>
<script>
   function headerCreate() {
      var h = document.createElement("HEADER");
      document.body.appendChild(h);
      var h2 = document.createElement("H2");
      var txt = document.createTextNode("Header element containing a h2 element is now created");
      h2.appendChild(txt);
      h.appendChild(h2);
   }
</script>
</body>
</html>

輸出

這將產生以下輸出 -

單擊“創建”按鈕 -

在上麵的例子中 -

我們創建了一個按鈕 CREATE，當用戶點擊它時將執行 createHeader() 方法 -

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

headerCreate() 方法使用 createElement() 方法在文檔對象上創建標題元素並將其分配給變量 h。然後它調用文檔正文上的 appendChild() 方法將標題作為子項附加到文檔正文。使用與上麵相同的方法，我們使用文檔對象的 createTextNode() 方法為其創建一個 <h2> 元素和一個文本節點。

使用 appendChild() 方法將文本節點附加到 <h2> 元素。最後，使用 appendChild() 方法將 <h2> 元素與文本節點一起附加為標題元素的子元素 -

function headerCreate() {
   var h = document.createElement("HEADER");
   document.body.appendChild(h);
   var h2 = document.createElement("H2");
   var txt = document.createTextNode("Header element containing a h2 element is now created");
   h2.appendChild(txt);
   h.appendChild(h2);
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM header object。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。