一. 知识点回顾

　　1. DOM结构

  1. nodeName: '' 标签名
  2. nodeType: '' 类型  1元素节点  2属性节点  3文本节点
  3. nodeValue: '' 如果是元素节点 nodeValue的值始终是null;

　　2. 节点分类

  1. 节点的分类
  2. 属性节点 元素节点 文本节点 注释节点
  3. nodeType 为1 时 就是元素节点

　　案例: 查找子节点

  1. <script>
  2.         var box = document.getElementById("box");
  3.         console.log(box.childNodes);
  4.         for (var i = 0; i < box.childNodes.length; i++) {
  5.             var node = box.childNodes[i];
  6.             if (node.nodeType === 1) {
  7.                 console.log(node);
  8.             }
  9.         }
  10. </script>

二. 节点介绍及应用

  1. parentNode  查找父节点 (父节点只有一个)
  2. childNodes  查找子节点 (子节点有多个)
  3. hasChildNodes 判断是否有子节点
  4. children 获取所有的子元素
  5. firstChild 获取第一个子节点
  6. lastChild 获取最后一个子节点
  7. firstElementChild 获取第一个子元素
  8. lastElementChild 获取最后一个子元素  有兼容性问题
  9. nextSibling 获取下一个兄弟节点
  10. previousSibling 获取上一个兄弟节点
  11. nextElementSibling 获取下一个兄弟元素
  12. previousElementSibling 获取上一个兄弟元素

三. 动态创建元素三种方式

1. document.write() 问题 会把之前的整个页面覆盖掉， 不能在事件中使用

  1.     <input type="button" value="按钮" id="btn">
  2.     <script>
  3.         var btn = document.getElementById('btn');
  4.         btn.onclick = function () {
  5.             document.write('Hello <p>World</p>')
  6.         }
  7.  
  8.     </script>

2. element.innerHTML 在这里会有效率问题 因为涉及到了重绘页面

  1.     <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <input type="button" value="按钮" id="btn">
  9.     <div id="box"></div>
  10.     <script>
  11.         var datas = ['西施','貂蝉','凤姐','芙蓉姐姐'];
  12.         var btn = document.getElementById('btn');
  13.         btn.onclick = function () {
  14.             var box = document.getElementById('box');
  15.             box.innerHTML = '<ul>';
  16.                 for (var i = 0; i < datas.length; i++) {
  17.                     var data = datas[i];
  18.                     box.innerHTML += '<li>' + data + '</li>';
  19.                 }
  20.             box.innerHTML += '</ul>'
  21.         }
  22.     </script>
  23. </body>
  24. </html>

优化1

  1. <input type="button" value="按钮" id="btn">
  2.     <div id="box"></div>
  3.     <script>
  4.         var datas = ['西施','貂蝉','凤姐','芙蓉姐姐'];
  5.         var btn = document.getElementById('btn');
  6.         btn.onclick = function () {
  7.             var box = document.getElementById('box');
  8.             var html = '<ul>';
  9.                 for (var i = 0; i < datas.length; i++) {
  10.                     var data = datas[i];
  11.                     html += '<li>' + data + '</li>';
  12.                 }
  13.             html += '</ul>';
  14.             box.innerHTML = html;
  15.         }
  16.     </script>

优化2

  1. <input type="button" value="按钮" id="btn">
  2.     <div id="box"></div>
  3.     <script>
  4.         var datas = ['西施','貂蝉','凤姐','芙蓉姐姐'];
  5.         var btn = document.getElementById('btn');
  6.         btn.onclick = function () {
  7.             var box = document.getElementById('box');
  8.             var array = [];
  9.             array.push('<ul>');
  10.                 for (var i = 0; i < datas.length; i++) {
  11.                     var data = datas[i];
  12.                     array.push('<li>' + data + '</li>');
  13.                 }
  14.             array.push('</ul>');
  15.             box.innerHTML = array.join('');
  16.         }
  17.     </script>

3. document.creatElement() 推荐使用

  1. <div id="box"></div>
  2.     <script>
  3.         // 在内存中创建一个DOM对象
  4.         var p = document.createElement('p');
  5.         // 设置对象的属性
  6.         p.innerText = 'hello';
  7.         p.style.color = 'red';
  8.         // 把p元素 放到DOM树上
  9.         var box = document.getElementById('box');
  10.         box.appendChild(p);
  11.     </script>

案例 动态创建表格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         #box table {
  8.             border-collapse: collapse;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <div id='box'></div>
  14.     <script src="common.js"></script>
  15.     <script>
  16.         var headDatas = ['姓名','科目','成绩','操作'];
  17.     var datas = [
  18.       {name: 'zs', subject: '语文', score: 90},
  19.       {name: 'ls', subject: '数学', score: 80},
  20.       {name: 'ww', subject: '英语', score: 99},
  21.       {name: 'zl', subject: '英语', score: 100},
  22.       {name: 'xs', subject: '英语', score: 60},
  23.       {name: 'dc', subject: '英语', score: 70}
  24.     ];
  25.  
  26.         // 创建table元素
  27.  
  28.         var table = document.createElement('table');
  29.         my$('box').appendChild(table);
  30.         table.border = '1px';
  31.         table.width = '400px';
  32.  
  33.         // 创建表头
  34.         var thead = document.createElement('thead');
  35.         table.appendChild(thead);
  36.         var tr = document.createElement('tr');
  37.         thead.appendChild(tr);
  38.         tr.style.height = '40px';
  39.         tr.style.backgroundColor = 'lightgray';
  40.  
  41.         for (var i = 0; i < headDatas.length; i++) {
  42.             var th = document.createElement('th');
  43.             tr.appendChild(th);
  44.  
  45.             setInnerText(th, headDatas[i]);
  46.         }
  47.         // 创建数据行
  48.  
  49.         var tbody = document.createElement('tbody');
  50.         table.appendChild(tbody);
  51.         tbody.style.textAlign = 'center';
  52.         for (var i = 0; i < datas.length; i++) {
  53.             var data = datas[i];
  54.             var tr = document.createElement('tr');
  55.             tbody.appendChild(tr);
  56.  
  57.             for (var key in data) {
  58.                 var td = document.createElement('td');
  59.                 tr.appendChild(td);
  60.                 setInnerText(td, data[key]);
  61.  
  62.             }
  63.             // 生成删除的对应列
  64.             var td = document.createElement('td');
  65.             tr.appendChild(td);
  66.             var link = document.createElement('a');
  67.             td.appendChild(link);
  68.             link.href = 'javascript:void(0)';
  69.             setInnerText(link, '删除')
  70.  
  71.             link.onclick = linkDelete;
  72.  
  73.         }
  74.         function linkDelete() {
  75.             var tr = this.parentNode.parentNode;
  76.             tbody.removeChild(tr);
  77.             return false;
  78.         }
  79.     </script>
  80. </body>
  81. </html>

四. 常用的元素操作方法

  1. 创建元素操作方法
  2. createElement()
  3. appendChild()
  4. removeChild()
  5.  
  6. insertBefor() 把元素插入到页面的指定位置
  7. replaceChild() 把当前元素标签进行替换

js入门之DOM动态创建数据的更多相关文章

  1. JavaScript DOM动态创建（声明）Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

  2. Dom 获取、Dom动态创建节点

    一.Dom获取 1.全称:Document     Object     Model 文档对象模型 2.我们常用的节点类型 元素(标签)节点.文本节点.属性节点(也就是标签里的属性). 3.docum ...

  3. Javascript:DOM动态创建元素实例应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. [JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件

    本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...

  5. JavaScript dom 动态创建标记

    此前的大多数DOM都是用来查找元素,getElementById和getElementsByTagName都可以方便快捷的找到文档中的某个或者某些特定的元素节点,这些元素随后可以用诸如setAttri ...

  6. 使用DOM动态创建标签

    本文是参考<javascript Dom 编程艺术>第八章的内容所写,用到的知识点,就是关于创建平稳的web页面. 使用DOM方法: getElementById() getElement ...

  7. js入门之DOM

    一.理解Web API Web API Application Programming Interface 应用程序编程接口, 是一个预先定义好的函数和方法 目的是提供应用程序与开发人员基于某软件或硬 ...

  8. js中几种动态创建元素并设置文本内容的比较，及性能测试。

    内容 1 appendChild (都兼容) 2.insertAdjacentHTML (都兼容) 3.innerHTML (都兼容) 4.createDocumentFragment (都兼容) 动 ...

  9. 【 D3.js 入门系列 — 2 】 绑定数据和选择元素

    1. 如何绑定数据 D3 有一个很独特的功能:能将数据绑定到 DOM 上,也就是绑定到文档上.这么说可能不好理解,例如网页中有段落元素<p>,我们可以将整数 5 与 <p>绑定 ...

随机推荐

  1. Java回调机制在RPC框架中的应用示例

    完整源码: https://gitee.com/shiyanjun/x-callback-demo 应用场景描述: 服务提供者在项目启动时,创建并启动一个TCP服务器,然后将自己提供的所有服务注册到注 ...

  2. WPF窗体自适应分辨率

    使用WPF创建一个窗体(Window)时,如果设置了固定的高度(Height)和宽度(Width),一旦用户的电脑分辨率过低,就会使得窗体及其中的内容无法完整地显示出来.要解决这个这个问题,有以下几个 ...

  3. 【DataBase】Hsqldb的简单使用

    介绍 HSQLDB是一个开放源代码的JAVA数据库,其具有标准的SQL语法和JAVA接口,它可以自由使用和分发,非常简洁和快速的.具有Server模式,每个程序需要不同的命令来运行. HyperSQL ...

  4. 123457123456#0#----com.DoraGame.ErTongFanPai97--前拼后广--记忆翻牌-doraX

    com.DoraGame.ErTongFanPai97--前拼后广--记忆翻牌-doraX

  5. 【sqlalchemy】

    https://www.cnblogs.com/ccorz/p/5711955.html

  6. C# sqlsugar依赖引用报错的问题解决

    English Message : You need to refer to MySql.Data.dll↵Chinese Message : 需要引用MySql.Data.dll,请在Nuget安装 ...

  7. 1. Arduino对第三方开发板的支持

    Arduino对第三方开发板也有支持接口,需要手动添加,我们以STM32系列为例,说明添加过程. 目前st的官方提供的一系列板子都支持Arduino,可能是Arduino-IDE更新太慢,目前版本没有 ...

  8. 【面试题】如何删除 ArrayList 中奇数位置的元素？

    如何删除 ArrayList 中奇数位置的元素? 面试题携程 import java.util.ArrayList; import java.util.Iterator; import java.ut ...

  9. [SQL] - 报表查询效率优化

    背景 系统将数据对象JSON序列化后存放到数据库字段中.Report 模块需要获取实时数据对象数值,当前在SQL中进行数值判断的耗时长,效率低. 分析 当前执行效率低主要是程序结构设计的不合理. SQ ...

  10. Keras中图像维度介绍

    报错问题: ValueError: Negative dimension size caused by subtracting 5 from 1 for 'conv2d_1/convolution' ...