跳到主要內容

[轉貼] Javascript HTML document 物件屬性解說

本文轉貼自:Tech Minute
 
為了讓自己以後可以方便搜尋,因此將本文記錄下來。
內容為概述javascript 對於document 的各項屬性(attribute)及事件(event)特性

———————————————————————
注:頁面上元素name屬性和JavaScript引用的名稱必須一致包括大小寫
否則會提示你一個錯誤資訊 “引用的元素為空或者不是物件\\\\\”
———————————————————————
物件屬性
document.title //設置文檔標題等價於HTML的title標籤
document.bgColor //設置頁面背景色
document.fgColor //設置前景色(文本顏色)
document.linkColor //未點擊過的鏈結顏色
document.alinkColor //啟動鏈結(焦點在此鏈結上)的顏色
document.vlinkColor //已點擊過的鏈結顏色
document.URL //設置URL屬性從而在同一視窗打開另一網頁
document.fileCreatedDate //檔建立日期,唯讀屬性
document.fileModifiedDate //檔修改日期,唯讀屬性
document.fileSize //檔大小,唯讀屬性
document.cookie //設置和讀出cookie
document.charset //設置字元集 簡體中文:gb2312
———————————————————————
常用物件方法
document.write() //動態向頁面寫入內容
document.createElement(Tag) //創建一個html標籤物件
document.getElementById(ID) //獲得指定ID值的對象
document.getElementsByName(Name) //獲得指定Name值的對象
document.body.appendChild(oTag)
———————————————————————
body-主體子物件
document.body //指定文檔主體的開始和結束等價於body>/body>
document.body.bgColor //設置或獲取物件後面的背景顏色
document.body.link //未點擊過的鏈結顏色
document.body.alink //啟動鏈結(焦點在此鏈結上)的顏色
document.body.vlink //已點擊過的鏈結顏色
document.body.text //文本色
document.body.innerText //設置body>…/body>之間的文本
document.body.innerHTML //設置body>…/body>之間的HTML代碼
document.body.topMargin //頁面上邊距
document.body.leftMargin //頁面左邊距
document.body.rightMargin //頁面右邊距
document.body.bottomMargin //頁面下邊距
document.body.background //背景圖片
document.body.appendChild(oTag) //動態生成一個HTML物件
常用物件事件
document.body.onclick=”func()” //滑鼠指標單擊物件是觸發
document.body.onmouseover=”func()” //滑鼠指標移到物件時觸發
document.body.onmouseout=”func()” //滑鼠指標移出物件時觸發
———————————————————————
location-位置子物件
document.location.hash // #號後的部分
document.location.host // 功能變數名稱+埠號
document.location.hostname // 功能變數名稱
document.location.href // 完整URL
document.location.pathname // 目錄部分
document.location.port // 埠號
document.location.protocol // 網路協定(http:)
document.location.search // ?號後的部分
documeny.location.reload() //刷新網頁
document.location.reload(URL) //打開新的網頁
document.location.assign(URL) //打開新的網頁
document.location.replace(URL) //打開新的網頁
———————————————————————
selection-選區子對象
document.selection
———————————————————————
images集合(頁面中的圖像)
a)通過集合引用
document.images //對應頁面上的img標籤
document.images.length //對應頁面上img標籤的個數
document.images[0] //第1個img標籤
document.images[i] //第i-1個img標籤
b)通過nane屬性直接引用
img name=”oImage”
document.images.oImage //document.images.name屬性
c)引用圖片的src屬性
document.images.oImage.src //document.images.name屬性.src
d)創建一個圖像
var oImage
oImage = new Image()
document.images.oImage.src=”1.jpg”
同時在頁面上建立一個img /標籤與之對應就可以顯示
———————————————————————-
forms集合(頁面中的表單)
a)通過集合引用
document.forms //對應頁面上的form標籤
document.forms.length //對應頁面上/formform標籤的個數
document.forms[0] //第1個/formform標籤
document.forms[i] //第i-1個/formform標籤
document.forms[i].length //第i-1個/formform中的控制項數
document.forms[i].elements[j] //第i-1個/formform中第j-1個控制項
b)通過標籤name屬性直接引用
/formform name=”Myform”>input name=”myctrl”/>/form
document.Myform.myctrl //document.表單名.控制項名
c)訪問表單的屬性
document.forms[i].name //對應form name>屬性
document.forms[i].action //對應/formform action>屬性
document.forms[i].encoding //對應/formform enctype>屬性
document.forms[i].target //對應/formform target>屬性
document.forms[i].appendChild(oTag) //動態插入一個控制項
document.all.oDiv //引用圖層oDiv
document.all.oDiv.style.display=”" //圖層設置為可視
document.all.oDiv.style.display=”none” //圖層設置為隱藏
document.getElementId(”oDiv”) //通過getElementId引用對象
document.getElementId(”oDiv”).style=”"
document.getElementId(”oDiv”).display=”none”
/*document.all表示document中所有物件的集合
只有ie支援此屬性,因此也用來判斷瀏覽器的種類*/
圖層物件的4個屬性
document.getElementById(”ID”).innerText //動態輸出文本
document.getElementById(”ID”).innerHTML //動態輸出HTML
document.getElementById(”ID”).outerText //同innerText
document.getElementById(”ID”).outerHTML //同innerHTML


留言

  1. 網誌管理員已經移除這則留言。

    回覆刪除
  2. Hello

    Awesome blog, great write up, thank you!

    回覆刪除

張貼留言

這個網誌中的熱門文章

面試者如何挑戰大工程師時代來臨?

面試者如何挑戰大工程師時代來臨? 全世界都在倡導轉職成為工程師,似乎轉職成為工程師就成為職場的救贖,真的是如此嗎?讓老衲來杠給各位聽。 最近有位好久不見的小朋友,是 2000 年出生的小蔡,對於即將面臨到面對職場的挑戰開始關心起技術,他開始尋找比較適合自己的領域,同時也開始在思考到底為了接下來的就職小蔡該如何準備。 詢問我說是不是可以考慮軟體開發工程師這條路線 對於他的詢問,反而引起我的注意, 這讓我開始思考並映射於最近招募的經驗,軟體開發此領域是不是對於每個人都是可以擔任的職啀,這邊分享一些自己的看法希望對各位有所幫助。 全民工程師這件事情 在全球景氣低迷的狀況下,的確特別在這一年大家會很有感覺萬物齊漲,薪水不漲,薪資就是一直停滯不前。 很多時候,在不同的領域中,會發現整個薪資就算是擔任了管理職務主管你也會面臨到薪資的強大屏障在自己面前。 這個時候, 軟體工程師年薪百萬口號 似乎就成了一種救贖。 好像成為了工程師就可以達到年薪百萬,在家輕鬆工作,不用打卡也不用受到風吹雨淋,隨時想工作就可以工作,每個月又有固定薪水入帳,感受到類財富自由,人生的美好。 如果能夠爭取到跨國公司的職位,這份薪水有可能還可以上看每個月十多萬以上,甚至是往上也是極度有可能的事情,人生美好層次又再度提高了起來。 但這件事情是真的每個人都可以達到嗎? 還是這就是另外一種性存者偏差呢? 亦或者這些人其實是金字塔頂端的小眾? 每份履歷都像是同一種履歷 最近在最近幾年在面試工程師的時候特別會看到許多轉職者,一開始履歷裡面看到相關的作品一開始會覺得十分的驚艷, Wow, 現在的新手就可以做到如此精美的畫面,這些畫面是我當初用 Bootstrap 也做不出來的東西,許多的互動體驗好的一個不行,做出來的頁面配色和對齊也是極致。 但是隨著時間推移,多看了幾封履歷之後,就會發現在各大技術養成學院出來的學生履歷成果內容如出一轍,在面試的過程中也會詢問許多關於框架的底層概念,和比較技術觀念的時候,甚至是許多框架的核心概念,就很容易露出馬腳。 很多面試者會 一問三不知 ,透過許多引導,但殘酷的是連關鍵字是什麼都也無法推敲出來,更不用說在小組裡面到底怎麼樣合作,許多不同線上產品的比較,使用者流程,使用者後面的互動邏輯等,幾乎是風吹一片倒,只能

[分享] 腳踏車環島注意事項

很多人都期望自己能夠做點什麼,做些什麼,而退伍之後的第二個星期,就展開了環島之旅。 對很多人來說這不算什麼,甚至有人展開了走路、跑步、溜滑板、單輪車等方式環島一周,充分展現對台灣的愛與關懷。 這篇主要讓不知道怎麼準備環島的人,作一個完善的解說,首先隨身的東西要有: 證件現金類 : 身份證 健保卡 學生證 現金 提款卡 悠遊卡

[解釋] uuid 與 guid 的差異

uuid 與 guid 的差異 很多人都有使用過 MySQL 的 number auto increment, 可是實際使用之後就會發現,很快的數字會不夠使用,而且這個 id 是很容易被猜測出來連續性。 因此就開始進行了解,看到了 uuid 這個名詞,進而下去查詢發現 guid 的另外這個名詞,感覺上這兩個名詞似乎是有些什麼特殊關連。 這篇文章就小小記錄一下自己的查詢心得。