本文实例讲述了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
else if (document.attachEvent) {
document.attachEvent('onreadystatechange', function () {
if (document.readyState == "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
callback();
}
})
}
else if (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”) ie 678 不支持
document.querySelector(); // 返回第一个匹配的dom元素
document.querySelectorAll(); // 返回所有dom元素匹配的集合
获取浏览器是否支持的写法如下
if(document.querySelector){
// do your business
}
节点的访问
父节点(唯一):
dom.parentNode
兄弟节点 (兼容写法):
// nextSibling 和 previousSibling 是IE的写法
var next = (dom.nextElementSibling) || (dom.nextSibling);
var pre = (dom.previousElementSibling) || (dom.previousSibling);
孩子节点 (兼容写法):
// firstChild, lastChild 是IE的写法
var first = father.firstElementChild || father.firstChild;
var last = father.lastElementChild || father.lastChild;
孩子们节点：childNodes 和 children
// childNodes 是w3c推荐使用， 但谷歌等浏览器把换行也看成一个节点
// 用下面的方式实现，比较麻烦
var demo = document.getElementById("demo");
var nodes = demo.childNodes;
for(var i=0;i<nodes.length;i++) {
if(nodes[i].nodeType == 1) {
nodes[i].style.display = "none";
}
}
// children 在ie678里面包含注释节点， 注意在编码时避开使用注释
var demo = document.getElementById("demo");
var child = demo.children;
child[0].style.backgroundColor = "red"; // 第一个孩子
child[child.length-1].style.backgroundColor = "red"; // 最后一个孩子dom 节点操作
创建节点：
var dom = 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(“属性”);
兼容写法举例： - 获取：var cn = dom.className - 设置：dom.className = “dcl” - 删除：dom.className = null;
特殊样式属性
cssText 用于更改多个样式属性设置
dom.style.cssText = "width:30px;height:10px;"
常用的循环
- for
- while
- do while
switch 多分支语句
var str = "abc";
switch(str) {
case "a"
// ...
break;
case "b"
// ...
break;
case "c"
// ...
break;
case "abc"
// ...
break;
default:
// ...
}