一. 12中获取节点的方法
console.log(document.getElementById("dd").childNodes); //某节点全部子节点
console.log(document.getElementById("dd").children); //某元素的全部子元素
console.log(document.getElementById("dd").parentNode); //某节点的父节点
console.log(document.getElementById("dd").parentElement); //某元素的父元素
/*
* 前四个火狐谷歌IE都支持
* 后面八个所有子节点IE8都当做子元素处理
*
*
* */
console.log(document.getElementById("dd").firstChild); //某节点的第一个子节点
console.log(document.getElementById("dd").firstElementChild); //某元素的第一个子元素
console.log(document.getElementById("dd").lastChild); //某节点的最后一个子节点
console.log(document.getElementById("dd").lastElementChild); //某元素的最后一个子元素
console.log(document.getElementById("dd").previousSibling); //某节点前一兄弟节点
console.log(document.getElementById("dd").previousElementSibling); //某元素前一兄弟元素
console.log(document.getElementById("dd").nextSibling); //某节点后一兄弟节点
console.log(document.getElementById("dd").nextElementSibling); //某元素后一兄弟元素
二.IE8中子元素获取方式兼容性处理
function getfirstElementChild(ele){
if(typeof ele.firstElementChild!="undefined"){
return ele.firstElementChild;
}else {
var obj=ele.firstChild; // 获取第一个子元素兼容性写法
while(obj.nodeType!=1){
obj=obj.nextSibling;
}
return obj;
}
}
console.log(getfirstElementChild(my$("dd")));
function getlastElementChild(ele){
if(typeof ele.lastElementChild!="undefined"){
return ele.lastElementChild;
}else {
var obj=ele.lastChild; // 获取最后一个子元素兼容性写法
while(obj.nodeType!=1){
obj=obj.previousSibling;
}
return obj;
}
}
console.log(getlastElementChild(my$("dd")));
function getpreviousElementSibling(ele){
if(typeof ele.previousElementSibling!="undefined"){
return ele.previousElementSibling;
}else {
var obj=ele.previousSibling; // 获取前一个子元素兼容性写法
while(obj.nodeType!=1){
obj=obj.previousSibling;
}
return obj;
}
}
console.log(getpreviousElementSibling(my$("dd")));
function getnextElementSibling(ele){
if(typeof ele.nextElementSibling!="undefined"){
return ele.nextElementSibling;
}else {
var obj=ele.nextSibling; // 获取后一个子元素兼容性写法
while(obj.nodeType!=1){
obj=obj.nextSibling;
}
return obj;
}
}
console.log(getnextElementSibling(my$("dd")));
三.innerText和textContent兼容性处理
function setInnerText(element,text){
if(typeof element.textContent=="undefined"){
element.innerText=text;
}else{
element.textContent=text;}
}
function getInnerText(element){
if(typeof element.textContent=="undefined"){
return element.innerText;
}else
return element.textContent;
}
四.三种操作元素的方式
my$("dv").insertBefore(obj,my$("dv").firstChild); //在第一个元素前面追加元素
my$("dv").removeChild(my$("dv").firstChild); //删除子元素
my$("dv").removeChild(my$("dv").firstChild); //删除全部子元素
五.为事件添加处理函数和清除处理函数的兼容性代码
function addEventListener(element,type,fn){ //fn只能用自定义函数传值不能直接用匿名函数
if(element.addEventListener){
element.addEventListener(type,fn,false);
}
else{
if(element.attachEvent){
element.attachEvent(type,fn);
}
else{
element["on"+type]=fn;
}
}
}
/*
*
* 事件处理函数的清除remove
*
* */
function removeEventListener(element,type,fn){
if(element.removeEventListener){
element.removeEventListener(type,fn,false);
}else if (element.attachEvent){
element.attachEvent(type,fn);
}else {
element["on"+type]=null;
}
}
六.封装scroll函数
function GetScroll() {
this.left=window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
|| 0;
this.top = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop
|| 0;
this.mm =1;
}
七.变速动画函数封装
function animateC(element,json,fn){
clearInterval(element.itd);
element.itd=setInterval(function(){
var tag=true;
for(var key in json){
if(key=="opacity"){
var current=getStyle(element,key)*100; //获得当前元素属性值
var target=json[key]*100;
var step=(target-current)/10; //设置元素移动步数
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
//当当前元素left<target时步数为正否则为负
element.style[key]=current/100;
}else if(key=="z-index"){
element.style.zIndex=json[key];
}else {//普通属性值
var current=parseInt(getStyle(element,key));//获得当前元素属性值
var target=json[key];
var step=(target-current)/10; //设置元素移动步数
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
//当当前元素left<target时步数为正否则为负
element.style[key]=current+"px";
}
if(current!=target)
tag=false;
}
if (tag) {
clearInterval(element.itd);
if(fn){
fn();
}
}//清除定时器
},10);
}
八.匀速动画函数封装
function animateD(element, json, fn) {
var itd = setInterval(function () {
var tag = true;
for (var key in json) {
if (key == "z-index") {
element[key] = json[key];
} else {
var current = element[key]; //获得当前元素left值
var bushu = 10; //设置元素移动步数
var target = json[key];
current += current < target ? bushu : -bushu; //当当前元素left<target时步数为正否则为负
if (Math.abs(target - current) >= Math.abs(bushu)) { //当当前元素left与target差值大于步数时
element.style.left = current + "px"; //赋值元素left为current
} else {
element.style.left = target + "px"; //赋值元素left为target
}
}
if (current != target)
tag = false;
}
if (tag) {
clearInterval(itd);
if (fn)
fn();
}
}
);
}
九.获取当前元素的pageX和pageY的兼容性处理
function PageXY(e) {
this.getEvt=function(){
return e || window.event;
}
this.getScrollX=function(){
return e.scrollLeft? e.scrollLeft:window.pageXOffset || (window.documentElement&&window.documentElement.scrollLeft) ||
document.body.scrollLeft || 0; //e.scrollLeft-->谷歌适用
}
this.getScrollY=function(){
return e.scrollTop? e.scrollTop:window.documentElement&&window.documentElement.scrollTop ||
window.pageYOffset || document.body.scrollTop || 0;
}
this.getPageX=function () {
return e.pageX? e.pageX:this.getEvt(e).clientX +this.getScrollX(e);
}
this.getPageY=function () {
return e.pageY? e.pageY:this.getEvt(e).clientY +this.getScrollY(e);
}
};