HTML DOM header 对象


HTML DOM header 对象与 HTML 中引入的 <header> 元素相关联。使用 header 对象,我们分别可以使用 createElement() 和 getElementById() 方法创建和访问 <header> 元素。

语法

以下是语法方法 −

创建一个 header 对象 −

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

示例

让我们看一个关于 HTML DOM header 对象的示例 −

实时演示

<!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 按钮后 −

在上例中 −

我们创建了一个按钮 CREATE,当用户点击 CREATE 按钮时,将执行 createHeader() 方法 −

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

headerCreate() 方法使用文本文档的 createElement() 方法创建一个 header 元素,并将其分配给变量 h。然后,它在文本文档的主体上调用 appendChild() 方法,将 header 添加为主体的子内容。使用上面同样的方法,我们使用文本文档的 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);
}

更新日期:19-2 月 -2021

2K+ 浏览量

启动你的职业生涯

通过完成课程获得认证

开始
广告
© . All rights reserved.