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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。