DOM编程艺术学习笔记

标签：

//创建新的浏览器窗口

window.open(url,name,features)  


//下面这个函数是window.open()方法的一种典型应用
function popUp(winURL){
        windows.open("winURL","popup","width=320,height=480");
    }
    

// java伪协议让我们通过一个链接来调用JavaScript函数。
//下面是通过“javascript:”伪协议调用popUp()函数的具体做法：

<a href = "javascript:popUp(‘http://www.example.com/‘);">Example</a>

// 总之，在HTML文档中通过"javascript:"伪协议调用JavaScript代码的做法非常不好

<a href = "javascript:popUp(‘http://www.example.com/‘); return false">Example</a>

//这个技巧与“javascript：”伪协议调用JavaScript代码的做法同样糟糕，因为它们都不能平稳退化。如果用户禁用了溜啦你的JavaScript功能，这样的链接将毫无用处。

//为其中的JavaScript代码预留退路很简单：在链接里里把href属性设置为真是存在的URL地址，让其成为一个有效链接，如下所示：

<a href = "http://www.example.com/" onclick = "popUp(‘http://www.example.com‘); return false;">Example</a>

//也可以用this和getAttribute()方法提取出href属性的值，如下所示：

<a href = "http://www.example.com/" onclick = "popUp(this.getAttribute(‘href‘)); teturn false;">Example</a>

//也可以用DOM提供的this.href属性：<a  href = "http://www,example.com/" onclick = "popUp(this.href); return false;">Example</a>

5.4 分离 JavaScript

//如果想把一个事件添加到某个带有特定id属性的元素上，用getElementById就可以解决问题：

getElementById(id).event = action

//如果涉及多个元素，用getElementsByTagName和getAttribute把时间添加到有着特定属性的一组元素上。具体步骤如下所示：

(1)把文档里所有的链接全放入一个数组里。

(2)遍历数组。

(3)如果某个链接的class属性等于popup，就表示这个链接在被点击时应该调用popUp()函数。

A.把这个链接的href属性值传递给popUp()函数；

B.取消这个链接的默认行为，不让这个链接把访问者带离当前窗口。

下面是实现上述步骤的JavaScript代码：

　　var links = document.getElementByTagNamen("a");

　　for (var i = 0; i < links.length;i++){

　　　　if (links[i].getAttribute("class") =="popup"){

　　　　　　links[i].onclick = function(){

　　　　　　　　popUp(this.getAttribute("href"));

　　　　　　　　return false;

　　　　　　}

　　　　}

　　}

如果将它们存入一个外部的JavaScript文件，就等于是把这些操作从HTML文档里分离出来了。可是会有一个问题需要解决，必须让这些代码在HTML文档全部加载完成后立即执行。

　　winddow.onload = prepareLinks;

　　function prepareLinks(){

　　　　var links = document.getElementByTagNamen("a");

　　　　　　for (var i = 0; i < links.length;i++){

　　　　　　　　if (links[i].getAttribute("class") =="popup"){

　　　　　　　　　　links[i].onclick = function(){

　　　　　　　　　　　　popUp(this.getAttribute("href"));

　　　　　　　　　　　　　　return false;

　　　　　　　　}

　　　　　　}

　　　　}

　　}

　　别忘记把popUp函数也保存到外部的JavaScript文件里去：

　　function popUp(winURL){

　　　　window.open(winURL,"popUp","width=320,height=480");　　

　　}

DOM编程艺术学习笔记

标签：

原文地址：http://www.cnblogs.com/xkux8023/p/5267160.html