DOM操作技术

2019, May 29 mannuan One min read

DOM操作最大的两个麻烦就是：操作效率问题、浏览器兼容问题

动态脚本

通过修改DOM动态添加的脚本的两种模式：插入外部文件，插入JavaScript代码
插入外部文件

var script = document.createElement('script');
script.src = 'client.js';
document.body.appendChild(script);

封装为外部脚本插入函数

fucntion loadScript(url){
var script = document.createElement('script');
script.src = url;

document.body.appendChild(script);
}
    
loadScript('script.js');

插入行内代码：不兼容IE,它将<script>视为一个特殊的元素，不允许DOM访问其子节点： ```javascript
var script = document.createElement(‘script’); var textNode = document.createTextNode(‘function sayHi(){alert(\‘Hi!\‘)}’); script.appendChild(textNode);

document.body.appendChild(script);


  3. 插入行内代码的兼容性解决方案：行内脚本插入封装函数

```javascript    
function loadScript(code){
var script = document.createElement('script');

try{
    script.appendChild(document.createTextNode(code));
}catch(err){
    script.text = code;
}

document.body.appendChild(script);
}

loadScript(' function sayHi(){alert("Hi!")}');

以上两种模式加载的脚本代码会立刻执行；
虽然可以，但是不推荐使用eval()来执行字符串代码；

动态样式

通过DOM动态添加样式的两种模式：<link>引入外部样式；<style>嵌入样式；
插入外部样式文件封装函数：

function loadStyles(url){
var head = document.getElementByTagName('head')[0];
var link = document.createElement('link');
link.el = 'stylesheet';
link.href = url;
head.appendChild(link);
}

loadStyles('styles.css');

插入行内样式的兼容性解决方案：行内样式插入封装函数

function loadInlineStyle(css){
var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');

try{
    style.appendChild(document.createTextNode(css));
}catch(){
    style.styleSheet.cssText = css
}

head.appendChild(style);
}

loadInlineStyle('body{background-color: red;}');

IE将<style>视为一个特殊元素的，与<script>类似的节点，所以需要写入内联的样式代码，需要使用IE下的style节点的特征属性：style.styleSheet.cssText。

操作表格

HTML DOM为了方便操作表格，为<table>, <tbody>, <tr>元素添加了特殊的属性和方法；
<table>, <tbody>, <tr>元素的属性和方法

使用NodeList

理解并区别三个概念：NodeList, NamedNodeMap, HTMLCollection;

上面三个集合都是动态的，所有以上集合都是在访问DOM文档时实时运行的查询；
动态性实例：每一次访问的都是更新后的集合

<!DOCTYPE html>
<html>
<body>
</body>
<script>
    var divs = document.getElementsByTagName('div'),
        i,
        div;
    
    for(var i=0; i<divs.length; i++){
        div = document.createElement('div');
        document.body.appendChild(div);
    }

    // 页面挂掉了
</script>
</html>

最佳实践：防止出现上面的情况的解决方案是，将NodeList的length缓存到一个变量中：

<!DOCTYPE html>
<html>
<body>
</body>
<script>
    var divs = document.getElementsByTagName('div'),
        i,
        len,
        div;
    
    for(var i=0, len = divs.length; i<len; i++){
        div = document.createElement('div');
        document.body.appendChild(div);
    }

    // 页面挂掉了
</script>
</html>

最佳实践：减少访问NodeList的次数，每次访问都会重新查询一次。