課堂筆記 - Oarcle - 09 BOM(Broswer Object Model) and DOM(Document Object Model)

方法:html

框窗數組

1.警告框緩存

window.alert("msg");app

2.確認框post

window.confirm("msg");url

3.詢問框code

window.prompt("msg","defaulvalue");orm

 

頁面htm

1.打開一個窗口對象

window.open()

2.在子窗口中使用,表示父窗口的window對象

window.opener

3.關閉當前窗口

window.close()

 

定時任務

1.定時任務

var taskid = window.setTimeout(function,ms);

2.間隔執行任務

var taskid = window.setInteval(function,ms);

3.清除定時任務

window.clerTimeout(taskid);

4.清除間隔執行任務

window.clearInteval(taskid);

 

DOM(Document Object Model)

結點概念:

整個文檔就是由層次不一樣的多個節點組成,能夠說結點表明了所有內容。

結點類型:

1.元素結點

2.屬性結點

3.文本結點

 

結點的注意點:

1.文本結點和屬性結點都看做元素的子結點

2.咱們通常所說的結點指的就是元素結點,將html標籤看做是一個對象,並用」結點「來稱呼它

2.結點的關係有:父子關係,兄弟關係

 

一、獲取元素結點

1)直接獲取

document.getElementById()

document.getElementByName()

document.getElementByTagName()

2)間接獲取

父子關係

firstChild lastChild childNodes

子父關係

parentNode

兄弟關係

nextSibling previousSibling

 

二、操做屬性結點

1)經過對象」.「屬性,來操做屬性

優:能夠動態獲取用戶修改的屬性值

缺:不能獲取自定義屬性的值

2)getAttribute("key") setAttribute("key","value") removeAttribute("key")

優:能夠獲取自定義屬性的值

缺:不能動態獲取用戶修改的屬性值

 

三、處理文本結點

1)經過對象.innerText 獲取標籤內部的文本信息

2)經過對象.innerHTML 獲取標籤內部的HTML代碼

 

四、動態改變DOM結構

1)建立一個結點對象

document.createElement("標籤名")

2)(父結點)追加子結點對象

fatherNode.appendChild(子結點對象)

3)(父結點)在指定結點前添加子結點

faterNode.insertBefore(新結點對象,參考結點對象)

4)(父結點)替換舊的子結點對象

faterNode.replaceChild(新結點對象,舊結點對象)

5)(父結點)刪除舊結點對象

fatherNode.removeChild(舊結點對象)

 

五、動態改變元素的CSS樣式(不重要)

1)咱們經過對象。style屬性操做對象的CSS樣式:樣式名稱中有」-「將」-「去掉,並將」-「後一個字母轉換爲大寫來做爲新的樣式名稱

2)咱們但願經過class爲一個對象添加一個class樣式,添加屬性名是className,而並不是class(class是JS中關鍵字,並能做爲屬性名存在)

6.表單操做
    1)表單獲取方式
1.document.getElementById()
2.document.forms[index];
3.document.forms[form_name]
4.document.form_name
2)表單對象的屬性
    id
    name
    action
    method
get方式和post方式的區別
1.get方式會將提交的數據以(?name1=value1&name2=value2...)放在url後面
  post方式會將數據以(name1=value1&name2=value2...)放在「請求實體」中
2.get將數據放在url後,因爲url是有長度的,且url是可見,因此get方式不適合發送一些敏感數據
  post方式將數據放在「請求實體」中,理論上是無限制,post方式適合發送一些敏感數據
3.get方式請求會有緩存
  post方式請求不會有緩存
        enctype
1.application/x-www-form-urlencoded(默認、且經常使用)
    不管post方式仍是get方式提交,表單數據均以(name1=value1&name2=value2...)組織數據
2.multipart/form-data(表單上傳文件時)
    1)get方式,表單以(name1=value1&name2=value2...)組織數據
    2)post方式,表單數據會放在相似於「------WebKitFormBoundaryGSF0lHBAvwWyAcuV」字符串中間
3.text/plain
    1)get方式,表單以(name1=value1&name2=value2...)組織數據
    2)post方式,表單數據會以name1=value2,name2=value2,數據之間沒有鏈接符號
    3)表單對象的方法
        submit()
        reset()
    4)表單對象的事件
1.對於表單中設置的提交、重置按鈕,會觸發onsubmit事件、onreset事件
2.在表單外部經過submit()提交表單不會觸發onsubmit事件
3.在表單外部經過reset()重置表單會觸發onreset事件
4.咱們將onsubmit事件、onreset事件返回一個false就能夠阻止事件的執行

7.表單域操做     1)獲取表單域對象 1.document.getElementById() 2.formObj.elements[index] 3.formObj.elements[formarea_name] 4.formObj.formarea_name     2)表單域對象的屬性 1.readonly     1)input對象 設置了readonly="readonly",則該表單域只讀(用戶不能修改其value屬性),可是能夠提交     2)經過js爲input對象添加「只讀」屬性,應經過「對象.readOnly = true」添加     3)readonly="readonly" 只能使用在<input type='text'> 及 <textaread>標籤中 2.disabled     1)input對象 設置了disabled="disabled",則該表單域不可用(用戶不能修改其value屬性)且不能提交     2)經過js爲input對象添加「不可用」屬性,應經過「對象.disabled = true」添加     3)disabled="disabled"能夠將全部的表單域失效 3.name     1)用於獲取該表單域     2)只有設置了name屬性的表單域才能夠提交 4.value     1)用戶輸入的內容就是value,表單會提交該屬性的值     2)select標籤的value值就是當前選中的option的value值     3)textarea沒有value屬性,提交時提交標籤中間的文本值 5.form     用於獲取表單域所在的表單對象 6.type     瀏覽會根據type的值不一樣,顯示錶單域也不一樣 7.checked     1)對於<input type="radio"> 和 <input type="checkbox">來說,checked="checked"表示默認選中該選項     2)<input type="radio"> 只能給同組的一個添加 checked="checked"     3)<input type="checkbox"> 能夠給同組的全部添加 checked="checked"     4)經過js爲對象添加「默認選中」屬性,應經過「對象.checked = true」添加 8.select標籤的屬性     1)selectedIndex表示當前選中的option的索引     2)options表示全部option標籤對象的一個數組     3)length表示右多少個下拉列表項 9.option標籤的屬性     1)value 就是選項的值,提交時會提交該屬性的值     2)text 就是option標籤中間文本值,相似於innerText     3)selected="selected" 表示頁面加載時默認的選項     3)表單域對象的方法         onfocus()         onblur()     4)表單域對象的事件         不一樣表單域對象經常使用的事件不一樣,參考js事件

相關文章
相關標籤/搜索