千锋扣丁学堂HTML5培训之JS前端知识点整理总结（三）

2019-07-04 13:51:53 1384浏览

今天千锋扣丁学堂HTML5前端培训老师给大家分享一篇关于JS前端知识点整理总结（三），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(“属性”);

兼容写法举例：

-获取：varcn=dom.className

-设置：dom.className=“dcl”

-删除：dom.className=null;

特殊样式属性

cssText用于更改多个样式属性设置

dom.style.cssText = "width:30px;height:10px;"

常用的循环

for

while

dowhile

switch多分支语句

var str = "abc";
switch(str) {
 case "a"
  // ...
  break;
 case "b"
  // ...
  break;
 case "c"
  // ...
  break;
 case "abc"
  // ...
  break;
 default:
  // ...
}

以上就是关于千锋扣丁学堂HTML5培训之JS前端知识点整理总结（三）的全部内容，希望对大家学习JavaScript程序设计有所帮助。想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。

                            

     【关注微信公众号获取更多学习资料】        【扫码进入HTML5前端开发VIP免费公开课】  

查看更多关于“HTML5开发技术资讯”的相关文章>>