JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支

前端  /  管理员 发布于 5年前   609

本文实例讲述了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
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:  // ...}
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
                                                                        
您可能感兴趣的文章:
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
JavaScript判断页面加载完之后再执行预定函数的技巧
基于javascript实现页面加载loading效果
JavaScript页面加载事件实例讲解