背景
为了练习和使用js中的创建节点、追加节点以及练习生成json对象和遍历集合。对现阶段学习到的js中的DOM文档对象模型进行阶段总结并进行实践练习。
使用json对象的形式创建table表格
我们先来想一想如何进行实现，实现的步骤有哪几步。
1.首先我们需要生成一个table，并将这个元素节点追加到body中。
2.声明json个格式的字符串，申明json对象
3.根据json对象的长度进行循环，每一次循环都生成一个tr，并将tr追加到table中去。
4.对json对象中的元素进行遍历，并生成td将元素赋值到td中，最后将td追加到tr中。
代码进行实现
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> </style> <script type="text/javascript"> // json格式的字符串 var str = '[{name:"David",sex:"男",age:19},{name:"Jones",sex:"女",age:29},{name:"Rebecca",sex:"女",age:39}]'; onload = function() { // 生成一个table，然后追加到body中 // 里面遍历json对象生成里面的tr // 每一个json对象中的每一个成员(for-in)得到td标签 // 1、生成table var table = document.createElement("table"); //设置边框 table.border = "1"; // 2、得到json格式的对象 var jsons = new Function("return " + str)(); // 3、循环这个数组 for(var i = 0; i < jsons.length; i++) { // 4、生成每一个行 // 创建tr标签 var tr = document.createElement("tr"); // 5、添加td，就需要遍历每一个对象中的成员 for(var k in jsons[i]) { // 6、创建td var td = document.createElement("td"); td.appendChild(document.createTextNode(jsons[i][k])); // 7、追加td tr.appendChild(td); } // 循环结束，就得到一个行 // 将行追加到table table.appendChild(tr); } // 将table加到body中 document.getElementsByTagName("body")[0].appendChild(table); }; </script> </head> <body> </body> </html>
实现效果图
涉及到的知识点
DOM树中的添加节点，追加节点
创建节点
1.元素节点：var node=document.createElement(“标签名”);
2.文本节点：var textNode=document.createTextNode(“文本”);
<节点>.innerHTML=“文本”；//这里可以使用HTML
<节点>.innerText=“文本”；//非标准，浏览器兼容问题（不建议使用）
3.属性节点
<节点>.setAttribute(…,…);
//标准方法，符合xml规范，可以添加任意的属性
追加节点
1.追加到尾部：
父节点.appendChild(子节点);
2.插入到中间（插入到某一个元素的前面）
父节点.insertBefore(新元素，就元素);
声明json格式，创建json对象
声明json格式的字符串
// json格式的字符串 var str = '[{name:"David",sex:"男",age:19},{name:"Jones",sex:"女",age:29},{name:"Rebecca",sex:"女",age:39}]';
创建Jason格式的对象
var jsons = new Function("return " + str)();
