DOM编程艺术学习笔记
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
}
}以上是关于DOM编程艺术学习笔记的主要内容,如果未能解决你的问题,请参考以下文章