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

(编辑：jimmy 日期: 2024/11/2 浏览：3 次 )

本文实例讲述了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程序设计有所帮助。

上一篇：vue引入微信sdk 实现分享朋友圈获取地理位置功能
下一篇：微信小程序自定义弹窗实现详解(可通用）