JS基础笔记 包含兼容性封装函数

JS基础笔记 包含兼容性封装函数

Dom对象选择器
Document.方法
getElementsByTagName(’’)标签选择器 形成一个类数组
getElementById(’’)元素id ie8以下不区分大小写
getElementsByName(’’)部分标签可用 表单 表单元素 img iframe 形成一个类数组
getElementByClassName(’’)ie8 ie8以下版本没有此方法 部分标签不可用 形成一个类数组
querySelector(div > a)css 选择器 ie7 ie7以下 版本没有此方法 非实时 不常用
querySelectorAll() css 选择器 ie7 ie7以下 版本没有此方法 形成一个类数组 非实时 不常用
节点遍历
节点类型：元素节点（1）、属性节点（2）、文本节点（3）、注释节点（8）、document（9） DocumentFragment（11）
parentNode( 父节点 最顶端的父元素为document
childNodes( 子节点 包含文本节点 注释节点 元素节点
firstChild( 第一个子节点
lastChild( 最后一个子节点
nextSibling( 后一个兄弟节点
previousSibling( 前一个兄弟节点
元素节点遍历
parentElement() 返回当前元素的父元素节点（IE不兼容）
children() 返回当前元素的元素子节点
node.childElementCount() === node.children.length 当前元素节点的子元素
firstElementChild() 返回第一个元素节点（IE不兼容）
LastElementChild() 返回最后一个元素节点 （IE不兼容）
nexteElementSilbing()/previousElementSibling() 返回最后一个/前一个兄弟元素节点
节点的四个属性
nodeName( 元素的标签名 以大写形式表示 只读
nodeValue( Text节点或Comment（注释）节点的文本内容 可读写
nodeType( 该节点的类型 只读
attributes( Element 节点的属性集合
dom元素是否有节点的一个方法 Node.hasChildNodes();
// no children 不用此方法输出元素节点
function reElementChild(node) {
var temp = {
length:0;
push: Array.prototype.push
},
child = node.childNodes;
len = child.length;
for (var i = 0; i < len.length; i++) {
if (child[i].nodeType === 1) {
temp.push(child[i]);
}
}
return temp;
}
Dom结构树
document >>> HTMLDocument.prototype >>> Document.prototype 原型链
函数封装 返回某个dom元素的第n个父元素节点
function retParent(elem,n){
while(elem && n){
elem = elem.parentElement;
n–;
}
return elem;
}
函数封装 封装myChildren功能，解决兼容问题
Element.prototype.myChildren = function() {
var child = this.childNodes;
var len = child.length;
var arr;
for (var i = 0; i < len.length; i++) {
if(child[i].nodeType == 1){
arr.push(child[i]);
}
}
return arr;
}
函数封装 返回元素e的第n个兄弟元素节点 n为正 返回后面的兄弟元素节点 n 为负返回前面的兄弟元素节点 n为0 返回自己
function retSibling(e,n){
while(n){
if (e && n > 0) {
e = e.nextElementSibling;
n–;
}else{
e = e.previousElementSibling;
n++;
}
}
return e;
}
兼容 函数封装 返回元素e的第n个兄弟元素节点 n为正 返回后面的兄弟元素节点 n 为负返回前面的兄弟元素节点 n为0 返回自己
function retSibling(e,n){
while(n){
if (n > 0) {
if(e.nextElementSibling){
e = e.nextElementSibling;
}else{
for(e = e.nextSibling; e && e.nodeType != 1; e = e.nextSibling);
}
n–;
}else{
if (e.previousElementSibling) {
e = e.previousElementSibling;
}else{
for(e = e.previousSibling; e && e.nodeType != 1; e = e.previousSibling);
}
n++;
}
return e;
}
Dom操作
增加节点
document.createElement(’’);增加元素节点
document.createTextNode(’’);增加文本节点
document.createComment(’’);增加注释节点
document.createDocumentFragment();
插入节点
appendChild()插入元素节点 剪切操作
parentNode.insertBefore(a,b) 把a插入b之前
删除节点
parent.removeChild();剪切出来
child.remove();彻底删除
替换节点
parentNode.replaceChild(new, origin); 剪切操作
节点属性
innerHTML innerHTML = ‘’;读取节点内容 添加内容
innerText() 火狐不兼容 /textContent() 老版本IE不兼容
节点上的一些方法
ele.setAttribute(‘class’,‘className’) 添加行间属性
ele.getAttribute(‘class’,‘className’) 获取dom行间属性
函数封装 insertAfter() 功能类似于insertBefore();
Element.prototype.insertAfter = function(targetNode,afterNode){
var beforeNode = afterNode.nextElementSibling;
if (beforeNode == null) {
this.appendChild(targetNode);
}else{
this.insertBefore(targetNode,beforeNode);
}
}
日期对象Date 系统已提供好的方法
用法 var date = new Date();
设置定时器 setInterval(document(){

},2000)
清楚定时器 clearInterval(‘参数’)
设置定时器 setTimeout(function(){ 推迟一段时间执行

},2000)
clearTimeout();
Dom基本操作
查看滚动条距离
window.pageXOffset()/pageYOffset IE8 IE8以下不兼容
document.body.scrollLeft/Top IE兼容
document.documentElement.scrollLeft/Top() IE兼容
函数封装 求滚动条距离 getScrollLeftOffset()
function getScrollLeftOffset(){
if (window.pageXOffset) {
return{
x : window.pageXOffset;
y : window.pageYOffset;
}
}else{
return{
x : document.scrollLeft + document.documentElement.scrollLeft;
y : document.scrollTop + document.documentElement.scrollTop;
}
}
}
查看可视窗口尺寸
window.innerWidth/innerHeight IE8 IE8以下不兼容
document.documentElement.clientWidth/clientHeight 标准模式 全部兼容
document.body.clientWidth/clientHeight 怪异模式下兼容全部浏览器
封装函数 兼容浏览器 查看可可视窗口尺寸 getViewportOffset()
function getViewportOffset(){
if(window.innerWidth){
return{
w : window.innerWidth;
h : window.innerHeight;
}
}else{
if (document.compatMode === “BackCompat”) {
return{
w : document.body.clientWidth;
h : document.body.clientHeight;
}
}
}else{
return{
w : document.documentElement.clientWidth;
h : document.documentElement.clientHeight;
}
}
}
dom.getBoundingClientRect() 返回一个类对象包 兼容性极好 该对象返回的对象组中 有 left top（左上角 x y 坐标） right bottom（右下角 x y坐标）等属性 返回结果非实时性的
查看元素尺寸
dom.offsetWidth( dom.offsetHeight(
查看元素位置 dom.offsetLeft/Top( 相对与无定位父级元素 返回文档坐标 对于有定位父级元素返回相对于最近的有定位的父级坐标
dom.offsetParent 返回最近有定位的父级元素 没有返回body
求元素相对于文档的坐标 getElementPosition(
让滚动条滚动
window 上的三个方法 scroll(x,y) scrollTo() scrollBy() 将x y 坐标传入 实现让滚动条滚动到当前位置 scrpllBy() 可以叠加数据
脚本化CSS
dom.style.prop 例子 dom.style.width 可读写行间样式 全部兼容 float 》》》》 cssFloat 符合属性必须拆解 小驼峰式写法 marginTop 写入值为字符串形式
查询计算样式
window.getComputedStyle(ele,null) null 查看伪元素 计算样式只读 返回绝对值 没有相对单位 IE8 IE8以下不兼容
ele.currentStyle( IE独有 计算样式只读 返回值非绝对值
封装函数 兼容 getStyle(elem,prop);
functionn getStyle(){
if(window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}

事件
绑定事件方法
dom.onclick = function(){ 兼容性极好 this 指向自己

}
dom.addEventListener(‘click(事件类型)’,function(){ IE9以下不兼容 this 指向自己（false存在） false不存在 指向 window 配合call/apply

},false)
dom.attachEvent(‘on’ + type,function(){ IE独有 this 指向 window

})
函数封装 addEvent()
function addEvent(elem,type,handle){
if (ele.addEventListener) {
ele.addEventListener(type,handle,false);
}else if(elem.attachEvent){
elem.attachEvent(‘on’ + type, function(){
handle.call(elem);
})
}else{
elem[‘on’ + type] = handle;
}

}
事件解除
dom.onclick = null;
dom.removeEventListener(‘ckick’,函数引用,false)；
dom.detachEvent(‘on’ + type,函数引用)；
事件处理模型 冒泡 捕获
事件冒泡 结构上（非视觉上）嵌套关系的元素 会存在事件冒泡的功能 即同一事件上 自子元素冒泡向父级元素（自底向上）
事件捕获 结构上（非视觉上）嵌套关系的元素 会存在事件捕获的功能 即同一事件上 自父级元素捕获至子元素 （事件源元素）（自顶向下） IE上没有捕获事件
触发顺序 先捕获 后冒泡
focus（聚焦） blur change submit reset select 等事件不冒泡
取消冒泡和组织默认事件
取消冒泡
在事件绑定函数中 function(e) 传入参数e e记载着事件触发后的一系列状态和信息
W3C标准 event.stopPropagation() IE9以下不兼容
IE独有 event.cancelBubble = true; 谷歌存在
函数封装 取消冒泡函数 stopBuubble(event);
function stopBuubble(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
默认事件 表单提交 a标签跳转 右键菜单等
return false; 以对象属性的方法注册事件才生效
event.preventDefault();W3C标准 IE9以下不兼容
event.returnValue = false;IE兼容
函数封装 组织默认事件的函数 cancelHandler(event);
function cancelHandler(event){
if(event.preventDefault){
event.preventDefault();
}else{
e.returnValue = false;
}
}
事件对象
event || window.event
事件源对象
event.target() 火狐只有此方法
event.secElement() ie 只有这个
这俩 谷歌都存在
利用事件冒泡 和 事件源对象 进行处理
优点 性能 不需要循环所有元素绑定事件灵活 新的子元素进入时 依然兼容