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元素添加的属性和方法如下