Detailed explanation of the use of document objects in JavaScript_Basic knowledge

Object properties

Copy code The code is as follows:

document.title                              // Set the document title equivalent to the HTML

================================================== =======================
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
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 ...
document.body.innerHTML //Set the HTML code between ...
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 tags on the corresponding page
document.images[0] //The first tag
document.images //The i-1th tag

b) Directly reference

through the name attribute

Copy code The code is as follows:

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.

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

Sample code (dynamic creation of images):

Copy code The code is as follows:

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

forms collection (forms in the page)
a) Reference via collection

Copy code The code is as follows:

document.forms                                                                                                                                                    // The

tag
on the corresponding page document.forms.length //The number of

tags on the corresponding page
document.forms[0] //The first

tag
document.forms        //The i-1th

tag
document.forms.length //The number of controls in the i-1th

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

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

through the tag name attribute

Copy code The code is as follows:

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

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

Copy code The code is as follows:

document.forms.name                                                              // Corresponding to

attribute
document.forms.action                                                   // Corresponding to

attribute
document.forms.encoding //corresponds to

attribute
document.forms.target //corresponds to

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

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

Copy code The code is as follows:

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

Copy code The code is as follows:

1 
2 

 
 
ddd



-------------------------------
Sample code (Select):

Copy code

The code is as follows:

1
2
3










================================================== =======================
Div collection (layers in the page)

Copy code

The code is as follows:

텍스트

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과 동일

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

샘플 코드:

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

함수 변경(){
document.all.oDiv.style.display="없음"
}

텍스트

함수 변경텍스트(){
document.getElementById("oDiv").innerText="NewText"
}

텍스트