DOM几个重要的函数
最近在读js编程艺术,发现几个不错的函数,总结如下:
1、页面初始化加载函数onload
操作DOM的函数应该在页面元素初始化结束之后再立即执行,否则页面元素还没有初始化完成,DOM操作就会搁浅了;网页加载完毕时会触发一个onload事件,应该写在onload函数里面执行,现封装一个将多个操作绑定的onload事件上的函数addLoadEvent:
function addLoadEvent(func) {
var oldonload=window.onload;
if(typeof window.onload !='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
在使用的时候直接将要执行的函数作为参数传进去就行了,
addLoadEvent(firstFunction)
addLoadEvent(secondFunction)
这将把那些在页面加载完毕时执行的函数创建为一个队列,使其依次执行
2、封装将元素插入到元素之后的方法insertAfter
function insertAfter(newElement,targetElement) {
var parent=targetElement.parentNode;
if(parent.lastChild==targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
目标元素为父元素最后一个元素时,直接追加到父元素之后;否则插入到目标元素和目标元素的下一个兄弟元素之间
DOM几个重要的函数的更多相关文章
- 封装的一些常见的JS DOM操作和数据处理的函数.
//用 class 获取元素 function getElementsByClass(className,context) { context = context || document; if(do ...
- javascript中函数的3个高级技巧
× 目录 [1]作用域安全 [2]惰性载入 [3]函数绑定 前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本 ...
- jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}
笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...
- jquery----中级函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- DOJO DOM 功能
In this tutorial, you'll learn about how to use Dojo to manipulate the DOM in a simple, cross-browse ...
- DOM 事件
1.注册事件 // 事件处理函数 function handleMouseOver(event) { // process ...... } p.addEventListener("mous ...
- js操作DOM动态添加和移除事件
非IE下,注意事件名不带on,如onclick为click 添加事件:DOM对象.addEventListener('事件名',函数名,true/false); 删除事件:DOM对象.removeEv ...
- jQuery.bind() 函数详解
bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数. 此外,你还可以额外传递给事件处理函数一些所需的数据. 执行bind()时,事件处理函数会绑定到每个匹配元素上.因此你使用bind( ...
- javascript函数中的三个技巧【二】
技巧二: [惰性载入函数] 因为浏览器之间的行为的差异,我们经常会在函数中包含了大量的if语句,以检查浏览器特性,解决不同浏览器的兼容问题,比如,我们最常见的为dom节点添加时间的函数 functio ...
随机推荐
- css的定位笔记
relative:相对定位. 1. 不论其父元素和相邻元素的position是什么,均相对于自身原来的位置来偏移. 2. 不会脱离文档流,其原来的位置依然保留着,不会被文档中其他的元素占用. 3. 原 ...
- BZOJ4337: BJOI2015 树的同构(hash 树同构)
题意 题目链接 Sol 树的同构问题,直接拿hash判一下,具体流程大概是这样的: 首先转化为有根树,预处理出第\(i\)棵树以\(j\)为根时的hash值. 那么两个树同构当且仅当把两棵树的hash ...
- 基于token的后台身份验证(转载)
几种常用的认证机制 HTTP Basic Auth HTTP Basic Auth简单点说明就是每次请求API时都提供用户的username和password,简言之,Basic Auth是配合RES ...
- 计时器(Chronometer)
计时器(Chronometer) 常用属性:format(计时器的计时格式) 常用方法: setBase(long base) 设置计时器的起始时间 setFormat(String format) ...
- Android MVP Plugin,一键完成MVP结构代码编写
推荐一个Gradle的学习系列,Gradle相关的知识一直很匮乏,难得发现一个不错的系列: http://www.cnblogs.com/davenkin/p/gradle-learning-1.ht ...
- redis 命令select、dbsize、清空数据库、info、client
select 切换库 dbsize 当前库中数据条数 清空数据库 flushdb | flushall 清空数据,一个是清空当前库,一个清空当前实例 查看服务器及redis相关信息 infoinfo ...
- vmware centos 安装
一.分区 一块硬盘主分区+扩展分区最多只能有4个,其中扩展分区最多只能有1个.扩展分区不能写入数据,只能包含逻辑分区.这些都不是linux的限制,而是硬盘结构的限制. 分区号 第一种分区法: |--- ...
- 最常见到的runtime exception 异常
ArithmeticException, 算术异常ArrayStoreException, 将数组类型不兼容的值赋值给数组元素时抛出的异常BufferOverflowException, 缓冲区溢出异 ...
- 2.HTML标签
<a> 链接标签 1) <a href=“#”>这是个链接</a> 表示空链接 2) 未访问过的链接 显示蓝色字体并带下划线;访问过的链接 显示紫色 ...
- 关于Nodejs开发桌面应用。NW.js 和 Electron 优缺点分析对比
从开发角度来说,选择用 nw.js 还是 election ,区别其实不是很大.大部分工作还是在自己的 javascript 和 HTML 上.国内比较有名的,比如微信web开发工具.钉钉都是基于 n ...