DOM 操作技术之动态脚本

原创 2015年07月10日 21:30:55
<pre name="code" class="html"><html>
	<head>
		<title>DOM_操作技术_动态脚本</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript">
			/**
			 param url 需要加载的js的url。
			*/
			function loadScript(url){
				var script = document.createElement("script");
				script.type = "text/javascript";
				script.src = url;
				document.body.appendChild(script);
			}
			
			/**
			 param code 需要执行动态的脚本
			*/
			function dynamicExecuteScript(code){
				var script = document.createElement("script");
				script.type = "text/javascript";
				try{
					script.appendChild(code);
				}catch(ex){
					script.text = code;
				}
				document.body.appendChild(script);
			}
			
			window.onload = function(){
				document.getElementById("loadScript").onclick = function(){
					//外部js加载
					loadScript("http://code.jquery.com/jquery-latest.js");
				}
				
				document.getElementById("button").onclick= function(){
					if(typeof($)=="undefined"){
						alert("请先加载jquery.js文件")
					}else{
						alert("选择器测试$(\"#myList li\").length的结果:"+$("#myList li").length);
					}
				}
				//值得注意的一个问题加载完js后,我怎么知道该文件已经加载完成?
				
				//从逻辑上讲,下面的DOM代码是有效的:
				/*
				var script1 = document.createElement("script");
				script1.type = "text/javascript";
				script1.appendChild(document.createTextNode("(function syaHi(){alert('hi');})();"));
				document.body.appendChild(script1);
				
				在FireFox、Safari、Chrome、Opera中,这些DOM元素可以运行,IE8及之前版本会报错。
			      IE将<script>视为一个特殊的元素,不允许DOM访问其子节点。不过,可以使用<script>
				  的text属性来指定javaScript代码,像下面例子这样:
				*/
				var script2 = document.createElement("script");
				script2.type = "text/javascript";
				script2.text = "(function(){alert('hi');})();"
				document.body.appendChild(script2);
				/*
				经过这样的修改后的代码可以在IE、Firefox、Opera和Safari3以及之后的版本中运行。
				Safari3.0之前的版本虽然不支持text属性,但允许使用文本节点技术来指定代码。如果
				需要兼容更早前版本的Safari,可以使用下列代码:
				*/
				var script3 = document.createElement("script");
				script3.type = "text/javascript";
				var code = "(function sayHi(){alert('hi');})();";
				try{
					script3.appendChild(code);
				}catch(ex){
					script3.text = code;
				}
				document.body.appendChild(script3);
				
				//下面调用的方法是整合的兼容代码
				dynamicExecuteScript("(function(){alert('调用dynamicExecuteScript()');})();");
				
				/*
				以这种方式加载的代码会在全局作用域中执行,而且当脚本执行后将立即可用。实际上
				这样执行的代码与全局作用域中把相同字符串传递给eval()是一样的。
				*/
				
			}
		</script>
	</head>
	<body>
		<div id="myDiv" class="myDiv" title="myDiv" lang="en" dir="rtl" diyAttr="diyAttr">
		</div>
		
		<ul id="myList">
			<li>Item1</li>
			<li>Item2</li>
			<li>Item3</li>
		</ul>
		<button id = "loadScript">
			加载jquery.js
		</button>
		<button id = "button">
			测试jquery库是否可用
		</button>
	</body>
</html>



                
版权声明:本文为博主原创文章,未经博主允许不得转载。

javaScript DOM操作技术

在一般情况下我们操作DOM都比较简单明了,尤其是jquery出来之后,我们会发现操作DOM变得如此简单,但是也会有许多隐藏的坑,所以有时候操作DOM也并非想象中那么简单; 简单而常用的操作: 访问节点...
  • liaodehong
  • liaodehong
  • 2016年06月16日 20:53
  • 1974

DOM操作—动态脚本

因为IE将视为一个特殊的元素,不允许DOM访问其子节点。所以要用text属性来指定javascript代码,下面是兼容IE浏览器的一种动态脚本函数:   function loadScriptStr...
  • qq_35574915
  • qq_35574915
  • 2016年07月21日 18:47
  • 75

Html Dom(动态页面的基础)的基本了解

1、前言 在html中,网页标签是以文档树的结构进行处理的。而html dom(常说的Document Object Model)定义了访问和使用Html的标准方法。因此掌握html dom是必须...
  • qq_25722767
  • qq_25722767
  • 2016年08月19日 10:31
  • 459

console.time 简单分析javascript动态添加Dom节点的性能

console.time 简单分析javascript动态添加Dom节点的性能
  • Monkind
  • Monkind
  • 2014年05月06日 00:11
  • 2246

拿下AJAX(三)——DOM基础及DOM操纵HTML

DOM的概念 DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文...
  • laner0515
  • laner0515
  • 2012年07月26日 16:53
  • 3437

动态插入DOM元素并执行脚本

在 HTML 中脚本以 来标记,通过设置其内容或src属性执行内联脚本或外部脚本。 本文讨论动态地插入脚本标签时浏览器对它的解析、下载和执行行为。 动态插入脚本的场景可能包括使用 AJAX 获取脚本...
  • Daivon_Up
  • Daivon_Up
  • 2017年09月01日 19:40
  • 261

DOM 操作技术之动态样式

DOM_操作技术_动态样式 /** 动态加载外部样式表 param url 外部样式地址 */ function loadStyle(url){ ...
  • only_Love_Strangers
  • only_Love_Strangers
  • 2015年07月11日 17:33
  • 158

Javascript DOM 动态创建,删除DIV例子

最近由于项目需求,要求能够动态创建DIV,而且能够让用户删除某个DIV,注意是从HTML中删除,不是通常的隐藏。代码示例如下:Dynamic Create DOM...
  • jianping_shen
  • jianping_shen
  • 2010年12月31日 10:26
  • 1624

前端性能优化:那些操作会引起DOM操作重排版?

添加或删除可见的 DOM 元素 元素位置改变 元素尺寸改变(因为边距,填充,边框宽度,宽度,高度等属性改变) 内容改变,例如,文本改变或图片被另一个不同尺寸的所替代 浏览器窗口改变尺寸      根据...
  • xuexiaodong2009
  • xuexiaodong2009
  • 2016年08月03日 09:45
  • 1570

JavaScript高级程序设计之DOM之DOM 操作技术之动态脚本第10.2.1讲

10.2 DOM 操作技术 很多时候,DOM 操作都比较简明,因此用JavaScript 生成那些通常原本是用HTML 代码生成的内 容并不麻烦。不过,也有一些时候,操作DOM 并不像表面上看起...
  • Jane617_min
  • Jane617_min
  • 2015年11月03日 16:24
  • 404
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DOM 操作技术之动态脚本
举报原因:
原因补充:

(最多只允许输入30个字)