JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支
本文实例讲述了JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支。分享给大家供大家参考，具体如下：
页面加载事件的比较
- window.onload
- jquery中的document.ready
document.ready=function(callback){
//兼容FF,Google
if(document.addEventListener){
document.addEventListener('DOMContentLoaded',function(){
document.removeEventListener('DOMContentLoaded',arguments.callee,false);
callback();
},false)
}
//兼容IE
elseif(document.attachEvent){
document.attachEvent('onreadystatechange',function(){
if(document.readyState=="complete"){
document.detachEvent("onreadystatechange",arguments.callee);
callback();
}
})
}
elseif(document.lastChild==document.body){
callback();
}
}
window.onload=function(){
alert('onload');//后执行
};
document.ready(function(){
alert('ready');//先执行
});
- 内部实现细节如上
数组的常用操作方法
- push从后面追加一个或多个，返回新数组的长度
- unshift从前面追加一个或多个，返回新数组的长度
- pop删除最后一个元素，返回被删除的元素
- shift删除第一个元素，返回第一个被删除的元素
- concat连接数组，返回新的数组
- join将数组转字符串，参数是分隔符，默认是分隔符是逗号”,”
- split将字符串转换为数组，默认分割符是逗号stringObject.split(separator,howmany),howmany参数可指定返回的数组的最大长度
js的构成
- ECMAScript描述了js语法和基本对象
- DOM(文档对象模型)提供了文档结构化表示，并定义了如何通过脚本来访问文档结构
- BOM(浏览器对象模型)提供与浏览器交互的方法和接口
dom节点
- 标签节点
- 文字节点
- 属性节点
- 注释节点
获取节点的方式
document.getElementById(“id”) document.getElementByTagName(“div”) document.getElementsByClassName(“classname”)ie678不支持 document.querySelector();//返回第一个匹配的dom元素 document.querySelectorAll();//返回所有dom元素匹配的集合
获取浏览器是否支持的写法如下
if(document.querySelector){
//doyourbusiness
}
节点的访问
父节点(唯一):
dom.parentNode
兄弟节点(兼容写法):
//nextSibling和previousSibling是IE的写法 varnext=(dom.nextElementSibling)||(dom.nextSibling); varpre=(dom.previousElementSibling)||(dom.previousSibling);
孩子节点(兼容写法):
//firstChild,lastChild是IE的写法 varfirst=father.firstElementChild||father.firstChild; varlast=father.lastElementChild||father.lastChild;
孩子们节点：childNodes和children
//childNodes是w3c推荐使用，但谷歌等浏览器把换行也看成一个节点
//用下面的方式实现，比较麻烦
vardemo=document.getElementById("demo");
varnodes=demo.childNodes;
for(vari=0;i
dom节点操作
创建节点：
vardom=document.createElement(“div”);
添加节点：
//appendChild将dom追加到dom1的最后面
dom1.appendChild(dom);
//insertBefore将newDom插入到ReferencedDom的前面,返回值为新插入的值,dom1为父节点
dom1.insertBefore(newDom,ReferencedDom)
删除节点：
removeChild()eg:domA.removeChild(domB);//删除domA里面的孩子节点domB
克隆节点：cloneNode复制节点，接受一个布尔值，true表示深复制(复制节点及其内部所有节点)，false表示浅复制
//深复制
demo.cloneNode(true);
//浅复制
demo.cloneNode(false);
属性设定
非兼容ie6,7的写法
-获取：dom.getAttribute(“属性”);
-设置：dom.setAttribute(“属性”,”值”);
-删除：dom.removeAttribute(“属性”);
兼容写法举例：
-获取：varcn=dom.className
-设置：dom.className=“dcl”
-删除：dom.className=null;
特殊样式属性
cssText用于更改多个样式属性设置
dom.style.cssText="width:30px;height:10px;"
常用的循环
- for
- while
- dowhile
switch多分支语句
varstr="abc";
switch(str){
case"a"
//...
break;
case"b"
//...
break;
case"c"
//...
break;
case"abc"
//...
break;
default:
//...
}
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。