JavaScript的document物件詳解

阿新 • • 發佈：2019-02-05

[注:頁面上元素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           //設定字符集 <strong class="kgb" onmouseover="isShowAds = false;isShowAds2 = false;isShowGg = true;InTextAds_GgLayer="_u7B80_u4F53_u4E2D_u6587";KeyGate_ads.ShowGgAds(this,"_u7B80_u4F53_u4E2D_u6587",event)" style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; font-weight: normal; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; cursor: hand; color: #0000ff; padding-top: 0px; border-right-width: 0px; text-decoration: underline" onclick="javascript:window.open("http://www.google.com/aclk?sa=L&ai=BWB1ZM8mLR_vHD5Hs6APo0pX0Crv0hjCXu4LqAuaDwXmwvRAQBhgGIK-aqgkoBzgBUM-CrjxgncnggegFqgEKMTAwMDAxNjAwMsgBAakCEqvo4uaBgj7IAuenlgLZAymfZiyPFXMt&num=6&q=http://www.showtec.cn/products/drylabel.html&sig=AGiWqtyKbVAB7I92GDPHMy8GClqLRDwKbw");GgKwClickStat("簡體中文","www.showtec.cn","afs","1000016002");" onmouseout="isShowGg = false;InTextAds_GgLayer="_u7B80_u4F53_u4E2D_u6587"">簡體中文: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>標籤與之對應就可以顯示
----------------------------
示例程式碼(動態建立圖象)：
<html>
<img name=oImage>
<script language="javascript">
   var oImage
   oImage = new Image()
   document.images.oImage.src="1.jpg"
</script>
</html>
<html>
<script language="javascript">
   oImage=document.caeateElement("IMG")
   oImage.src="1.jpg"
   document.body.appendChild(oImage)
</script>
</html>
========================================================================
forms集合(頁面中的表單):
----------------------------
a)通過集合引用
document.forms                 //對應頁面上的<form>標籤
document.forms.length          //對應頁面上<form>標籤的個數
document.forms[0]              //第1個<form>標籤
document.forms[i]              //第i-1個<form>標籤
document.forms[i].length       //第i-1個<form>中的控制元件數
document.forms[i].elements[j]  //第i-1個<form>中第j-1個控制元件
----------------------------
b)通過標籤name屬性直接引用
<form name="Myform"><input name="myctrl"></form>
document.Myform.myctrl         //document.表單名.控制元件名
----------------------------
c)訪問表單的屬性
document.forms[i].name         //對應<form name>屬性
document.forms[i].action       //對應<form action>屬性
document.forms[i].encoding     //對應<form enctype>屬性
document.forms[i].target       //對應<form target>屬性
document.forms[i].appendChild(oTag) //動態插入一個控制元件
----------------------------
示例程式碼(form)：
<html>
<!--Text控制元件相關Script-->
<form name="Myform">
<input type="text" name="oText">
<input type="password" name="oPswd">
<form>
<script language="javascript">
//獲取文字密碼框的值
document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)
</script>
</html>
----------------------------
示例程式碼(checkbox)：
<html>
<!--checkbox,radio控制元件相關script-->
<form name="Myform">
<input type="checkbox" name="chk" value="1">1     
<input type="checkbox" name="chk" value="2">2     
</form>     
<script language="javascript">     
function fun(){     
  //遍歷checkbox控制元件的值並判斷是否選中     
  var length     
  length=document.forms[0].chk.length     
  for(i=0;i<length;i++){     
  v=document.forms[0].chk[i].value     
  b=document.forms[0].chk[i].checked     
  if(b)     
    alert(v=v+"被選中")     
  else     
    alert(v=v+"未選中")    
  }     
  }     
</script>      
<a href=# onclick="fun()">ddd</a>                      
</html> 
----------------------------
示例程式碼(Select)：
<html>
<!--Select控制元件相關Script-->
<form name="Myform">
<select name="oSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
<script language="javascript">
   //遍歷select控制元件的option項
   var length
   length=document.Myform.oSelect.length
   for(i=0;i<length;i++)
   document.write(document.Myform.oSelect[i].value)
</script>
<script language="javascript">
   //遍歷option項並且判斷某個option是否被選中
   for(i=0;i<document.Myform.oSelect.length;i++){
   if(document.Myform.oSelect[i].selected!=true)
   document.write(document.Myform.oSelect[i].value)
   else
   document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>")   
   }
</script>
<script language="javascript">
   //根據SelectedIndex打印出選中的option
   //(0到document.Myform.oSelect.length-1)
   i=document.Myform.oSelect.selectedIndex
   document.write(document.Myform.oSelect[i].value)
</script>
<script language="javascript">
   //動態增加select控制元件的option項
   var oOption = document.createElement("OPTION");
   oOption.text="4";
   oOption.value="4";
   document.Myform.oSelect.add(oOption);
</script>
<html>
========================================================================
Div集合(頁面中的層):
<Div id="oDiv">Text</Div>
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
----------------------------
示例程式碼：
<html>
<script language="javascript">
function change(){
document.all.oDiv.style.display="none"
}
</script>
<Div id="oDiv" onclick="change()">Text</Div>
</html>
<html>
<script language="javascript">
function changeText(){
document.getElementById("oDiv").innerText="NewText"
}
</script>
<Div id="oDiv" onmouseover="changeText()">Text</Div>
</html>

request物件詳解

2018年10月27日15:45:51於易動申請物件：型別：HttpServletRequest的：請求物件：封裝了請求頭資訊，請求體資訊等 .1：特點：型別：HttpServletRequest &nbs

servletcontext物件詳解

2018年10月17日19:21:38於易動 ServletContext物件：特點：上下文環境物件：對應整個web應用的。一個web應用只能有一個ServletContext物件： &nbs

jsp中的九大內建物件詳解

jsp中的九大內建物件大概可以分為以下幾種：輸入輸出：out，response，request 請求控制：pageContext，session，application Servlet: page，config 錯誤處理：exception 九大內建物件概括： out：用於向客戶端和瀏

Scala Predef物件詳解

Scala Predef物件目錄： 1.Predef原始碼 2.型別裝換 3.型別定義 4.條件檢查方法 5.輸入輸出方法 6.其他 1 Predef原始碼為了方便起見，只要你編譯程式碼，Scala 編譯器就會自動匯入頂層Scala 包（名為scala）以及在

可迭代物件詳解

可迭代物件詳解 1.可迭代物件我們已經知道可以對list、tuple、dict、set、str等型別的資料使用for...in...的迴圈語法從其中依次拿到資料進行使用，我們把這樣的過程稱為遍歷，也叫迭代。把可以通過for...in...這類語句迭代讀取一條資料供我們使用的物件稱之為

Python-模型類-F()物件和Q()物件詳解

定義模型 from django.db import models from django.db.models import F, Q class Publisher(models.Model): """出版社""" name = models.CharField(ma

JavaWeb學習----JSP內建物件詳解---九大內建物件沒cook JavaWeb學習----JSP內建物件詳解

JavaWeb學習----JSP內建物件詳解 JSP共有以下9大內建物件： out request response session pageContext application config page exception 文章連結 -

DocumentFragment物件詳解，與傳統DOM操作效能對比

一、前言最近專案不是很忙，所以去看了下之前總想整理的重匯和迴流的相關資料，關於迴流優化，提到了DocumentFragment的使用，這個物件在3年前我記得是有看過的，但是一直沒深入瞭解過，所以這裡做個整理。後面會把重匯，迴流也做個整理，不鴿。二、DocumentFragment物件是什麼？ MDN

Response響應物件詳解

Response響應 01_HTTP_響應訊息_概述請求訊息：客戶端傳送給伺服器端的資料資料格式： 1. 請求行 2. 請求頭 3. 請求空行 4. 請求體響應訊息：伺服器端傳送給客戶端的資料資料格式：響應行響應頭響應空行響應體:傳輸

matlab中figure物件詳解

繪圖視窗選單File | Export Setup裡很方便的改變這些屬性，特別是Expand axes to fit figure，會更好減少空白邊。設定好可以儲存模板，下次呼叫，也可以將這個功能寫到m檔案中，自動執行 1、Matlab是面向物件的。最高等級的物件是sc

Java四大域物件詳解（ServletContext、Session、Request、pageContext域物件）

一、ServletContext 1、生命週期：當Web應用被載入進容器時建立代表整個web應用的ServletContext物件，當伺服器關閉或Web應用被移除時，ServletContext物件跟著銷燬。 2、作用範圍：整個Web應用。 3、作用：

java Request物件和Response物件詳解

一:概述 Web伺服器收到客戶端的http請求，會針對每一次請求，分別建立一個用於代表請求的request物件、和代表響應的response物件一、Response物件 1.Resonse的繼承結構： ServletResponse--H

Page，request，session，application四大域物件詳解

一、ServletContext 　　　　1、生命週期：當Web應用被載入進容器時建立代表整個web應用的ServletContext物件，當伺服器關閉或Web應用被移除時，ServletContext物件跟著銷燬。　　　　2、作用範圍：整個Web應用（應用範圍）。

Request 物件詳解

一、Request 物件可以使用 Request 物件訪問任何基於 HTTP 請求傳遞的所有資訊，包括從 HTML 表格用 POST 方法或 GET 方法傳遞的引數、cookie 和使用者認證。Request 物件使您能夠訪問客戶端傳送給伺服器的二進位制資料。 Reques

ASP內建物件詳解之Request物件

來源：網頁教學網 Request物件用於接受所有從瀏覽器發往你的伺服器的請求內的所有資訊。　　所有客戶證書的資訊的集合。對於Key，該集合具有如下的關鍵字： Subject 證書的主題。包含所有關

JavaWeb之Request物件和Response物件詳解

一:概述 Web伺服器收到客戶端的http請求，會針對每一次請求，分別建立一個用於代表請求的request物件、和代表響應的response物件一、Response物件 1.Resonse的繼承結構： ServletResponse--Ht

django中的request物件詳解

原文參考： Request 　　我們知道當URLconf檔案匹配到使用者輸入的路徑後，會呼叫對應的view函式，並將 HttpRequest物件作為第一個引數傳入該函式。 Django 每一個view函式的第一個引數都是request，有沒想過request

Request物件和Response物件詳解

Request 1.獲取請求的基本資訊 1>獲取請求的url和uri 2>獲取url後面的請求引數部分的字串 3>獲取請求方式 4>獲取主機名,IP地址 5>獲取 Contexpath String url = request.get

C++類和物件詳解（new與不new的區別）

一、"類" 的介紹在C++中, 用 "類" 來描述"物件", 所謂的"物件"是指現實世界中的一切事物。那麼類就可以看做是對相似事物的抽象, 找到這些不同事物間的共同點, 如自行車和摩托車, 首先他們都屬於"物件", 並且具有一定得相同點, 和一些不同點, 相同點如

類與物件詳解

1.什麼是類？類是對一類事物的描述。類中分為屬性和行為。 1.1什麼是屬性屬性指是什麼，在Java中指成員變數。 1.2 什麼是行為？行為指能幹什麼，在Java中指成員方法。 2.什麼是物件？就是一類事物的具體實現 3.案例：學

JavaScript的document物件詳解

相關推薦