1、節點

元素.childNodes : 屬性

只讀 屬性 子節點列表集合

元素.childNodes 只包含子節點，不包含孫節點

DOM節點的類型有很多種，w3c標準有12種

標準下：包含了文本節點和元素節點，也會包含非法嵌套的子節點

非標準下：包含元素節點，ie7以下不會包含非法包含的嵌套的子節點

非標準就是IE7以下

常用文本節點、元素節點

空節點也是文本節點

判斷節點的類型：
元素.nodeType : 只讀 屬性 當前元素節點的類型
返回值為1、2、3、4、5
1：元素節點
2：屬性節點
3：文本節點

屬性
元素.attributes 獲取屬性節點，屬性的集合

元素.name 獲取屬性名
元素.value 獲取屬性值

這個推薦使用

元素.children : 只讀 屬性 子節點列表集合

這個標準下：只包含元素類型的節點
非標準：只包含元素節點類型的節點

非法嵌套ie7以下是不認識的，會把它放到別的標簽下

<ul><a href=""><li></li></a><a href=""><li></li></a></ul><!-- ul包住a就是非法嵌套 -->

元素.firstChild : 只讀 屬性 第一個子節點

標準下：包含文本節點和元素節點
非標準：包含元素節點

元素.firstElementChild : 只讀 屬性 第一個子元素節點

標準下：包含元素節點
非標準：沒有這個屬性

這個兼容性問題 可以使用元素.children[0] 來代替，比較靠譜

如果只獲取子元素節點，使用.children 屬性就可以了

?

元素.nextSibling || 元素.nextElementSibling 下一個兄弟節點

元素.previousSibling || 元素.previousElementSibling 上一個兄弟節點

兼容問題：
這種屬性獲取節點也是有問題的，如最后的元素節點獲取下一個文本節點。

?

父節點操作

通過子節點獲取父節點
元素.parentNode : 只讀 屬性 當前節點的父級節點

父節點只有一個所以返回的只有一個節點

這個沒有兼容問題

還有一個父節點獲取
元素.offsetParent : 只讀 屬性 離當前元素最近的一個有定位屬性的父節點

css的定位父級屬性一樣

如果當前元素沒有定位屬性，默認為body，如果有定位屬性，然而父級沒有定位屬性，默認是Body但ie7以下是HTML

ie7以下，如果當前元素的某個父級觸發了layout，那么offsetParent就會指向到這個被觸發了layout特性的父級

?

DOM的兼容性問題還是很大的，尤其是非法的嵌套等；

所以語義化結構布局是很必要的。

offsetLeft[top] : 只讀 屬性 當前元素定位父級的距離（偏移值）

到定位父級的距離

ie7以下，如果自身沒有定位，那么offsetLeft[Top]是到body的距離

如果有定位，那么offsetLeft[Top]是到有定位父級的距離

元素.offsetParent

沒有定位父級：

ie7以下
自身沒有定位
元素.offsetParent ->body
自身有定位
元素.offsetParent ->html

其他瀏覽器
元素.offsetParent ->body

有定位父級和自身定位 全部瀏覽器都沒有區別

obj.width

obj.style.width 樣式寬

obj.clientWidth 樣式寬+padding 可視區寬

obj.offsetWidth 占位寬 樣式寬+padding+border

?

ie7以下，因為body有個margin的默認值，所以清除默認后都距離沒什么區別，HTML

不同瀏覽器margin的值不一樣

?

封裝某個元素到頁面的距離：

//獲取元素到文檔邊緣的距離function getPos(obj){var obj0=obj;var pos={"left":0,"top":0};while(obj0){pos.left+=obj0.offsetLeft;pos.top+=obj0.offsetTop;if(obj0){obj0=obj0.offsetParent;}}return pos;} // 直接調用就可以，把所要獲取元素到文檔邊緣的距離的元素傳進去即可 如： var a=docuemnt.querySelector("div"), b=getPos(a);// 函數會返回一個距離的值

?

元素動態創建

innerHTML也可以實現動態創建，但每次創建都要歷遍全部，如果信息量大，性能是不好的。

而docuement.createElement()是在創建新的標簽，然后添加，是不會歷遍全部，在添加，而是直接添加
進去，性能方面很好，就是麻煩了些。

添加的方法appendChild() 追加自子元素

父級.appendChild()

父級.insertBefore(新元素，被插入元素) 方法 在指定的元素前面插入一個新元素

父級.insertBefore(新元素，被插入元素)與父級.children[0]配合使用

非標準：ie下children在父級下沒有子元素節點就會報錯，所以需要判斷

?

刪除
父級.removeChild(要刪除的元素) 刪除元素

如可以在動態的創建元素時動態的加上點擊事件

例子：

var oA=document.getElementById("a"); oA.innerHTML="刪除"; oA.href="javascript:;" ; oA.οnclick=function(){ oUl.removeChild(this.parentNode); }
//這是一種事件的綁定

?

父級.replaceChild(新節點，被替換節點) 替換節點

appendChild 和 insertBefore , replaceChild() 可以操作動態創建節點和已經存在的節點

不過它們操作已經存在的節點是把原有的節點剪切到目的點

它們都是動態的，獲取id是靜態，getElementById();

?

Event-事件詳解

焦點事件

焦點：能夠是瀏覽器區分用戶輸入的對象，當一個元素有焦點的時候

那么就可以接受用戶的輸入。

我們可以通過一些方式給元素設置焦點

1.點擊

2.tab

3.js

不是所有元素都能夠接受焦點的，能夠響應用戶操作的元素才有焦點。

表單，a標簽都可以獲取焦點

焦點事件

onfocus : 當元素獲取到焦點的時候觸發

onblur : 當元素失去焦點的時候觸發

obj.focus() 給指定元素設置焦點

obj.blur() 給指定元素取消焦點

obj.select() 選擇指定元素的里面的文本內容

?

event : 事件對象，當一個事件發生的時候，和當前這個對象發生的這個事件有關的一些詳細的信息

都會被臨時保存到一個指定地方-event對象，供我們在需要的調用。 就像飛機-黑匣子

ie/chrome : event 是一個內置的全局對象

ff:事件對象是通過事件函數的第一個參數傳入的

如果一個函數被事件調用的，那么這個函數定義的第一個參數就是事件對象

標準下：都可行

非標準下：不可行，但可以接受全局event

ie先給它null

事件對象必須在一個事件調用的函數里使用才有內容

事件函數：事件調用的函數

event存儲了很多屬性，可以使用 for in 遍歷出來

?

clientX[Y] 鼠標相對頁面的可視區的位置

事件對象event需要事件的支持，在其的函數里

?

鼠標移動事件onmousemove

觸發頻率不是像素，而是間隔時間，在一個指定時間內（很短），如果

鼠標的位置和上一次的位置發生了變化，那么就會觸發一次

可視區，如果有滾動條，而你想實現物體隨鼠標移動，那你就要加上滾動條

的看不到的距離，加上文檔的距離向上的距離

如：

event.clientX是以可視區左上角為坐標原點

X=event.clientX+document.getElement.scrollLeft+"px";

?

事件流

事件冒泡：

當一個元素接受到事件的時候，會把他接受到的所有傳播給的父級一直到頂層.

只與它的HTML結構有關

?

給**加事件，給元素加事件處理函數

事件函數綁定

告訴div1，如果他接受到了一個點擊事件，那么他就去執行fn1

?

事件冒泡：可以使用子級獲取點擊，而父級給個點擊事件處理函數，這樣就

可以只有父級統一執行這個函數。就是事件委托

?

阻止冒泡： event.cancelBubble = true; //阻止當前事件處理函數的事件

?

冒泡:

其他說白了就是文檔對象都有事件的存在，只是沒有給予事件函數，所以獲得

事件，但沒有事件函數就執行不了，而事件冒泡，就是一層一層向上的觸發

事件，如果有這個事件的事件處理函數的對象，就會執行這個函數。

?

如果和定時器一起用就會有時間概念，這個時候需要注意一個，出現的問題；

沒時間概念時，有很多問題都是看不出來的，因為同時執行，效果看不出事件

冒泡的影響。

?

只有當前事件有阻止冒泡，那么它之下的子孫級元素都到這里就結束冒泡了

?

事件捕獲：

ie下沒有的(這個非標準下的)，在綁定事件中，標準下是有的

事件綁定的第二種形式

給一個對象綁定一個事件處理函數的第一種形式

如：obj.οnclick=fn1

如果再來一個一樣的obj.οnclick=fn2,這樣會覆蓋之前的

?

給一個對象的同一個事件綁定多個不同的函數

給一個元素綁定事件函數的第二種形式

?

非標準：執行順序倒過來的；后添加的執行先。

非標準下是沒有捕獲所以只能使用以下的實現

ie：obj.attachEvent(事件名稱，事件函數)

如：document.attachEvent("onclick",fn1);

特點：

1.沒有捕獲

2.事件名稱有on

3.事件順序是倒序

4.this指向window

標準下：

obj.addEventListener(事件名稱，事件函數，是否捕獲)

是否捕獲：默認是false false:冒泡 true：捕獲

如：document.addEventListener("click",fn1,false);

事件名稱有點區別，上面的是有on的，這個是沒有on

?

call函數下的一個方法，call方法第一個參數可以改變函數執行過程中內部this的指向

fn1()與fn1.call() 沒什么區別，都是函數的調用

fn1(){
alert(this);
}

fn1.call(1); 它會彈出一個1

如果傳入null，就不會改變this的指向

這個call方法在原型繼承里使用比較多。

把其封裝起來使用：

//事件的第二種形式，一個事件擁有多個函數 //evname 傳入不帶on的字符串 function bind(obj,evname,fn){if(obj.addEventListener){//第三個參數決定冒泡與捕獲obj.addEventListener(evname,fn,false);}else{//obj.attachEvent的this指向是window,不是綁定對象,所以需要call方法改變指向obj.attachEvent("on"+evname,function(){fn.call(obj);});}}

?

?

事件捕獲：

ie（非標準）沒有事件捕獲

obj.addEventListener("click",fn,false)

false,true 是冒泡和捕獲，就是執行的順序不一樣，捕獲是進來就是從父輩

級到目的對象文檔，冒泡是從目標文檔對象到document(父輩級)

?

false,true 控制是在事件進出時就執行還是冒泡時執行

false：冒泡 就是捕獲后冒泡時執行有共同事件的文檔對象

true：捕獲 就是點擊事件在捕獲時執行有共同事件的文檔對象

?

取消普通事件

簡單的對事件重新賦值

如：document.focumentElement.οnclick=null;

但綁定了多個后的取消方法：

ie:obj.attachEvent("onclick",fn1);

obj.detachEvent(事件名稱，事件函數)； //多個事件函數的取消，其中的

一個的方法；

標準下的：

obj.removeEventListener(事件，事件函數，是否捕獲)； 取消事件函數

但要說清楚是捕獲，因為可以同時對一個事件，同一個事件函數，設置冒泡

與捕獲方法，就是可以執行兩次同一事件函數，且不會覆蓋掉

鍵盤事件

onkeydown : 當鍵盤按下的時候觸發的

如果按下不抬起，那么會連續觸發，而在觸發連續觸發時有一個停頓的時間，

這是為了確認你是否連續觸發，而在某些時候，你需要去除停頓，

這里你可以使用定時器的思路去修改。

使用alert（）彈出的上次輸入的值

onkeyup : 當鍵盤抬起的時候觸發的

?

event.KeyCode : 數字類型，按鍵的值 鍵值

event.KeyCode只有一個值不能同時判斷兩個鍵盤值

event.ctrlKey / event.shiftKey / altKey 返回布爾值

當一個事件發生的時候，如果按下了ctrl,shift,alt就會返回true，否則false

不是所有元素都接受鍵盤事件的，能夠響應用戶輸入的元素，才能接受鍵盤事件，就是能夠獲得焦點的元素

而document是可以接受的

document.οnkeydοwn=function(){}

?

事件默認行為：

當一個事件發生的時候瀏覽器自己會默認做的事情怎么阻止？

1、當前這個行為是什么事件觸發的，然后在事件的處理函數中使用

return false;

oncontextmenu : 右擊菜單事件，當右擊菜單（環境菜單）顯示出來的時候觸發

?

如果再網頁上看到不同的菜單，就是先去除默認菜單，然后使用oncontextmenu事件

模擬出來的菜單

如：document.οncοntextmenu=function(){ ....... ....... return false; }

?

?

每日一推：

?圓形進度條：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>圓形進度條</title><!-- 本例子兼容性不好，基于css3的屬性的 --><style>/* clip是背景截取，被去除的部分，永遠去除，不是隱藏那部分，就算旋轉，被去除的部分也不會出現了，且截取到的背景出了截取范圍，是會像overflow一樣被隱藏掉。所以基于這個想法，做圓形進度條clip:rect(top,right,bottom,left);這里的clip需要自己體驗，才能知道它的效果。為什么會有兩個盒子呢？就是一個父盒子和子盒子。這是為了達到一個靜態截取，而一個動態的旋轉的，但這個這截取是為了獲得半個圓。那么就可以實現進度條了，剩下的就是js的效果*//* 以下是進度條的樣式 */.progress{width: 200px;height: 200px;margin: 0 auto;position: relative;background: #00aacc;border-radius: 50%;}.leftBox,.rightBox{position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.leftBox{clip:rect(0,100px,auto,0);}.rightBox{clip:rect(0,auto,auto,100px);}.mask{position: absolute;width: 150px;height: 150px;top: 25px;left: 25px;background: #fff;z-index: 2;border-radius: 50%;text-align: center;line-height: 150px;font-size: 30px;color: #0cc;}.left,.right{position: absolute;top: 0;left: 0;width: 200px;height: 200px;background: #0cc;border-radius: 50%;background:#0cc; }.left{clip:rect(0,100px,auto,0);transform: rotate(0deg);}.right{clip: rect(0,auto,auto,100px);transform: rotate(0deg);}</style><script type="text/javascript">window.onload=function(){var oLeft=document.querySelector(".progress .left"),oRight=document.querySelector(".progress .right"),oT=document.querySelector(".mask .text"),timer=null;num=0;num2=0;count=0;val=null;offOn=true;timer=setInterval(function(){/*這里做的不理想，不應該這樣傳參數的*/move({percentage:oT,left:oLeft,right:oRight, })},30);function move(json){if(num<=180 && offOn){json.right.style.transform="rotate("+num+"deg)";num++;}else{offOn=false;num2++;}if(num2<=180 && !offOn){json.left.style.transform="rotate("+num2+"deg)";}if(num2>180){clearInterval(timer);}count++;val=Math.floor(count*100/360); json.percentage.innerHTML=val;}}</script> </head> <body><div class="progress"><!-- 上面說的父盒子和子盒子就是leftBox和left和下面那個 --><div class="leftBox"><div class="left"></div></div><div class="rightBox"><div class="right"></div></div><div class="mask"><span class="text">0</span><span>%</span></div></div></body> </html>

?

倒計時的思路：

new Date() 當前系統的時間對象 就是本電腦的時間，前一秒與后一秒不一樣new Date() 數據類型object它低下的對象： 數據類型Number 年 getFullYear(); 月 getMonth()+1; 有點特殊，它是從零開始的，要加一日 getDate(); 星期 getDay();小時 getHours();分鐘 getMinutes();秒鐘 getSeconds();new Date(); 里面可以放值數字形式:new Date(2013,4,1，9,16,12); 字符串形式：new Date(“june 10,2013 12:12:12”);兩時間相減是毫秒 除1000為秒 t相減后除以1000的值 天：Math.floor(t/86400); 時：Math.floor(t%86400/3600); 分：Math.floor(t%86400%3600/60); 秒：t%60時間戳 getTime(); 返回的是1970年1月1號0點0分0秒0毫秒到現在的毫秒數一月:January 二月:February三月:March四月:April五月:May 六月:June 七月:July八月:August 九月:September 十月:October 十一月:November十二月:December

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>倒計時特效</title><script type="text/javascript">window.onload=function(){time();setInterval(time,1000); function time(){var f_date=new Date("2016/9/9 12:00");var n_date=new Date();var aLi=document.querySelectorAll('ul li');var total=(f_date.getTime()-n_date.getTime())/1000, h=num(Math.floor(total%86400/3600)), i=num(Math.floor(total%86400%3600/60)), s=num(Math.floor(total%60));str=h+":"+i+":"+s,aImg=document.getElementsByTagName("img");arr=str.split("");setTimeout(function(){aImg[2].src="./img/bg.jpg";aImg[5].src="./img/bg.jpg";},500);for(var i=0;i<arr.length;i++){if(arr[i]==":"){aImg[i].src="./img/colon.jpg";}else{aImg[i].src="./img/"+arr[i]+".jpg";}}}}function num(a){return a<10?"0"+a:""+a;}</script><style>ul{width: 500px;padding: 0;margin: 0 auto;list-style: none;overflow: hidden;}ul li{float: left;}ul li img{width: 50px;}</style> </head> <body><h1>距離下課時間還有：</h1><ul><li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li></ul> </body> </html>

?

圖片自備。這個做的不是很好。 總感覺還可以做的更好，更靈活。javascript是一門很靈活的語言，所以才容易出錯，它松散型有時讓人難以理解。

放大鏡效果：

?

?

<!doctype html> <html lang="en"> <head><meta charset="UTF-8" /><title>Document</title><!-- 做放大鏡效果，首先是把布局寫好，在基于布局編寫js而js里的主要是事件和event的鼠標位置的獲取后進行處理，然后按兩張圖片的比例來確定一個圖片的位置對應另一張圖片的位置，實現放大鏡的效果。如果懂原型，可以把它封裝組件，那樣就是對放大鏡的效果地方調用它，不懂也可以封裝，只是維護性差些--><style>#div{width: 800px;margin: 0 auto;overflow: hidden;position: relative;}#div2{float: left;margin-right: 10px;width: 300px;height: 300px;padding: 10px;border: 2px solid #eee;}#div3{width: 300px;height: 300px;position: relative;}#div3 .mark{position: absolute;top: 0;left: 0;width: 300px;height: 300px;z-index: 10000;}#div3 .smallbox{width: 50px;height: 50px;background: #eee;border: 1px solid #000;opacity: 0.3;filter: alpha(opacity=30);position: absolute;top: 0;left: 0;display: none;}#div3 img{width: 300px;height: 300px;}#div4{width: 400px;height: 400px;position: relative;float: left;display: none;overflow: hidden;}#div4 img{width: 600px;height: 600px;position: absolute;top: 0;left: 0;}</style><script>window.onload=function(){var oDiv3=document.getElementById("div3");var oMark=getClass(oDiv3,"mark")[0];var oSmallbox=getClass(oDiv3,"smallbox")[0];var oImg=getClass(document,"big")[0];var oDiv4=document.getElementById("div4");oMark.onmousemove=function(ev){oDiv4.style.display="block";oSmallbox.style.display="block";ev=ev||event;var l=0;var t=0;var offX=ev.clientX-getPos(this).left-oSmallbox.offsetWidth/2;var offY=ev.clientY-getPos(this).top-oSmallbox.offsetHeight/2;if(offX<=0){offX=0}if(offX>=this.offsetWidth-oSmallbox.offsetWidth){offX=this.offsetWidth-oSmallbox.offsetWidth;}if(offY<=0){offY=0}if(offY>=this.offsetHeight-oSmallbox.offsetHeight){offY=this.offsetHeight-oSmallbox.offsetHeight;}oSmallbox.style.left=offX+"px";oSmallbox.style.top=offY+"px";l=offX/(this.offsetWidth-oSmallbox.offsetWidth); t=offY/(this.offsetHeight-oSmallbox.offsetHeight); oImg.style.left=-l*(oImg.offsetWidth-oDiv4.offsetWidth)+"px";oImg.style.top=-t*(oImg.offsetHeight-oDiv4.offsetHeight)+"px";document.title="x:"+l+",Y:"+t;}oMark.onmouseout=function(){oDiv4.style.display="none";oSmallbox.style.display="none";}}function getClass(obj,classname){var aTag=obj.getElementsByTagName("*");var arr=[];for(var i=0;i<aTag.length;i++){if(aTag[i].className==classname){arr.push(aTag[i]);}}return arr;}function getPos(obj){var obj0=obj;var pos={"left":0,"top":0}while(obj0){pos.left+=obj0.offsetLeft;pos.top+=obj0.offsetTop;if(obj0){obj0=obj0.offsetParent;}}return pos;}</script> </head> <body> <!-- 這是左邊的盒子 --><div id="div"><div id="div2"><div id="div3"><span class="mark"></span><span class="smallbox"></span><img src="./4.jpg" alt="" /></div></div><!-- 這是右邊的盒子,右邊盒子是放大圖片的 --><div id="div4"><img src="./4.jpg" alt="" class="big" /></div></div> </body> </html>

圖片自備，修改Img標簽里的路徑即可。

?==||誒~語句表達能力有待提高。語文是體育老師教的。

轉載于:https://www.cnblogs.com/zhangzhicheng/p/5855049.html

總結

以上是生活随笔為你收集整理的javascript基础07的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。