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

本文实例讲述了JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支。分享给大家供大家参考，具体如下：

页面加载事件的比较

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'); // 先执行});

数组的常用操作方法

js 的构成

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