Javascript DOM 编程艺术读书笔记16/03/26

Posted 2020-06-29 iEdson

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript DOM 编程艺术读书笔记16/03/26相关的知识，希望对你有一定的参考价值。

更新时间 2016-03-27 01:14:15

外设javascript文件操作的标准模板归纳

javascript不需要事件必须在html文档处理，可以在外部javascript的文件把一个事件添加到HTML的某个元素上

element.event = atciotn

关键是如何把这个元素确定下来，这个问题类似css，可以用class或者id

如果把某个事件添加到某个确定id的元素上，可以用getElementById()

document.getElementById("id") .event = action

如果事件涉及多个元素，可以用getElementByTagName()和getAttribute()方法把事件添加到特定属性的一组元素上

以onclick事件和popUP()函数为例,实现html中特定a元素，点击后弹出小窗口

先定义popUp():

function popUp(winURL){

　　window.open(winURL,"popup","width=100,height=100");

}

把文档中的所有链接元素(a)放入数组
遍历数组元素
如果某个链接元素的class=“popup”,说明需要被点击时调用popUP()

　　3中注意一下两点

把这个链接元素的href传递给popUp()函数
取消这个链接的默认行为，不要把这个链接的访问者带到新的窗口

代码

var links = document.getElementsByTagName("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;

　　　　}

但是上述代码是有一定的问题，不会被运行

第一行：

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

这条在javasript文件被加载时立即运行，英文词javascript文件从html文档的<head>部分的<script>标签调用，的，所以他将在HTML文档之前加载到浏览器中，而此时HTML文档还没有全部加载到浏览器中，文档模型不完整，美哟完整的DOM,getElementsByTagName()不能正常运行

必须在HTML文档全部加载到浏览器中，才能执行

HTML文档全部加载到浏览器中时，会触发一个时间，这个事件有onload处理函数

HTML被加载到浏览器中时，document对象又是window对象的一个属性，当window对象触发onload事件时，document已经存在

所以在执行上述事件时，可以在之前添加window.onload = prepareLinks; 将上述函数打包在prepareLinks()函数中

总结：

jsp函数动态触发，通过给事件处理函数添加函数实现给web页面的实时控制

其实可以判断，对HTML文档对象进行操作是，几乎所有操作都在

window.onload = function{

　　func1();

　　fun2();

　　.....

}