这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了基于 JavaScript 创建动态 Dom 的相关资料, 需要的朋友可以参考下
动态脚本
我们在页面中使用 <script> 元素就可以向页面中插入 javascript 代码。有两种方式:一种是通过 src 属性引用外部的 JS 文件,一种是用这个元素来包含一段 js 代码。所谓的动态脚本,就是指这个脚本在页面加载时不存在,在将来的某一个时刻通过修改 DOM 来动态的添加脚本。与操作 html 元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入 JavaScript 代码。
动态加载的外部 JavaScript 代码可以立刻被执行,例如下面的代码:
- var script = document.createElement("script");
- script.type = "text/javascript";
- script.src = "demo.js";
- document.body.appendChild(script);
从上图的结果中可以看到,上面代码在 <body> 元素中生成了一个 <script> 节点:
- <script type="text/javascript" src="demo.js">
- </script>
需要注意的是,在执行最后一行代码把 <script> 添加到页面之前,是不会下载外部脚本文件的。
另一种指定 JavaScript 代码的方式是行内方式,例如:
- var script = document.createElement("script");
- script.type = "text/javascript";
- script.appendChild(document.createTextNode("function fn1(){alert('hello wolrd!')} fn1();"));
- document.body.appendChild(script);
上面的代码会在 <body> 元素中插入一段 JavaScript 代码:
- <script type="text/javascript">
- function fn1() {
- alert('hello wolrd!')
- }
- fn1();
- </script>
执行上面的代码后会弹出提示框,显示 "hello world!" 文本。
在 Firefox、Safari、Chrome 和 Opera 浏览器中,上面操作的 DOM 代码是可以正常执行的。但是在旧版本的 IE 浏览器中,这些代码会发生错误。旧版本的 IE 浏览器将 <script> 元素看做特殊元素,不允许 DOM 访问它的子节点。不过,可以使用 <script> 元素的 text 属性来指定 JavaScript 代码,例如:
- var script = document.createElement("script");
- script.type = "text/javascript";
- script.text("function fn1(){alert('hello wolrd!')} fn1();");
- document.body.appendChild(script);
像上面这样修改代码之后,在 IE、Firefox、Safari3.0、Chrome 和 Opera 浏览器中都可以运行。Safari3.0 之前的浏览器虽然不能正确的执行 text 属性,但是可以使用文本节点来指定代码。所以如果需要支持旧版本的浏览器,可以像下面这样书写代码:
- var script = document.createElement("script");
- script.type = "text/javascript";
- var code = "function fn1(){alert('hello wolrd!')} fn1();";
- try{
- script.appendChild(document.createTextNode(code));
- }catch(e){
- script.text = code;
- }
上面的代码首先尝试标准的 DOM 文本节点方法,因为除了旧版本的 IE 浏览器之外,其它浏览器都支持这种方式。如果这行代码抛出异常,那么说明是旧版本的 IE 浏览器,那就必须使用 text 属性。
我们可以将动态添加脚本的代码封装到一个函数中,通过不同的参数来动态加载不同的脚本。
- function loadScript(code){
- var script = document.createElement("script");
- script.type = "text/javascript";
- try{
- script.appendChild(document.createTextNode(code));
- }catch(e){
- script.text = code;
- }
- document.body.appendChild(script);
- }
要调用这个函数,可以像下面的样子:
- loadScript("function fn1(){alert('hello wolrd!')}");
这种方式加载的代码会在全局作用域中执行,而且当脚本执行后立刻可用。实际上,这样执行代码与在全局作用域中把相同的字符串传递给 eval() 函数是一样的。
动态样式
通常可以将 CSS 样式包含到 HTML 页面中的元素有两个:一个是 <link> 元素,用于包含来自外部的文件;另一个是 <style> 元素,用于指定嵌入样式。与动态脚本类似,动态样式是指在页面加载时并不存在的样式。动态样式是在页面加载完成后动态添加到页面中的脚本。例如下面的例子:
- var link = document.createElement("link");
- link.rel = "stylesheet"
- link.type = "text/css";
- link.href = "styles.css";
- var head = document.getElementsByTagName("head")[0];
以上的代码在所有主流的浏览器中都可以正常运行。需要注意的是 <link> 元素要添加到 <head> 元素中,而不是 <body> 元素中,才能保证在所有浏览器中的行为一致。
另外要注意的是,加载外部样式文件的过程是异步的,也就是说加载样式和执行 JavaScript 代码的过程没有固定的次序。
另外一种定义样式的方式是使用 <style> 元素来包含嵌入式的 CSS 样式。例如下面的代码:
- var style = document.createElement("style");
- style.type = "text/css";
- style.appendChild(document.createTextNode("body{background:#f00;}"));
- var head = document.getElementsByTagName("head")[0];
- head.appendChild(link);
上面的代码执行后可以在 <head> 元素中动态添加下面的节点:
- <style type="text/css">
- background:#f00;
- </style>
以上的代码可以在 Firefox、Safari、Chrome 和 Opera 浏览器中正常运行,在旧版本的 IE 浏览器中会报错。旧版本的 IE 浏览器会将 <style> 元素看做一个特殊的节点,不允许访问它的子节点。要解决旧版本 IE 的问题,就是访问元素的 styleSheet 属性,该属性又有一个 cssText 属性,可以接受 CSS 代码。例如下面的代码:
- var style = document.createElement("style");
- style.type = "text/css";
- try{
- style.appendChild(document.createTextNode("body{background:#f00;}"));
- }catch(e){
- style.styleSheet.cssText = "body{background:#f00;}";
- }
同样,我们也可以将动态添加样式的代码封装到一个函数中,通过不同的参数来动态加载不同的样式。
- function loadStyle(code){
- var style = document.createElement("style");
- style.type = "text/css";
- try{
- style.appendChild(document.createTextNode(code));
- }catch(e){
- style.styleSheet.cssText = code;
- }
- var head = document.getElementsByTagName("head")[0];
- head.appendChild(style);
- }
JavaScript 对表格的操作
在 JavaScript 中,为了使我们能够方便的构建表格,HTML DOM 为表格的 <table>、<tbody> 和 <tr> 提供了一些属性和方法。
表格的 <table> 元素的属性和方法有:
caption:保存元素的引用的指针。 tBodies:是一个元素的 HTMLCollection。 tFoot:保存元素的引用的指针。 tHead:保存元素的引用的指针。 rows:是表格中所有行的 HTMLCollection。 createTHead():创建元素,将它放入表格中,并返回其引用。 createTFoot():创建元素,将它放入表格中,并返回其引用。 createCaption():创建元素,将它放入表格中,并返回其引用。 deleteTHead():删除元素。 deleteTFoot():删除元素 deleteCaption():删除元素 deleteRow(pos):删除指定位置的表格行。 insertRow(pos):向 rows 集合中指定位置插入一行。
表格的 <tbody> 元素的属性和方法有:
rows:保存着元素中行的 HTMLCollection。 deleteRow(pos):删除指定位置的表格行。 insertRow(pos):向 rows 集合中指定位置插入一行。
表格的 <tr> 元素的属性和方法有:
cells:保存着元素中单元格的 HTMLCollection。 deleteCell(pos):删除指定位置的单元格。 insertCell(pos):向 cells 集合中指定位置插入一个单元格,并返回新插入单元格的引用。
使用上面的这些属性和方法,可以使我们轻松的使用 JavaScript 来创建表格,例如下面的代码:
- //创建表格
- vatabldocument.createElement("table");
- table.borde1;
- table.widt"100%";
- //创建tbody
- vatboddocument.createElement("tbody");
- table.appendChild(tbody);
- //创建第一个表格行
- tbody.insertRow(0);
- tbody.rows[0].insertCell(0);
- tbody.rows[0].cells[0].appendChild(document.createTextNode("单元1-1"));
- tbody.rows[0].insertCell(1);
- tbody.rows[0].cells[1].appendChild(document.createTextNode("单元2-1"));
- //创建第二个表格行
- tbody.insertRow(1);
- tbody.rows[1].insertCell(0);
- tbody.rows[1].cells[0].appendChild(document.createTextNode("单元1-2"));
- tbody.rows[1].insertCell(1);
- tbody.rows[1].cells[1].appendChild(document.createTextNode("单元2-2"));
- //将表格添加到文档中
- document.body.appendChild(table)
使用上面的代码可以动态的在页面中创建一个表格。其中在创建表格行的时候,通过 <tbody> 元素调用了 insertCell() 方法,并传入参数 0(表示将插入的行放在什么位置上)。执行了这一行代码后,会自动创建一个表格行,并将它插入到 < tbody> 元素的 0 位置上,此时就可以通过 tbody.rows[0] 来引用新插入的行。
创建单元格的方式也与创建表格行的方式相同。通过 <tr> 元素来调用 insertCell() 方法,并传入要放置单元格的位置。然后就可以通过 tbody.rows[0].cells[0] 来引用新插入的单元格。
关于 NodeList
理解 NodeList 和 NamedNodeMap、HTMLCollection 是从整体上理解 DOM 的关键所在。这 3 个集合都是动态的,也就是说,每当文档结构发生了变化,它们始终都会保存最新的信息。从本质上来说,所有的 NodeList 对象都是在访问 DOM 文档时实时运行的查询。例如下面的代码会导致死循环的出现:
- var divs = document.getElementsByTagName("div");
- for(var i = 0; i < divs.length; i++){
- var div = document.createElement("div");
- document.body.appendChild(div);
- }
上面的代码首先获取了所有 <div> 元素的 HTMLCollection,保存在一个变量中。由于这个集合是动态的,所以只要有新的 <div> 被添加到页面中,新的 <div> 元素就会被添加到这个集合中。这样导致的后果是 div.length 值是不断变化的,每次循环会在页面中添加一个 <div> 元素,length 的值也会递增。这样 i < divs.length 条件就永远不会成立,导致死循环的发生。
如果我们要迭代一个 NodeList,最好将 length 属性初始化为第二个变量,然后将迭代器和这个变量做比较,例如:
- var divs = document.getElementsByTagName("div");
- for (var i = 0,
- len = divs.length; i < len; i++) {
- var div = document.createElement("div");
- document.body.appendChild(div);
- }
由于 len 中保存了 divs.length 在循环开始时的一个快照,因此会避免死循环情况的发生。
更多示例:
- function sAlert(str) {
- var msgw, msgh, bordercolor;
- msgw = 400; //提示窗口的宽度
- msgh = 100; //提示窗口的高度
- titleheight = 25 //提示窗口标题高度
- bordercolor = "#c51100"; //提示窗口的边框颜色
- titlecolor = "#c51100"; //提示窗口的标题颜色
- var sWidth, sHeight;
- sWidth = screen.width;
- sHeight = screen.height;
- var bgObj = document.createElement("div");
- bgObj.setAttribute('id', 'bgDiv');
- bgObj.style.position = "absolute";
- bgObj.style.top = "0";
- bgObj.style.background = "#cccccc";
- bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
- bgObj.style.opacity = "0.6";
- bgObj.style.left = "0";
- bgObj.style.width = sWidth + "px";
- bgObj.style.height = sHeight + "px";
- bgObj.style.zIndex = "10000";
- document.body.appendChild(bgObj);
- var msgObj = document.createElement("div") msgObj.setAttribute("id", "msgDiv");
- msgObj.setAttribute("align", "center");
- msgObj.style.background = "white";
- msgObj.style.border = "1px solid " + bordercolor;
- msgObj.style.position = "absolute";
- msgObj.style.left = "50%";
- msgObj.style.top = "50%";
- msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
- msgObj.style.marginLeft = "-225px";
- msgObj.style.marginTop = -75 + document.documentElement.scrollTop + "px";
- msgObj.style.width = msgw + "px";
- msgObj.style.height = msgh + "px";
- msgObj.style.textAlign = "center";
- msgObj.style.lineHeight = "25px";
- msgObj.style.zIndex = "10001";
- msgObj.style.position = "absolute";
- var box = document.getElementById(str);
- var title = document.createElement("h4");
- title.setAttribute("id", "msgTitle");
- title.setAttribute("align", "right");
- title.style.margin = "0";
- title.style.padding = "3px";
- title.style.background = bordercolor;
- title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
- title.style.opacity = "0.75";
- title.style.border = "1px solid " + bordercolor;
- title.style.height = "18px";
- title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
- title.style.color = "white";
- title.style.cursor = "pointer";
- title.onmousedown = function() {
- startDrag(this, 'msgDiv')
- };
- title.onmouseup = function() {
- stopDrag(this, 'msgDiv')
- };
- title.onmousemove = function() {
- drag('msgDiv')
- };
- var closer = document.createElement("div");
- closer.onclick = function() {
- CloseReturn();
- document.body.appendChild(box);
- box.style.display = "none";
- document.body.removeChild(bgObj);
- document.getElementById("msgDiv").removeChild(title);
- document.body.removeChild(msgObj);
- };
- closer.innerHTML = "确定";
- document.body.appendChild(msgObj);
- document.getElementById("msgDiv").appendChild(title);
- document.getElementById("msgTitle").appendChild(closer);
- box.style.display = "inline";
- document.getElementById("msgDiv").appendChild(box);
- ShowReturn();
- }
html dom 树:
来源: http://www.phperz.com/article/17/0415/268237.html