DOM文檔對象模型 | Javascript
阿新 • • 發佈：2018-01-19
字符串 med on() forms 指向 gpo create 對象模型 特殊
# 在學過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