JavaScript DOM——“DOM操作技术”的注意要点

  • A+
所属分类:JavaScript

 

动态脚本

插入外部脚本文件

以script元素为例:

使用DOM动态的创建出这个元素:

行内方式插入脚本文件

以行内脚本代码为例:

使用DOM动态的创建出这个元素:

但在IE中会报错,解决办法是使用script元素的text属性:

最终通用的解决方案如下:

实际上在全局作用域中把相同的字符串传递给eval()是一样的。

动态样式

link元素包含来自外部的文件

以link元素为例:

使用DOM动态的创建出这个元素:

style元素来指定嵌入的样式

以嵌入样式为例:

使用DOM动态的创建出这个元素:

但在IE中会报错,解决办法是访问元素的styleSheet属性的cssText属性:

最终通用的解决方案如下:

操作表格

HTML表格为例:

传统上需要如下大量的DOM代码:

为了方便构建表格,HTML DOM 还为table元素、tbody元素和tr元素添加了一些属性和方法。如

为table元素添加的属性和方法如下:

  1. caption:caption元素的指针(如果有);
  2. tBodies:tbody元素的HTMLCollection;
  3. tFoot:tfoot元素的指针(如果有);
  4. tHead:thead元素的指针(如果有);
  5. rows:一个表格中所有行的HTMLCollection;
  6. createTHead():创建thead元素并将其放入表格中,返回引用;
  7. createTFoot():创建tfoot元素并将其放入表格中,返回引用;
  8. createCaption():创建caption元素并将其放入表格中,返回引用;
  9. deleteTHead():删除thead元素;
  10. deleteTFoot():删除tfoot元素;
  11. deleteCaption():删除caption元素;
  12. deleteRow(pos):删除指定位置的行;
  13. insertRow(pos):插入一行到rows集合中;

为tbody元素添加的属性和方法如下:

  1. deleteRow(pos):删除指定位置的行;
  2. insertRow(pos):插入一行到指定位置的rows集合中;

为tr元素添加的属性和方法如下:

  1. cells:tr元素中单元格的HTMLCollection;
  2. deleteCell(pos):删除指定位置的单元格;
  3. insertCell(pos):插入一个单元格到cells集合中;

使用这些方法和属性可以极大的减少创建表格所需的代码数量,返回对心插入单元格的引入;前面的代码重写如下:

使用NodeList

需要理解NodeList以及NamedNodeMap和HTMLCollection;这三个集合都是“动态的”;每当文档结构发生变化时,他们都会得到更新。

在遍历NodeList的时候很容易犯这样的错误:

这是一个无限循环,因为divs是动态的实时更新的。

应该把length属性初始化第二个变量:

应该尽量减少访问NodeList的次数;因为每次访问NodeList都会运行依次基于文档的查询;所以应该考虑将从NodeList中提取出的值缓存起来。

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: