dom操作技术----动态脚本

author author     2022-09-03     680

关键词:

创建动态脚本有两种方式:插入外部文件和直接插入JavaScript代码

方式一:插入外部文件

<script type="text/javascript" src="client.js" ></script>

创建此节点的DOM代码等同于:

var script = documen.createElement("script");

script.type="text/javascript";

script.src="clent.js";

document.body.appendChild(script);

在执行最后一行代码把<script>元素添加到页面之前,是不会加载外部文件的。

整个过程可以用以下函数封装:

function loadScript(url){

   var script = documen.createElement("script");

   script.type = "text/javascript";

   script.src=url;

  document.body.appendChild(script);

}

可惜有个问题:没有标准方式探知脚本是否加载完成。

方式二:指定JavaScript代码的方式为行内式;

<script type="text/javascript">

   function sayHi(){

      alert("hi");

  }

</script>

逻辑上讲,下面的DOM代码是有效的:

var script = documen.createElement("script");

script.type="text/javascript";

script.appendChild(document.createTextNode(“function sayHi(){alert(“hi”);}”));

document.body.appendChild(script);

但是在IE中会导致错误,IE会将<script>视为一个特殊的元素,不允许DOM访问其子节点;但是,可以用<script>元素的text属性来指定JavaScript代码。

var script = documen.createElement("script");

script.type="text/javascript";

script.text=“function sayHi(){alert(“hi”);}”;

document.body.appendChild(script);

但是以上代码在Safari3.0之前的版本不能支持text属性,但是可以用文本节点技术指定代码。

var script = documen.createElement("script");

script.type="text/javascript";

script.code=“function sayHi(){alert(“hi”);}”;

try{

    script.appendChild(document.createTextNode(“code”));

}catch(ex){

   script.text = "code";

}

document.body.appendChild(script);

总之,首先尝试标准的DOM文本节点方法,因为除IE会抛出错误,所有的浏览器都支持这种方式。如果这行代码抛出了错误,南无说明是IE,于是就必须使用text属性了。整个过程可以封装一个函数如下:

function loadScriptString(code){

    var script = documen.createElement("script");

    script.type="text/javascript";

  try{

    script.appendChild(document.createTextNode(“code”));

   }catch(ex){

   script.text = "code";

   }

   document.body.appendChild(script);

}

dom操作技术

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>动态脚本动态样式操作表格使用NodeList</title> </head> <body> </body> <script> /*动态脚本 varscri 查看详情

js高程3:dom-dom操作技术

动态脚本加载外部脚本方式一,直接写代码:varscript=document.createElement("script");script.type="text/javascript";script.src="js/test.js";document.body.appendChild(script); 方式二,封装成函数:functioncreateScript(url){ varscr 查看详情

jquery操作dom

...基于该技术,通过该技术我们可以很方便的访问、检索、操作文档中的任何一个元素。因此,学号javascri 查看详情

动态脚本

...存在,但将来的某一时刻通过修改DOM动态添加的脚本。和操作HTML元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入内部javascript代码。下面将详细介绍这两种情况 外部脚本//script.js里面的内容box.style.color="red";v... 查看详情

js笔记—03(dom编程)

...。例如:ajax(不是新技术,是几个技术的合体js+http后台操作)就是这样的原理2.js对象(浏览器对象、脚本对象、HTML对象)3.添加文本方法 a.第一种创建文本节点 创建元素节点:createElement() 创建文本节点:createTextNode()... 查看详情

dom官方定义

...M,可以使程序或者脚本(JS或ASJScript),动态的访问或者操作文档的内容、结构、样式。DOM只是一个标准,操作网页的标准。而这个标准(模型)在浏览器中,以“对象”的方式实现。DOM的分类:核心DOM、HTMLDOM、XMLDOM、EventDOM、... 查看详情

有关dom的一些操作

   学习前端的都会了解到一些Dom操作,让我们来看看Dom操作有哪些吧!      DOM(即DocumentObjectMode)是W3C(万维网联盟)的标准。   DOM定义了访问HTML和XML文档的标准:“W3C 文档对象模型 (DOM)是中立于平... 查看详情

dom对象

...得以实现。DOM的官方定义:DOM可以使脚本,动态的访问或操作,网页的内容、网页外观、网页结构。DOM的分 查看详情

jsdom操作

DOM——文档对象模型(DocumentObjectModel)是表示和处理一个HTML或XML文档的常用方法。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。DOM的设计是以对象管理组织(OMG)... 查看详情

dom介绍html中的domxml中的dom

...脚本动态地访问和更新文档的内容。为什么要使用DOM?Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强。HTML的DOMHTML的DOM是一个... 查看详情

javascript操作dom(动态表格处理)

<html> <title>动态处理表格数据</title><head> <scripttype="text/javascript">functionclearForm(){document.getElementById("deptno").value="";document.getElementById("dname").value=" 查看详情

js中的dom操作——查看及设置节点

...的平台和语言中立的接口。在HTML和JavaScript的学习中,DOM操作可谓时重中之重。今天,小编就领着大家来看看DOM操作是个什么样子!!二、DOM节点 DOM节点分为三大类:元素节点、属性 查看详情

dom技术

...本,属性)都封装成对象。封装成对象的目的是为了方便操作这些文档和文档中的内容,方便动态(增删改查)。文档:标记型文档对象:封装了属性和行为的实例模型:所有标记型文档都具备的一些共性特征 查看详情

深入理解脚本化css系列第五篇——动态样式

前面的话  很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦。但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比如动态样式就相对较复杂 ... 查看详情

javascript跨平台客户端脚本语言

...BOM是浏览器的一种特性,它可以对浏览器窗口进行访问和操作,例如移动、关闭窗口,调整窗口的大小,支持cookie等。BOM编程可以实现动态控制浏览器本身行为的效果JS特点1.脚本语言脚本语言是 查看详情

javascript跨平台客户端脚本语言

...BOM是浏览器的一种特性,它可以对浏览器窗口进行访问和操作,例如移动、关闭窗口,调整窗口的大小,支持cookie等。BOM编程可以实现动态控制浏览器本身行为的效果JS特点1.脚本语言脚本语言是 查看详情

高效的 DOM 选择技术 - 按属性选择会变慢吗?

...的那个脚本中$(\'input[placeholder]\').each(function()选择所有要操作的元素。我想知 查看详情

dom

...avascript2、BOM与DOM1、BOMBrowserObjectModel浏览器对象模型 直接操作和访问浏览器窗口的,比如:历史记录、地址栏信息、状态栏信息。能够让Javascript与浏览器产生交互行为。 BOM没有相关的标准的,但所有的浏览器都支持。2、DOMDocume... 查看详情