Detailed explanation of the use of document objects in JavaScript

Home

Web Front-end

JS Tutorial

Detailed explanation of the use of document objects in JavaScript_Basic knowledge

May 16, 2016 pm 04:21 PM

javascript

Object properties

Copy code The code is as follows:

document.title                              // Set the document title equivalent to the HTML <title> tag 

document.bgColor //Set the page background color 

document.fgColor //Set the foreground color (text color) 

document.linkColor //Color of unclicked links

document.alinkColor //The color of the active link (the focus is on this link)

document.vlinkColor //Color of clicked links

document.URL //Set the URL attribute to open another web page in the same window

document.fileCreatedDate //File creation date, read-only attribute

document.fileModifiedDate //File modified date, read-only attribute

document.fileSize //File size, read-only attribute

document.cookie //Set and read cookie

document.charset //Set the character set Simplified Chinese: gb2312

================================================== =======================
body-body sub-object

Copy code The code is as follows:

document.body                                                                               //Specify the start and end of the document body is equivalent to <body></body>

document.body.bgColor //Set or get the background color behind the object

document.body.link //Color of unclicked links

document.body.alink //The color of the active link (the focus is on this link)

document.body.vlink //Color of clicked links

document.body.text //Text color

document.body.innerText //Set the text between <body>...</body>

document.body.innerHTML //Set the HTML code between <body>...</body>

document.body.topMargin //Page top margin

document.body.leftMargin //Left margin of page

document.body.rightMargin //Right margin of page

document.body.bottomMargin //Page bottom margin

document.body.background //Background image

document.body.appendChild(oTag) //Dynamicly generate an HTML object

Common object events

Copy code The code is as follows:

document.body.onclick="func()" //Clicking the object with the mouse pointer is triggered

document.body.onmouseover="func()" //Triggered when the mouse pointer moves to the object

document.body.onmouseout="func()" //Triggered when the mouse pointer moves out of the object

================================================== =======================
location-location sub-object

Copy code The code is as follows:

document.location.hash // The part after #

document.location.host //Domain name Port number

document.location.hostname // Domain name

document.location.href // Full URL

document.location.pathname // Directory part

document.location.port // Port number

document.location.protocol // Network protocol (http:)

document.location.search // The part after ?

Common object events

Copy code The code is as follows:

documenty.location.reload() //Refresh the web page

document.location.reload(URL) //Open a new webpage

document.location.assign(URL) //Open a new webpage

document.location.replace(URL) //Open a new webpage

================================================== =======================
images collection (images on the page)
a) Reference via collection

Copy code The code is as follows:

document.images                                                                                                                                                                                                                            
document.images.length //The number of <img> tags on the corresponding page

document.images[0] //The first <img> tag

document.images //The i-1th <img> tag

b) Directly reference

through the name attribute

Copy code The code is as follows:

<img name="oImage">

document.images.oImage //document.images.name attribute

c) Reference the src attribute of the image

Copy code The code is as follows:

document.images.oImage.src //document.images.name attribute.src

d) Create an image

Copy code The code is as follows:

var oImage

oImage = new Image()

document.images.oImage.src="1.jpg"

At the same time, create an <img> tag on the page to display it accordingly

Sample code (dynamic creation of images):

Copy code The code is as follows:

<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 collection (forms in the page)
a) Reference via collection

Copy code The code is as follows:

document.forms                                                                                                                                                    // The <form> tag 
 on the corresponding page
document.forms.length //The number of <form> tags on the corresponding page

document.forms[0] //The first <form> tag

document.forms        //The i-1th <form> tag

document.forms.length //The number of controls in the i-1th <form>

document.forms.elements[j] //The j-1th control 
 in the i-1th<form>

-------------------------------
b) Directly reference

through the tag name attribute

Copy code The code is as follows:

<form name="Myform"><input name="myctrl"></form>

document.Myform.myctrl //document.form name.control name

-------------------------------
c) Access form attributes

Copy code The code is as follows:

document.forms.name                                                              // Corresponding to <form name> attribute 

document.forms.action                                                   // Corresponding to <form action> attribute 

document.forms.encoding //corresponds to<form enctype>attribute

document.forms.target //corresponds to <form target> attribute

document.forms.appendChild(oTag) //Dynamically insert a control

-------------------------------
Sample code (form):

Copy code The code is as follows:

<html>

<!--Script related to Text control-->

<form name="Myform">

<input type="text" name="oText">

<input type="password" name="oPswd">

<form>

<script language="javascript">

//Get the value of the text password box

document.write(document.Myform.oText.value)

document.write(document.Myform.oPswd.value)

</script>

</html>

-------------------------------
Sample code (checkbox):

Copy code The code is as follows:

<html>

<!--checkbox, radio control related 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(){ 

//Traverse the value of the checkbox control and determine whether it is selected or not 

var length 

length=document.forms[0].chk.length 

for(i=0;i<length;i){ 

v=document.forms[0].chk.value 

b=document.forms[0].chk.checked 

If(b) 

alert(v=v "selected") 

alert(v=v "Not selected") 

</script> 

<a href=# onclick="fun()">ddd</a>
</html> 

-------------------------------

Sample code (Select):

Copy code

The code is as follows: <html>

<select name="oSelect">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

</form>

<script language="javascript">

//Traverse the option items of the select control

var length

length=document.Myform.oSelect.length

for(i=0;i<length;i)

        document.write(document.Myform.oSelect.value)

</script>

<script language="javascript">

//Traverse option items and determine whether an option is selected

for(i=0;i<document.Myform.oSelect.length;i ){

If(document.Myform.oSelect.selected!=true)

        document.write(document.Myform.oSelect.value)

       else

        document.write("<font color=red>" document.Myform.oSelect.value "</font>") 

}

</script>

<script language="javascript">

//Print out the selected option
 based on SelectedIndex
​​​ //(0 to document.Myform.oSelect.length-1)

i=document.Myform.oSelect.selectedIndex

        document.write(document.Myform.oSelect.value)

</script>

<script language="javascript">

//Dynamicly add options to the select control

      var oOption = document.createElement("OPTION");

oOption.text="4";

oOption.value="4";

Document.Myform.oSelect.add(oOption);

</script>

<html>

================================================== =======================

Div collection (layers in the page)

Copy code

The code is as follows:

<Div id="oDiv">텍스트</Div>

document.all.oDiv                                                                                                           ~   
document.all.oDiv.style.display="" //레이어가 보이도록 설정

document.all.oDiv.style.display="none" //레이어를 숨김으로 설정

document.getElementId("oDiv") //getElementId를 통해 객체 참조

document.getElementId("oDiv").

document.getElementId("oDiv").display="none"

/*document.all은 문서에 있는 모든 객체의 컬렉션을 나타냅니다

IE만이 이 속성을 지원하므로 브라우저 유형을 결정하는 데에도 사용됩니다*/

레이어 객체의 4가지 속성

코드 복사 코드는 다음과 같습니다.

document.getElementById("ID").innerText //동적 출력 텍스트

document.getElementById("ID").innerHTML //동적 출력 HTML

document.getElementById("ID").outerText //innerText와 동일

document.getElementById("ID").outerHTML //innerHTML과 동일

------------------

샘플 코드:

코드 복사 코드는 다음과 같습니다.

<html>

<스크립트 언어="javascript">

함수 변경(){

document.all.oDiv.style.display="없음"

}

<Div id="oDiv" onclick="change()">텍스트</Div>

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn