时间:2021-05-26
本文实例讲述了JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支。分享给大家供大家参考,具体如下:
页面加载事件的比较
数组的常用操作方法
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
// 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;"常用的循环
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程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
DOM:就是用JavaScript操作HTML节点。知识点:将HTML变成DOM树看到HTML会画DOM树。创建节点,添加节点,删除节点varnodeObj=d
本文实例讲述了原生js实现针对Dom节点的CRUD操作。分享给大家供大家参考,具体如下:知识点,依然会遗忘。我在思考到底是什么原因。想到研究生考试准备的那段岁月
今天开始学习DOM操作,下面写一个小案例来巩固下知识点.DOM:documentobjectmodel(文档对象模型)根据id获取页面元素: 如: varxx=
小小最近学习到了js的几种循环方式,对这几种循环方式进行总结。以及对模块化的相关知识点进行总结,循环方式循环方式分为好几种循环方式,分别是for循环,forEa
在DOM事件的深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法。本文将继续介绍DOM事件中的知识点,