《JavaScript+DOM编程艺术》的摘要(四)

基本知识点:
// 1、js里面为什么要添加window.onload=function (){}
//    保证html文档都加载完了,才开始运行js代码,以防html文档没有加载完,找不到相应的元素
// 2、判断一个js的方法能否在浏览器里面执行:
// if(!document.getElementById) return false; 这样就能达到判断的标准,这样的执行语句,方便判断多个条件
// 3、window.onload还有其他更通用的解决方法:

function addloadEvent(func){
            var addload = window.onload;
               if(typeof window.onload != ‘function‘){
                   window.onload = addload;
               }else{
                   window.onload=function (){
                       addload();
                       func()
                   }
                }
            }

appendChild 插入节点,父元素.appendChild(子元素) 这是个插在父元素已有的子元素节点的后面

var para = document.createElement(‘span‘);
var txt = document.createTextNode(‘测试测试‘);
para.appendChild(txt);
document.getElementById(‘box‘).appendChild(para);

下图为appendChild插入html的结构所示:

insertBefore的用法:

var para = document.createElement(‘span‘);
var txt = document.createTextNode(‘测试测试‘);
para.appendChild(txt);
document.getElementById(‘box‘).parentNode.insertBefore(para,document.getElementById(‘box‘));

其中插入到html的结构为:

着重理解这两个方法的区别

《JavaScript+DOM编程艺术》的摘要(四)

时间: 2024-12-10 00:52:36

《JavaScript+DOM编程艺术》的摘要(四)的相关文章

JavaScript DOM编程艺术学习笔记(四)

第四章 案列研究: JavaScript图片库 利用JavaScript来创建图片库将是最佳的选择:把整个图片库的浏览链接集中安排在图片库主页里,只在用户点击了这个主页里的某个图片链接时才把相应的图片传送给他. 时间处理函数(event handler)的作用是,在特定时间发生时调用特定的JavaScript代码.例如,如果想在鼠标指针悬停在某个元素上时触发一个动作,就需要使用onmouseover事件处理函数;如果想在鼠标指针离开某个元素时触发一个动作,就需要使用onmouseout事件处理函

JavaScript DOM编程艺术读书笔记(四)

第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; 第一个参数是个字符串,所以需要单引号!!! move_elem = setTimeout(repeat,interval); //复制给一个变量,当我们想取消一个正在排队等待执行的函数,可以用clearTimeout(mov

javascript dom 编程艺术笔记 第四章:图片库

首先先建立一个html文件,建立一个图片库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

《JavaScript+DOM编程艺术》的摘要(五)-----添加insertAfter

在JS原生里面,没有提供insertAfter这个方法,不过我们可以利用appendChild.insertBefore.parentNode这些方法创建一个insertAfter方法,代码如下: function insertAfter(newElement,targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newEle

JavaScript DOM编程艺术第一章:JavaScript简史

本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助,所以 如果您也看过这本书,希望不要喷小的"抄袭",其实我也懒得敲这些文字也想简单粗暴地上代码,但是只有实践没有理论不容易自己理解,为避免误导,该"抄"的地方还是要"抄"的,哈哈~~ 一.JavaScript的起源 JavaScript是Netscap

Javascript Dom编程艺术(第2版)读书笔记

Javascript Dom编程艺术这本书我看的是第2版的,真心觉得这本书不错,它将DOM编程的一些基本原则,及如何让Javascript代码在浏览器不支持的情况下,或浏览器支持了Javascript但用户禁用它的情况下做到平衡退化,让最基本的操作仍能顺利完成,以及如何让结构与样式分享做到真正的渐近增强叙述得很清楚,也很容易理解接受.我也是看了这本书之后,才对代码优化,结构,行为,样式有了进一步的加深理解. Javascript Dom编程艺术(第2版)读书笔记,布布扣,bubuko.com

Javascript DOM 编程艺术读书笔记16/04/01

愚人节快乐 开始用webstorm了,随着学习深入,代码越来越长,因为不借助ide还真是挺难的 今天发现了一个严重的误区,text和textNode是完全不同的两个概念,之前没有特别注意,写代码很容易跳过createTextNode直接用parentNode.appendChild(text) 单独拎出来晒一晒,以后引以为戒 Javascript DOM 编程艺术读书笔记16/04/01

JavaScript DOM编程艺术学习笔记(一)

嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推荐给想了解HDOM的相关人员!首先非常感谢作者写出了这么好的一本书,谢谢!书中的内容比较多,我仅记下我认为对自己和他人有所帮助的一些内容! 嗯,首先还是让代码来说话吧! 下面是两段此书中反复强调且通用的经典代码段 1:相当的经典和实用,尤其是当需要为页面加载函数绑定多个函数的时候 /** * [addLoad

《javascript dom编程艺术》笔记(二)——美术馆示例

这几天把这本书看完了,里面大部分知识我已经会了,所以看得就略简单,好多地方都没有再去动手去做,我知道这样是不对的,以后补吧. 现在我要做的是把这本书的笔记完结掉,不然总觉得有啥事没有做. 这个版本不是书中的最后版本,好像是第二版吧.后面还有动态创建结点的一版本,我已经在别的地方实践过了,就不再做了. 只贴出两个函数. //显示图片方法 function showPicture (whichpic) { //综合绑定的事件考虑,条件执行失败,希望浏览器可以让用户打开图片,因此在onclick处re