1.節點及類型

1） 文檔節點 整個html文檔

2） 元素節點：html文檔中的html標簽

3） 屬性節點：元素的屬性，可以直接通過屬性的方式操作

4） 文本節點：是元素節點的子節點，其內容為文本

2.事件：用戶和瀏覽器之間的交互行為

1） 交互事件的定義1：onclick :當鼠標點擊的時候發生事件；如下

<button id="bt" onclick=alert("hello")>你好！</button>

2） 交互事件的定義2：ondblclick：當鼠標雙擊是發生事件

<button id="bt" ondblclick=alert("hello")>你好！</button>

3) 交互事件的定義3：onmousemove :當鼠標移動到接近的位置的時候發現相應的事件

<button id="bt" onmousemove=alert("hello")>你好！</button>

以上方法不建議使用:耦合性太強；

3.獲取元素節點

3.1通過doucument調用：

1） Document.getElementById:根據id的屬性獲取對應的單個節點 如下：

var bt=document.gettElementById（“id”）；

2） document.getElementsByTagName:根據標簽名獲取指定節點名字的數組，數組對象的length屬性可以獲取數組的長度 如下：

var lis= document.getElementsByTagName("li")；alert(lis.length); 可以用於列表等

3） document.getElementsByname:根據標簽的名稱獲取指定節點名稱的數組，數組對象length屬性可以獲取數組的長度 例如：

var genderNodes=document.getElementsByName("gender"); alert(genderNodes.length); 可以用於多選框等

4） 其它兩個方法ie不支持，所以不建議使用

5） body：獲取body的屬性，document.Body

6） documentelement:對應的是html的根標簽，document. Documentelement

7） all：代表的是頁面中所有的元素 document.all

8） getelementsbyclassname()：根據元素的class屬性值查詢一組元素節點對象document. Getelementsbyclassname(“class”) ie8及以下不支持

9） queryselector（）可以通過css選擇器字符串作為參數；document. queryselector（”div.box”） ie8及以上都支持，但是這個方法對於倘若有多個元素符合這個條件，那麽只返回第一個

10） queryselectorall（”div.box”） 針對queryselector（）而言可以查詢所有，放入數組中

3.2 通過元素節點調用

1） GetElementsByTagName（）方法：返回當前節點的指定標簽名的後代節點 與document的調用方式相同；但是範圍不同；如下

window.onload=function(){

var bt=document.getElementById("bt");

bt.onclick=function (){

var city=document.getElementById("city");

var lis=city.getElementsByTagName("li");

for (var i=0;i<lis.length;i++) {

alert(lis[i].innerHTML);}}}

2） ChildNodes屬性：表示當前節點的所有子節點，包含文本在內的所有節點，例如</li>後的回車，但是ie8及以下的瀏覽器中不會將同上的回車空白等當為子節點

window.onload=function(){

var bt=document.getElementById("bt");

bt.onclick=function (){

var city=document.getElementById("city");

var lis=city.childNodes;

for (var i=0;i<lis.length;i++) {

alert(lis[i].innerHTML);

}

}

}

3） FirstChild屬性：表示當前節點的第一個子節點；包含空白；

4） Firstelementchild屬性：表示當前節點的第一個子元素，但是不知此ie8及以下的瀏覽器；

5） Lastchild屬性：表示當前節點的最後一個子節點；包含空白

6） lastelementchild屬性：表示當前節點的最後一個子元素，但是不知此ie8及以下的瀏覽器

7） Children屬性：表示當前節點的所有子元素，這裏的元素指的是標簽，如下：

window.onload=function(){

var bt=document.getElementById("bt");

bt.onclick=function (){

var city=document.getElementById("city");

var lis=city.children;

for (var i=0;i<lis.length;i++) {

alert(lis[i].innerHTML);}}}

8） Parentnode屬性：表示當前節點的父節點；父節點沒有文本的可能只有可能是元素；

9） Previoussibling屬性：表示當前節點的前一個兄弟節點，可能獲取空白文本

10） Previouselementsibling屬性：表示當前節點的前一個兄弟元素，ie8及以下不支持

11） Nextsibling屬性：表示當前節點的後一個兄弟節點，可能獲取空白文本

12） Nextelementsibling屬性：表示當前節點的後一個兄弟節點，ie8及以下不支持

13） Innerhtml屬性:輸出文本內容

14） Innertext屬性：同innerthml類似，不同的是他會將標簽都去除

4.頁面加載說明

Onload：整個頁面加載完成後加載

綁定方式：image window layer 都可以，但是我們常用的是window 綁定：window.onload;

5.獲取元素的屬性及設置

1） 獲取class，需要改為相應的改為classname；如下

<button id="bt" name="張三" class="類" >你好！</button>

window.onload=function(){

var bt=document.getElementById("bt");

bt.onclick=function (){

var bt= document.getElementById("bt");

alert(bt.className);}}

2） 除上述較為特殊之外，獲取id，name等屬性方法都類似如下

<button id="bt" name="張三" class="類" >你好！</button>

window.onload=function(){

var bt=document.getElementById("bt");

bt.onclick=function (){

var bt= document.getElementById("bt");

alert(bt.name);}}

3） 獲取文本信息，如下

<button id="bt" name="張三" class="類" >你好！</button>

window.onload=function(){

var bt=document.getElementById("bt");

bt.onclick=function (){

var bt= document.getElementById("bt");

alert(bt.innerHTML);}

4） 設置屬性的內容和對象相似；

6.dom的增刪查改

1) createlement（）屬性：創建一個元素節點對象 var div= document. createlement（”div”）

2) createtextnode()屬性：創建文本節點 var text=document. createtextnode(“text”)

3) appendchild（）屬性：可以向一個父節點添加一個子節點 父節點. appendchild（子節點） div. appendchild（text） 默認加載在最末位置

4) insertbefore（）屬性：在指定的子節點前面插入新的節點 父節點. insertbefore（新子節點，原本的子節點）

5）removechild（）屬性： 刪除子節點 父節點.removechild（子節點）

6）innerhtml屬性：添加 var names=document。Getelementbyid（names“”）

names.innerhtml+=(“<li>張三</li>”) 有缺陷，因為都是新建，改善方法如下

var li=document.createelement(“li”); li.innerhtml=”廣州”;city.appendchild(li);

7）confirm（）用於彈出確認或者取消的彈出框 confirm會返回一個返回值，如果點擊確認為true否則是false；

7. 取消網頁的默認跳轉：在事件函數的末尾設置renturn false 也可以在href屬性中填寫JavaScript：；的格式書寫；

在文本鏈接中添加屬性

href=”javascript”;

8. 修改及讀取css的樣式

語法 ：元素.style.width 註意css的樣式名中有減號在js中不合法的，需要將這樣樣式名修改為駝峰命名法 例如background-color 該我backgroundColor，倘若樣式中寫了！important 則此時樣式會有最高的優先級，讀方式box1.style.width

通過style屬性讀取的都是內聯樣式 無法讀取樣式表中的樣式，currentStyle獲取當前顯示的樣式如果沒有設置相應的格式那麽會讀取默認的值 只有ie支持；其他瀏覽器都不支持；在其他瀏覽器中可以使用getcomputedstyle（）這個方法來獲取元素的當前屬性，這個是window的方法，可以直接使用， 這其中需要兩個相應的參數，第一個，要獲取樣式的元素，第二個為偽元素，一般是選擇null，該方法會返回一個對象，該對象中封裝了當前元素對應的樣式，例如getcomputedstyle（box1,null）.width, currentStyle和getcomputedstyle（）有一定的區別，getcomputedstyle（）在沒有設置寬度是 讀取的是auto，而 currentStyle獲取的值是當前顯示的像素值； getcomputedstyle（）不支持ie8及以下的ie瀏覽器

自定義通用式：

Function getstyle(obj,name){

If(window.getComputedStyle){

return getComputedStyle(obj,null)[name]；}else{

return obj.currunStyle【name】；}

}Alert(getStyle(box1,”width”))

ClientWidth clientHeight 這兩個屬性可以獲取元素的可見寬度和高度，這是屬性只能讀不能改

• offsetwidth offsetheigth包括元素整個的寬度和高度 只能讀不能改
• offsetparent 獲取當前元素定位的父元素 獲取當前元素最近的祖先元素 只能讀不能改
• offsetleft 當前元素相對於定位元素的水平偏移量 只能讀不能改
• offsettop 當前元素相對定位元素的豎直偏移量 只能讀不能改

scrollheight 滾動元素的高度 只能讀不能改

scrollwidth 獲取滾動的寬度 只能讀不能寫

scrollleft 獲取水平滾動條滾動的相對距離

scrolltop 獲取垂直滾動條滾動的距離

clientwidth 等於設置的寬度減去滾動條的距離

9. 冒泡

大部分事件都是向上傳遞的 大部分冒泡是有用的

如果不希望冒泡可以通過對象相應的取消冒泡 cancelbubble

事件的冒泡可以減少事件的綁定，可以減少綁定的次數

10. Event事件

target表示觸發的對象

• onscroll：滾動條滾動時觸發

事件對象：

Keycode 相應的可以獲取按鍵的編碼

Onkeydown 某個按鍵按下 會連續觸發

Onkeyup 每個時間松開 不會連續觸發

Onmousedown 當鼠標按下時 不松開

Onmouseup 當鼠標松開時觸發

Onmousemove：當鼠標移動時觸發

Clientx 鼠標觸發時的鼠標的x坐標

Clienty 鼠標出發時的鼠標的y坐標

Onmousewheel 鼠標滾輪滾動時觸發 在火狐中不兼容 dommousescroll來綁定事件

火狐需要通過addeventlistener 進行次相應的綁定

If(!event){event=window.event}

function（event）{var x=window.event.clientx};

ie8沒有直接傳遞數據，而是保存在window中

11. Bind綁定

使用 對象.事件=函數的形式綁定響應函數

他只能同時為一個元素的一個事件綁定

Addeventlistener （） 通過這個方法也可以為元素綁定函數

事件觸發的字符串 不要on

回調函數當時間觸發時該函數被調用

是否再捕獲觸發時間 需要一個布爾值 一般都傳false

Bt.addeventlistener （“click”，function（）{

}，false）

Bt.addeventlistener （“click”，function（）{

}，false）

先綁定的先執行，後綁定的後執行，相當於java中的一個集合，在集合中添加相應的元素 ie8及以下不支持

在ie8及以下中 可以用attachevent解決此問題 用法都差不多，這裏的事件需要的on

與上不同的是後綁定先執行

12. bom

1） bom對象 window navigator location history screen

2） window 整個瀏覽器的窗口 也是網頁中的全局變量

3） navigator 代表的當前瀏覽器的信息 通過對象可以獲取相應的信息 能識別瀏覽器 可以用useragent獲取瀏覽器信息 activexobject只有ie裏面有 Boolean變成fasle，可以利用是否包含某個屬性

4） location 代表的當前的地址欄信息 也可以操作瀏覽器頁面 設置location相應的可以跳轉網頁（也可以用相對路徑）reload刷新頁面 assign也是重定向頁面，刷新頁面有緩存，也可以設置清除緩存 如果在reload方法中傳遞一個true，清空緩存，replace替換，也是可以用新的頁面替換跳轉頁面，replace跳轉後不能回退，replace不會生成回退記錄

5） history 瀏覽器的歷史記錄 可以通過該對象獲取操作瀏覽器的歷史記錄，由於隱私的原因，該對象不能獲取具體的歷史記錄 只能操作瀏覽器向前或者向後，而且該操作只在當次訪問時有效 其中的length屬性可以獲取當前的訪問數量 back（）跳轉到後一個頁面 forward（）跳轉到下一個頁面 go（）可以相應的跳轉到指定頁面 1表示向前跳轉1個頁面 2是向前跳轉兩個頁面 -1是向後跳轉一個頁面 -2是向後跳轉兩個頁面

6） screen 可以獲取顯示相關的信息

13. 定時器

Setinterval：定時調用 可以將一個函數每個一段時間調用一次類似java的sleep

參數 回調函數 每次回調的時間 單位為毫秒

Clearinterval（定時對象） 關閉定時器 每點擊一次就會調用一次 我們只能關閉最後一次定時器 只希望開啟一個定時器 開啟定時器之前關掉一個定時器

Settimeout：延時調用，其他類似setinterval 延時調用只會執行一次 這是於setinterval的區別

14 類的操作

1） classname 修改值

2） 向一個class中添加屬性值 addclass（obj，cn）添加class屬性的對象 obj要添加class的元素，cn要添加的class的值

3） hasclass（obj，cn）判斷obj中有沒有cn這個class 有就返回true 沒有就返回false

4） removeclass（obj，cn） 刪除指定的class屬性

5） tagclass（obj，cn）沒有就添加 有就刪除相應的class

JavaScript基礎部分3