一. 12中獲取節點的方法javascript
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中子元素獲取方式兼容性處理 java
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兼容性處理node
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;
}
四.三種操做元素的方式json
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;
}
七.變速動畫函數封裝this
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);
}
八.勻速動畫函數封裝code
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);
}
};