zoukankan      html  css  js  c++  java

  • Javascript之DOM操作技术

    1.动态脚本
    当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的JS 脚本而降低了整站的性能，所以就出现了动态脚本的概念，在适时的时候加载相应的脚本。
    比如：我们想在需要检测浏览器的时候，再引入检测文件。
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var flag = true; //设置true 再加载
    if (flag) {
        loadScript('browserdetect.js'); //设置加载的js
    }
    function loadScript(url) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        //document.head.appendChild(script); //document.head 表示<head>
        document.getElementsByTagName('head')[0].appendChild(script);
    }
     PS：document.head 调用，IE 不支持，会报错！
     
    1
    2
    3
    4
    5
    6
    //动态执行js
    var script = document.createElement('script');
    script.type = 'text/javascript';
    var text = document.createTextNode("alert('Lee')"); //IE 浏览器报错
    script.appendChild(text);
    document.getElementsByTagName('head')[0].appendChild(script);
     PS：IE 浏览器认为script 是特殊元素，不能在访问子节点。为了兼容，可以使用text属性来代替。
     
    script.text = "alert('')"; //IE 可以支持了。
    PS：当然，如果不支持text，那么就可以针对不同的浏览器特性来使用不同的方法。这里就忽略写法了。
     
    2.动态样式
    为了动态的加载样式表，比如切换网站皮肤。样式表有两种方式进行加载，一种是<link>标签，一种是<style>标签。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    //动态执行link
    var flag = true;
    if (flag) {
        loadStyles('basic.css');
    }
    function loadStyles(url) {
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = url;
        document.getElementsByTagName('head')[0].appendChild(link);
    }
    //动态执行style
    var flag = true;
    if (flag) {
        var style = document.createElement('style');
        style.type = 'text/css';
        //var box= document.createTextNode('#box{background:red}'); IE 不支持
        //style.appendChild(box);
        document.getElementsByTagName('head')[0].appendChild(style);
        insertRule(document.styleSheets[0], '#box', 'background:red', 0);
    }
    function insertRule(sheet, selectorText, cssText, position) {
        //如果是非IE
        if (sheet.insertRule) {
            sheet.insertRule(selectorText + "{" + cssText + "}", position);
        //如果是IE
        } else if (sheet.addRule) {
            sheet.addRule(selectorText, cssText, position);
        }
    }

    3.操作表格

    <table>标签是HTML 中结构最为复杂的一个，我们可以通过DOM 来创建生成它，或者HTML DOM 来操作它。(PS：HTML DOM 提供了更加方便快捷的方式来操作HTML，有手册)。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    //需要操作的table,ps:一个表格里只能有一个caption、thead、tfoot，而tbody可以有多个
    <table border="1" width="300">
      <caption>人员表</caption>
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td>20</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>女</td>
          <td>22</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">合计：N</td>
        </tr>
      </tfoot>
    </table>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    //使用DOM 来创建这个表格
    var table = document.createElement('table');
    table.border = 1;
    table.width = 300;
    document.body.appendChild(table);
      
    var caption = document.createElement('caption');
    table.appendChild(caption);
    caption.appendChild(document.createTextNode('人员表'));
      
    var thead = document.createElement('thead');
    table.appendChild(thead);
      
    var tr = document.createElement('tr');
    thead.appendChild(tr);
      
    var th1 = document.createElement('th');
    tr.appendChild(th1);
    th1.appendChild(document.createTextNode('姓名'));
      
    var th2 = document.createElement('th');
    tr.appendChild(th2);
    th2.appendChild(document.createTextNode('年龄'));
      
    var th3 = document.createElement('th');
    ...

    PS：使用DOM 来创建表格其实已经没有什么难度，就是有点儿小烦而已。下面我们再使用HTML DOM 来获取和创建这个相同的表格。

    HTML DOM 中，给这些元素标签提供了一些属性和方法
    属性或方法        说明
    caption             保存着<caption>元素的引用
    tBodies             保存着<tbody>元素的HTMLCollection 集合
    tFoot                保存着对<tfoot>元素的引用
    tHead              保存着对<thead>元素的引用
    rows                 保存着对<tr> 元素的HTMLCollection 集合
    createTHead()     创建<thead>元素，并返回引用
    createTFoot()     创建<tfoot>元素，并返回引用
    createCaption()   创建<caption>元素，并返回引用
    deleteTHead()     删除<thead>元素
    deleteTFoot()     删除<tfoot>元素
    deleteCaption()   删除<caption>元素
    deleteRow(pos)    删除指定的行
    insertRow(pos)    向rows 集合中的指定位置插入一行

    <tbody>元素添加的属性和方法
    属性或方法        说明
    rows              保存着<tbody>元素中行的HTMLCollection
    deleteRow(pos)    删除指定位置的行
    insertRow(pos)    向rows 集合中的指定位置插入一行，并返回引用

    <tr>元素添加的属性和方法
    属性或方法        说明
    cells             保存着<tr>元素中单元格的HTMLCollection
    deleteCell(pos)   删除指定位置的单元格

    insertCell(pos)   向cells 集合的指定位置插入一个单元格，并返回引用
    PS：因为表格较为繁杂，层次也多，在使用之前所学习的DOM 只是来获取某个元素会非常难受，所以使用HTML DOM 会清晰很多。

    1
    2
    3
    4
    5
    //使用HTML DOM 来获取表格元素
    var table = document.getElementsByTagName('table')[0]; //获取table 引用
      
    //按照之前的DOM 节点方法获取<caption>
    alert(table.children[0].innerHTML); //获取caption 的内容

    PS：这里使用了children[0]本身就忽略了空白，如果使用firstChild 或者childNodes[0]需要更多的代码。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //按HTML DOM 来获取表格的<caption>
    alert(table.caption.innerHTML); //获取caption 的内容
      
    //按HTML DOM 来获取表头表尾<thead>、<tfoot>
    alert(table.tHead); //获取表头
    alert(table.tFoot); //获取表尾
      
    //按HTML DOM 来获取表体<tbody>
    alert(table.tBodies); //获取表体的集合

    PS：在一个表格中<thead>和<tfoot>是唯一的，只能有一个。而<tbody>不是唯一的可以有多个，这样导致最后返回的<thead>和<tfoot>是元素引用，而<tbody>返回的是元素集合。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    //按HTML DOM 来获取表格的行数
    alert(table.rows.length); //获取行数的集合，数量
      
    //按HTML DOM 来获取表格主体里的行数
    alert(table.tBodies[0].rows.length); //获取主体的行数的集合，数量
      
    //按HTML DOM 来获取表格主体内第一行的单元格数量(tr)
    alert(table.tBodies[0].rows[0].cells.length); //获取第一行单元格的数量
      
    //按HTML DOM 来获取表格主体内第一行第一个单元格的内容(td)
    alert(table.tBodies[0].rows[0].cells[0].innerHTML); //获取第一行第一个单元格的内容
      
    //按HTML DOM 来删除标题、表头、表尾、行、单元格
    table.deleteCaption(); //删除标题
    table.deleteTHead(); //删除<thead>
    table.tBodies[0].deleteRow(0); //删除<tr>一行
    table.tBodies[0].rows[0].deleteCell(0); //删除<td>一个单元格
      
    //按HTML DOM 创建一个表格
    var table = document.createElement('table');
    table.border = 1;
    table.width = 300;
      
    table.createCaption().innerHTML = '人员表';
      
    var thead = table.createTHead();
    var tr = thead.insertRow(0);
      
    var td = tr.insertCell(0);
    td.appendChild(document.createTextNode('数据'));
      
    var td2 = tr.insertCell(1);
    td2.appendChild(document.createTextNode('数据2'));
      
    document.body.appendChild(table);

    PS：在创建表格的时候<table>、<tbody>、<th>没有特定的方法，需要使用document来创建。也可以模拟已有的方法编写特定的函数即可，例如：insertTH()之类的。
  • 相关阅读:
    对话框隐藏的简单实现(转)
    CoInitializeSecurity 学习（转）
    VC++实现CD/DVD刻录(转)
    网络连接的保活机制(心跳机制转)
    tcp架构
    木马的隐藏及其启动方式 (转)
    vs2005 控件bug
    vs2005 虚拟调试配置（转）
    sprintf用法(转)
    要掌握真正的免杀必须懂汇编【汇编语言超浓缩教程】(转)
  • 原文地址：https://www.cnblogs.com/zxj159/p/3123633.html
Copyright © 2011-2022 走看看