DOM文件物件模型 | Javascript

標籤：other   links   div   擷取   dir   不可   some   function   刪除元素   

#   在學過python這樣的物件導向程式設計語言之後,可以用其思維方式來學習Javascript;#   DOM文件物件模型就相當於一個包,或者模組,定義了許多類，對網頁做操作;

# Document類型# document對象時HTMLDocument的一個執行個體;# 1.兩種訪問子節點的捷徑；#   ①documentElement#     var html = document.documentElement直接取得<html>的引用;#   ②childNodes列表訪問文件項目#  附:document對象還有一個body屬性指向<body>元素的引用;#     var body = document.body# 2.HTMLDocument繼承Document對象,在其基礎之上添加了3個屬性;#   ①URL:返回完整的URL#     var url = document.URL#   ②domain:返回網域名稱#     var domain = document.domain#   ③referer:返回連結至當前頁面的URL#     var referer = document.referer#   以上3個屬性均儲存在HTTP的要求標頭中;# 3.尋找元素#   ①getElementById() 根據id特性返回元素的引用,id相同僅返回第一個;#   ②getElementByTagName()#     返回一個HTMLCollection對象,作為一個包含相同標籤的集合;#     怎麼擷取指定位置元素的某個特性？#     ①根據下標擷取元素位置,再取某個特性;#       alert(images[0].src)#       其實,調用了item()方法,等同於:alert(images.item(0).src)#     ②根據name特性擷取元素,再取某個特性#       alert(images[‘myImage‘])#       其實,調用了HTMLCollection對象的namedItem()方法,#       等同於:alert(images.namedItem(‘myImage‘))#   附:‘*‘表示尋找所有;#   ③getElementByName() 根據name特性返回元素,返回一個NodeList;# 4.特殊集合# document.anchors 返回所有帶有name特性的<a>元素# document.forms 返回所有<form>元素# document.images 返回所有<img>元素# document.links 返回所有帶href特性的<a>元素# 5.文檔寫入(將輸出資料流寫入網頁中)#   ①write()#   ②writeln() 寫入的字串末尾添加分行符號\n#   註：寫入html標籤時,需要加入逸出字元#   例:#   <script>document.write("hello world")</script>#   <!-- 寫入 -->#   <title>document.write()</title>#   註：如果在讀取完整個文檔之後寫入將重寫頁面;#   window.onload = function(){document.write("hello world")};#   該事件使讀取文檔只有再執行寫入;

# Element類型# 1.HTML元素都是由HTMLElement對象或其子類表示的;# 2.取得特性#   ①getAttribute() 擷取特性的值(自訂特性加上data-首碼以便驗證)#   附:兩類特殊的特性:#      ①style. 通過CSS為元素指定樣式;#        getAttribute()返回CSS文本,通過屬性訪問,返回一個對象;#      ②onclick等事件;#        getAttribute()返回js代碼,通過屬性訪問,返回一個函數;# 3.設定特性#   ①setAttrbute() 參數:特性名,值#     如果特性不存在則建立並設定;#     dir.setAttribute(‘id‘,‘someOtherId‘) 特性名自動轉換成小寫#     因為所有特性都是屬性,所以可以直接賦值:#     div.id = "someOtherId"#     但是,這種方式添加自訂屬性就不是屬性;#   ②removeAttribute()#     徹底刪除元素的特性;# 4.建立元素#   document.createElement()#   ①var div = document.createElement(‘div‘)#   ②div.id = "myNerDiv" # 不再頁面中展示#   ③document.body.appendChild(div) # 添加特性至文檔樹# 5.元素子節點#   注:IE外其他瀏覽器將元素間空白符作為文本節點,#      所以不可通過childNodes屬性遍曆子節點;#   擷取子節點元素#   var ul = ducument.getElemntById("myList")#   var items = document.getElementByTagNmae("li")

 

DOM文件物件模型 | Javascript