JavaScript学习-DOM操作技术

1，动态脚本

• 创建动态脚本也有两种方式

  • 插入外部文件

    • 代码示例，也可以把这个脚本文件添加到head元素中

    function loadScript(url){
        var script = document.createElement("script");
        script.type = "text.javascript";
        script.src = url;
        document.body.appendChild(script);
    }

  • 直接插入JavaScript代码

    • 如要添加的HTML示例

    <script type="text/javascript">
        function sayHi(){
            alert("hi");
        }
    </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);
    }

2，动态样式

• 介绍
  
  • \<\link>元素用于包含来自外部的文件，\<\style>元素用于指定嵌入的样式。

• 使用\<\link>动态添加

  • 要动态添加的元素如下：

  <link rel="stylesheet" type="text/css" href="styles.css">

  • 脚本代码如下

  function loadStyles(url){
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.type = "text/css";
      link.href = url;
      var head = document.getElementsByTagName("head")[0];
      head.appendChild(link);
  }

• 使用\<\style>

  • 元素包含嵌入的CSS，如下

  <style type="text/css">
  body{
      background-color:red;
  }
  </style>

  • 脚本代码如下

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

3，操作表格

• 为了方便构建表格，HTML DOM为table>、tbody、tr元素添加了一些属性和方法如下
  
  • 为table元素添加的属性和方法如下
    
  • 为tbody元素添加的属性和方法如下
    
  • 为tr元素添加的属性和方法如下