Document對象介紹

時間 2020-10-06

標籤 javascript html java 瀏覽器 cookie 網絡 app ide 指針 orm 欄目 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. //鼠標指針單擊對象是觸發 document.body. //鼠標指針移到對象時觸發 document.body. --------------------------------------------------------------------- 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 --------------------------------------------------------------------- p_w_picpaths集合(頁面中的圖象) a)經過集合引用 document.p_w_picpaths //對應頁面上的<img>標籤 document.p_w_picpaths.length //對應頁面上<img>標籤的個數 document.p_w_picpaths[0] //第1個<img>標籤 document.p_w_picpaths[i] //第i-1個<img>標籤 b)經過nane屬性直接引用 <img name="oImage"> document.p_w_picpaths.oImage //document.p_w_picpaths.name屬性 c)引用圖片的src屬性 document.p_w_picpaths.oImage.src //document.p_w_picpaths.name屬性.src d)建立一個圖象 var oImage oImage = new Image() document.p_w_picpaths.oImage.src="1.jpg" 同時在頁面上創建一個<img>標籤與之對應就能夠顯示 <html> <img name=oImage> <script language="javascript"> var oImage oImage = new Image() document.p_w_picpaths.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) //動態插入一個控件 ----------------------------------------------------------------------- <html>  <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> ----------------------------------------------------------------------- <html>  <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> ----------------------------------------------------------------------- <html>  <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 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>