DOM對象和window對象


 


本文內容:

  • DOM對象
  • Window 對象

 

首發日期:2018-05-11


DOM對象:

  • DOM對象主要指代網頁內的標簽【包括整個網頁】
    • 比如:document代表整個 HTML 文檔,用來訪問頁面中的所有標簽。
    • 比如:form代表 <form> 元素

 

這里主要介紹使用document來查找標簽和操作標簽:

 

查找標簽:

  • 根據id查找標簽:getElementById()
  • 根據Name屬性查找標簽(多個):getElementsByName()
  • 根據標簽名查找標簽(多個):getElementsByTagName()
  • 根據class屬性查找標簽(多個):getElementsByClassName()

 

操作標簽:

結點操作:

  • 創建新的標簽節點document.createElement('標簽名');image
  • appendChild(x):給標簽增加孩子標簽,x可以是html格式的,也可以是一個結點變量。image
  • 刪除結點:removeChild(x)image
  • 獲取第一個孩子結點:firstChildimage【注意:注釋、回車等都算結點。】
  • 獲取最后一個孩子結點:lastChild
  • 獲取所有孩子結點:childNodes
  • 獲取前一個兄弟結點:previousSiblings
  • 獲取下一個兄弟結點:nextSiblingsimage
  • 獲取父結點:parentNode

 

屬性和樣式操作:

  • 修改樣式:style.樣式=值image【對於名字長的,名字后面那個單詞要大寫,比如backgroundColor】
  • 修改屬性:setAttribute(屬性名,屬性值)image
  • 獲取屬性:getAttribute(屬性名)image
  • 刪除屬性:removeAttribute(屬性名)image

 

 

文本操作:

  • 獲取或修改標簽內的html內容:innerHTMLimage
  • 修改內部的文本內容:image

 

 


Window 對象:

  • Window 對象表示瀏覽器窗口
  • Window 對象一般與瀏覽器窗口的操作相關,比如提示框,提示框也是非網頁內容。
  • 但凡是涉及瀏覽器的,都通過window對象來操作。

 

 

location位置對象:

  • 常用屬性:
    • 獲取當前網頁的地址:href
  • 常用方法:
    • 刷新網頁:reload
    • 加載新網頁:assign(url)

 

定時器設置:

  • 設置一次性定時器setTimeout(執行代碼,毫秒數)
  • 設置重復運行的定時器setInterval(執行代碼,間隔毫秒數)
  • 清除一次性定時器:clearTimeout(定時器名)
  • 清除重復運行的定時器:clearInterval(定時器名)

 

 

對話框設置:

  • 彈出一個提示框:alert(提示內容)image
  • 彈出一個詢問框(有確認和取消按鈕):confirm(提示內容)image
  • 彈出一個輸入框:prompt(提示內容),會把輸入的內容返回image
<input id='i1' type="button" value="點擊" onclick="alert('提示內容')">
<input id='i2' type="button" value="點擊2" onclick="confirm('提示內容')">
<input id='i3' type="button" value="點擊3" onclick="prompt('提示內容')">

 

窗口控制:

  • 頁面滾動指定長度:ScrollBy(水平偏移量[,垂直偏移量])

 

 



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM