文档对象模型

最新推荐文章于 2024-10-18 17:51:23 发布

摆烂牛马

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量116

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_73690354/article/details/127078836

版权

DOM Document Object Model，它是W3C国际组织的- 套Web标准。它以树形结构表示文(HTML、XML等) 定义了遍历、检查和修改各节点的属性和方法。
W3C组织将DOM分为以下几种不同版本：
Core DOM:定义任意结构文档的标准对象集台主
XML DOM:定义了针对XML文件的标准对象集合
HTML DOM:定义了针对HTML文件的标准对象集合
DOM CSS:定义了在程序中操作CSS样式的接口引
DOM Eventsi给DOM对象添加事件处理。

HTML DOM定义了访问和操作HTML文档的标准方法，它把HTML文档呈现为带有元素、属性和文本的树形结构，定义了访问HTML文档对象的属性、方法和事件。
HTML文档中的每个成分都是一个节点。
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML属性是一个属性节点
注释属于注释节点
树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   #tab{
    border: 1px solid red;
    border-collapse: collapse;
   }th,td{
    border: 1px solid red;
    text-align: center;
   }
  </style>
 </head>
 <body>
  <table id="tab" width="200" border="" cellspacing="" cellpadding="">
   <thead>
    <tr>
     <th>学号</th>
     <th>姓名</th>
     <th>性别</th>
    </tr>
   </thead>
   
   <tbody>
    
   </tbody>
  </table>
  <script type="text/javascript">
   var data=[{
    stuid:1001,
    stuname:"张三",
    stusex:"男"
   },{
    stuid:1002,
    stuname:"李四",
    stusex:"男"
   },{
    stuid:1003,
    stuname:"小红",
    stusex:"女"
   }]
   window.onload=function(){
    for(var i=0;i<data.length;i++){
     var stuid=data[i].stuid
     var stuname=data[i].stuname
     var stusex=data[i].stusex
     //创建td
     var td_1=document.createElement("td")
     var td_2=document.createElement("td")
     var td_3=document.createElement("td")
     //将学号,姓名,性别添加到td中
     td_1.innerHTML=stuid
     td_2.innerHTML=stuname
     td_3.innerHTML=stusex
     //创建一个tr标签
     var tr= document.createElement("tr")
     
     //将td标签添加到tr中
     tr.appendChild(td_1)
     tr.appendChild(td_2)
     tr.appendChild(td_3)
     //将tr添加到tbody中
     document.querySelector("tbody").appendChild(tr)
    }
   }
  </script>
 </body>
</html>