JavaScript DOM操作技术

最新推荐文章于 2022-03-25 22:39:27 发布

MaiOvv

最新推荐文章于 2022-03-25 22:39:27 发布

阅读量230

点赞数

分类专栏： JavaScript 文章标签： JavaScript DOM

本文链接：https://blog.csdn.net/weixin_43960657/article/details/89033592

版权

JavaScript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

JavaScript DOM操作技术

一、动态脚本

动态脚本指的是：不是预先写在HTML页面上的，而是在将来某一时刻通过修改DOM动态添加的脚本。

创建动态脚本的两种方式：引入外部src文件或者直接插入JavaScript代码。

1、引入外部文件

<script type="text/javascript" src="file.js">  </script>  //HTML代码

//以下为HTML代码对应的DOM代码,封装在函数中
funciton loadScript(url){
    var script =document.createElement("script"); //创建script节点
    script.type="text/script";          //为元素添加特性
    script.src=url;
    document.body.appendChild(script);    //将元素添加到body中
}

loadScript("file.js");//通过调用此函数来加载JS文件

2、行内方式

以下为在HTML中以行内方式插入js代码

<script type="text/javascript">
    funciton sayHi(){
        alert("Hi!")
      }
</script>

以下为对应的DOM代码：

其中：①首先try给script元素创建文本节点的方式，把代码添加到script元素中去，但是IE不允许DOM访问script的子节点。所以如果是IE浏览器，就会跳到catch，执行catch中的代码。由于IE可以访问script的text属性，所以可通过script.text来指定JS代码。

function loadScriptString(code){        //将代码封装在函数中
    var script = document.createElement("script");  //创建script节点
    script.type = "text/javascript";     //为节点添加特性
    try{
        script.appendChild(document.createTextNode(code));  //①
       }catch(ex){
        script.text = code;        //②
       }
    document.body.appendChild(script);    //将结点添加到body中
}

loadScriptString("function sayHi( ) {alert("Hi!");}");  //对函数的调用

二、动态样式

把CSS样式包含到HTML页面中，而动态样式是在页面加载完成后动态添加到页面中的。

1、通过link链入外部css文档

<link rel="stylesheet" type="text/css" href="styles.css"> //HTMML添加动态样式代码

//以下为通过DOM添加CSS样式
function loadStyles(url){
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    var head = document.getElementByTagName("head");
    head.appendChild("link");
}

loadStyles.(styles.css);    //调用此函数，将CSS样式加载到HTML中

2、通过style元素嵌入CSS样式

以下为在HTML中嵌入CSS的代码，<style>标签对需写在<head>标签对中。

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

以下为上面的嵌入CSS代码所对应的DOM代码：

①首先尝试常规方法，为style添加文本节点来添加样式。②由于IE不允许访问style的子节点，所以使用了try...catch，而IE允许访问元素的styleSheet属性，而这个属性有一个cssText属性，所以在IE中可以通过style.styleSheet.cssText来添加CSS代码。

funciton loadStyleString(css){    //将功能封装到函数中，css参数为样式代码
    var style = createElement("style");    //创建style元素
    style.type = "text/css";    //为style添加特性
    try{
        style.appendChild(document.createTextNode(css));   //①
    }catch(ex){
        style.styleSheet.cssText = css;    //②
    }
    var head = document.getElementByTagName("head")[0];    //获取第一个head
    head.appendChild("style");    //将style添加到head中
}

//以下是调用此函数来为HTML添加CSS样式
loadStyleString("body{color:red;}");

三、操作表格

表格有很多属性，在这不一一例举，以下面的代码为例来解释如何使用这些属性创建表格

var table = document.createElement("table");//创建table元素
table.border = 1;
table.width = 100%;

var tbody = doucument.createElement("tbody");//创建tbody
table.appendChild("tbody");//将tbody加入body中

tbody.insertRow(0);//插入第一行
tbody.rows[0].insertCell(0);//插入第一行第一列
tbody.rows[0].cells[0].appendChild("document.createElementTextNode("DATA1")");//为第一行第一列加入数据

document.body.appendChild(table);//把table添加到body中