The document type of the JavaScript DOM (ii)

Document Type Introduction

JavaScript uses document type to represent documents, so we call it a text object, and in the browser, the document object is an instance of HTMLDocument, representing the entire HTML page, and The Document object is a property of the Window object because it can be accessed as a global object;

Document Type Characteristics

The value of 1:nodetype is 9;

The value of the 2:nodename is "#document";

The value of the 3:nodevalue is null;

The value of the 4:parentnode is null;

The value of 5.ownerDocument is null;

6: Its child node may be a DocumentType (up to one), Element (up to one). or comment.

Object Properties

Document.title//Set document title equivalent to the title tag of HTML Document.bgcolor//Set page background color Document.fgcolor//Set foreground color (text color) Document.linkcolor/ /not clicked link color document.alinkcolor//Activate link (focus on this link) color document.vlinkcolor//clicked link color document. URL//Set URL property to open another page in the same window document.filecreateddate//File establishment date, read-only property Document.filemodifieddate//File modification date, Read-only property document.filesize//File size, read-only properties Document.cookie//settings and readout Cookiedocument.charset//Set character set Simplified Chinese: gb2312

———————————————————————
Common Object Methods

document.write ()//dynamically write content to page document.createelement (tag)//Create an HTML tag object document.getElementById (ID)// Gets the object with the specified ID value document.getelementsbyname (name)//Gets the object with the specified Name value document.body.appendChild (Otag)

———————————————————————

body-Principal Sub-object

Document.body//Specifies that the beginning and end of the document body is equivalent to Body>/body>document.body.bgcolor//setting or getting the background color behind the object Document.body.link// Color of document.body.alink//activation link (focus on this link) document.body.vlink//clicked link color document.body.text// Text color Document.body.innerText//Set body>.../body> between Document.body.innerHTML//settings body>.../body> HTML code between document.body.topMargin//page Top margin document.body.leftMargin//page left margin Document.body.rightMargin// Page right margin document.body.bottomMargin//page Bottom margin Document.body.background//background picture Document.body.appendChild (Otag)// Dynamically generate an HTML object

Common Object Events

Document.body.onclick= "func ()"//mouse pointer Click object is trigger Document.body.onmouseover= "func ()"// Triggers when the mouse pointer moves to an object when the Document.body.onmouseout= "func ()"//mouse pointer is moved out of the object

———————————————————————
location-Position Sub-object

Document.location.hash//#号后的部分document. Location.host//domain + port number document.location.hostname// Domain Document.location.href//full URLdocument.location.pathname//directory section Document.location.port// Port number DOCUMENT.LOCATION.PROTOCOL//Network Protocol (http:) Document.location.search//# After part documeny.location.reload ()// Refresh page document.location.reload (URL)//Open new page document.location.assign (URL)//Open new page document.location.replace (URL)// Opens a new Web page ——————————————————————— selection-selection Sub-object document.selection ——————————————————————— images collection (image in page)

a) by collection reference

Document.images//the IMG tag on the corresponding page Document.images.length//The number of IMG tags on the corresponding page document.images[0]//1th img Tag document.images[i ]//i-1 img Tag

b) direct reference via Nane propertyIMG name= "Oimage"
Document.images.oImage//document.images.name Properties

c) The SRC attribute of the reference picture

Document.images.oImage.src//document.images.name property. src

d) Create an image

var oimageoimage = new Image () document.images.oimage.src= "1.jpg"

Also create an IMG/tag on the page that corresponds to the display

———————————————————————-

Forms collection (forms in a page)

a) by collection reference

Document.forms//The number of/formform labels on the corresponding page document.forms.length//corresponding page document.forms[0]//1th/ Formform label Document.forms[i]//i-1/formform tags document.forms[i].length//i-1/formform of controls Document.forms[i]. ELEMENTS[J]//i-1/formform j-1 controls

b) direct reference by Tag Name property/formform name= "Myform" >input name= "Myctrl"/>/form
Document. Myform.myctrl//document. Table sole name. Control Name

c) Access the properties of the form

Document.forms[i].name//corresponds to form name> property document.forms[i].action//corresponds to/formform action> property Document.forms[i]. encoding//corresponds to/formform enctype> property Document.forms[i].target//corresponds to/formform target> property Document.forms[i]. AppendChild (Otag)//dynamically insert a control DOCUMENT.ALL.ODIV//reference layer odivdocument.all.odiv.style.display= "// Layer set to Visual document.all.odiv.style.display= "none"//Layer set to hidden Document.getelementid ("odiv")// The object Document.getelementid ("Odiv") is referenced by Getelementid. style= "Document.getelementid (" Odiv "). Display=" None "/* Document.all represents a collection of all objects in document

Only IE supports this property, so it is also used to determine the type of browser */

4 properties of a Layer object

document.getElementById ("id"). innerText//Dynamic output text document.getElementById ("id"). InnerHTML// Dynamic output Htmldocument.getelementbyid ("id"). outertext//With Innertextdocument.getelementbyid ("id"). outerhtml//With innerHTML

several misunderstandings about document

When we use document to find an element, there are two common methods.

getElementById () and getElementsByTagName ().

The first method receives an argument to get the ID of the element. Returns the element if the corresponding element is found, or null if it does not exist; A lot of people think it's undefined. It is also important to note that the ID must match the id attribute in the page to include the case;

If there are multiple identical ID values in the page, only the first one is returned, and the Java understanding is to return directly;

Use getElementsByTagName to access the item by name, or "*" If you want to get all the elements, so it will return all of our HTML elements, and it will return the comment node because the IE annotation is implemented as an element;

DOM Consistency Detection

Since many browsers implement DOM, they may have some subtle differences in how the DOM is implemented, and Dom detection is necessary in addition to multiple levels.

var hasxmldom=document,implementation.hasfeature (' XML ', ' 1.0 ');

The document type of the JavaScript DOM (ii)