JavaScript HTML DOM 元素（节点）

梦里梦外; 2022-09-29 14:51 427阅读 0赞

JavaScript HTML DOM 元素（节点）

添加和删除节点（HTML 元素）。

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

  1. <div id="div1">
  2. <p id="p1">这是一个段落</p> <p id="p2">这是另一个段落</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("这是新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script>

删除已有的 HTML 元素

如需删除 HTML 元素，您必须首先获得该元素的父元素：

  1. <div id="div1">
  2. <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script>

替换 HTML 元素

如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <div id="div1">
  6. <p id="p1">This is a paragraph.</p>
  7. <p id="p2">This is another paragraph.</p>
  8. </div>
  10. <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); parent.replaceChild(para,child); </script>
  12. </body>
  13. </html>

innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

  1. <html>
  2. <body>
  4. <p id="intro">Hello World!</p>
  5. <script> var txt=document.getElementById("intro").innerHTML; document.write(txt); </script>
  6. </body>
  7. </html>

childNodes 和 nodeValue

除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。

下面的代码获取 id=”intro” 的

元素的值：

  1. <html>
  2. <body>
  4. <p id="intro">Hello World!</p>
  6. <script> var txt=document.getElementById("intro").childNodes[0].nodeValue; document.write(txt); </script>
  8. </body>
  9. </html>

访问 HTML 元素（节点）

访问 HTML 元素等同于访问节点

您能够以不同的方式来访问 HTML 元素：

  • 通过使用 getElementById() 方法
  • 通过使用 getElementsByTagName() 方法
  • 通过使用 getElementsByClassName() 方法

HTML DOM - 修改

创建 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML 属性

  1. <html>
  2. <body>
  3. <p id="p1">Hello World!</p>
  4. <script> document.getElementById("p1").innerHTML="New text!"; </script>
  5. </body>
  6. </html>

改变 HTML 样式

  1. <html>
  3. <body>
  4. <p id="p2">Hello world!</p>
  6. <script> document.getElementById("p2").style.color="blue"; </script>
  8. </body>
  9. </html>

HTML DOM 节点列表

getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。

  1. var x=document.getElementsByTagName("p");

可以通过下标号访问这些节点。如需访问第二个

，您可以这么写：

  1. y=x[1];

您可以使用 length 属性来循环节点列表：

  1. x=document.getElementsByTagName("p");
  3. for (i=0;i<x.length;i++) { document.write(x[i].innerHTML); document.write("<br />");
  4. }

发表评论

表情：
评论列表 （有 0 条评论，427人围观）

还没有评论，来说两句吧...

相关阅读

    相关 JavaScript HTML DOM

    通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素 HTML DOM（文档对象模型） 当网页被加载时，浏览器会创建页面的文档对象模型

    悠悠悠悠/ 0 赞/ 421 阅读