未分类

JavaScript-DOM基础知识总结（二）

JavaScript

一、动态脚本

动态脚本是指页面加载时不存在，但将来某一时刻通过修改DOM动态添加的脚本。创建动态脚本有以下两种方法：插入外部文件和直接插入JS代码。如下面代码示例，两种方法都需要等到"document.body.appendChild(script);"这句代码执行完之后才会将脚本引入。第二种方法中使用异常处理的目的是要兼容IE浏览器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function loadScript(url) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  document.body.appendChild(script);
}

function loadScriptString(code) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  try {
    script.appendChild(document.createTextNode(code));
  } catch(ex) {
    script.text = code;
  }
  document.body.appendChild(script);
}

loadScript("client.js");
loadScriptString("function haha() { console.log('haha~'); }");

二、动态样式

与动态脚本类似，动态样式是指页面刚加载时不存在的样式，页面加载完成后动态添加到页面的样式。添加动态样式也有两种方式：通过<link>标签引入外部文件和通过<style>标签直接写入CSS代码。下面给出代码示例，大部分与动态脚本的写法类似。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function loadStyle(url) {
  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = url;
  document.getElementsByTagName("head")[0].appendChild(link);
}

function loadStyleString(css) {
  var style = document.createElement("style");
  style.type = "text/css";
  try {
    style.appendChild(document.createTextNode(css));
  } catch(ex) {
    style.styleSheet.cssText = css;
  }
  document.getElementsByTagName("head")[0].appendChild(link);
}

loadStyle("styles.css");
loadStyleString("body {background-color: red}");

三、操作表格

为了方便构建表格，HTML DOM为<table>、<tbody>、<tr>元素添加了一些属性和方法。需要时可以查看一下相关文档，这里不作列举。

四、使用NodeList

NodeList、NamedNodeMap和HTMLCollection这三个集合都是动态的，每当文档结构发生变化，他们就会得到更新。因此，他们始终会保存着最新最准确的信息。如以下代码示例，for循环会一直下去，因为divs.length会不断更新，i永远会小于divs.length。每次访问NodeList都会运行一次基于文档的查询，因此需要尽量减少访问NodeList的次数，减少DOM操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
var divs = document.getElementsByTagName("div");
var div = null;
// 死循环
for (var i = 0; i < divs.length; ++i) {
  div = document.createElement("div");
  document.body.appendChild(div);
}

// 缓存NodeList的信息，不反复访问NodeList
var len = divs.length;
for (var i = 0; i < len; ++i) {
  // ...
}

分享到