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


Posted in Javascript onJuly 04, 2019

本文实例讲述了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:
  // ...
}

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 拖拉缩放效果
Dec 10 Javascript
jQuery Selector选择器小结
May 06 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 #Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 #Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 #Javascript
vue-cli配置flexible过程详解
Jul 04 #Javascript
vue动态配置模板 'component is'代码
Jul 04 #Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 #Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 #jQuery
You might like
PHP strtok()函数的优点分析
2010/03/02 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
javascript关于继承解析
2016/05/10 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
JS如何生成动态列表
2020/09/22 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
python opencv 图像拼接的实现方法
2019/06/27 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
如何卸载python插件
2020/07/08 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
XML文档面试题
2015/08/05 面试题
主题实践活动总结
2014/05/08 职场文书
物流专业求职信
2014/06/30 职场文书
年度考核表个人总结
2015/03/06 职场文书
同意报考公务员证明
2015/06/17 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js