HTML DOM example


Examples of HTML DOM objects accessed and manipulated using JavaScript.

Document object

  • Use document.write() to output text

  • Use document.write() to output HTML

  • Return the number of anchors in the document

  • Return the innerHTML of the first anchor in the document

  • Return The number of forms in the document

  • Returns the name of the first form in the document

  • Returns the number of images in the document

  • Returns the ID of the first image in the document

  • Returns the number of links in the document

  • Returns the number of links in the document The ID of a link

  • Returns the name/value pairs of all cookies in the document

  • Returns the server domain name of the loaded document

  • Returns the last modification time of the document

  • Returns the URL of the current document loaded

  • Returns the URL of the document Title

  • Returns the complete URL of the document

  • Open the output stream and enter text into the stream

  • The difference between write() and writeln()

  • Pop up the innerHTML of an element with the specified ID

  • Pop up the element with the specified Name The number of

  • The number of elements to pop up with the specified tagname


  • More Document object examples in our JavaScript reference manual.

Anchor Object

  • Returns and sets the charset attribute of the link

  • Returns and sets the charset property of the link href attribute

  • Returns and sets the hreflang attribute of the link

  • Returns the name of an anchor

  • Returns the relationship between the current file and the linked document

  • Change the target attribute of the link

  • Returns the value of the type attribute of a link

  • More Anchor object examples are in our JavaScript Reference Manual.

Area object

  • Returns the alternative text of a certain area of ​​the image map

  • Returns the image map The coordinates of a certain area

  • Returns the anchor part of the href attribute of an area

  • Returns the host name: a certain area of ​​​​the image map Port

  • Returns the hostname of a certain area of ​​image mapping

  • Returns the port of a certain area of ​​image mapping

  • Return the href of a certain area of ​​the image mapping

  • Return the pathname of a certain area of ​​the image mapping

  • Return the image mapping The protocol of a certain area

  • Returns the querystring part of the href attribute of an area

  • Returns the shape of a certain area of ​​the image map

  • Returns the value of the target of an area in the image map

  • More Area object examples are in our JavaScript reference manual.

Base Object

  • Returns the base URL of all relative URLs on the page

  • Returns the base link for all relative links on the page

  • More Base object examples are in our JavaScript Reference Manual.

Button object

  • When the button is clicked, the button is unavailable

  • Returns the name of a button

  • Return the type of a button

  • Return the value of a button

  • Return the table to which a button belongs ID

  • More Button object examples are in our JavaScript Reference Manual.

Form object

  • Returns the value of all elements in a form

  • Returns The value of the acceptCharset attribute of a form

  • Returns the value of the action attribute of a form

  • Returns the value of the enctype attribute in the form

  • Returns the number of elements in a form

  • Returns the method of sending form data

  • Returns the name of a form

  • Return the value of a form target attribute

  • Reset the form

  • Submit the form

  • More Button object examples are in our JavaScript Reference Manual.

Frame/IFrame object

  • Formatting of iframe

  • Change an object contained in The background color of the document in the iframe

  • Return the value of the frameborder attribute in an iframe

  • Delete the frameborder of the iframe

  • Change the height and width of the iframe

  • Return the value of the longdesc attribute in an iframe

  • Return the value of the longdesc attribute in an iframe The value of the marginheight attribute

  • Returns the value of the marginwidth attribute in an iframe

  • Returns the value of the name attribute in an iframe

  • Return and set the value of the scrolling attribute in an iframe

  • Change the src of an iframe

  • More Frame/IFrame object instances are in our JavaScript Reference Manual.

Image object

  • Format image

  • Return the alternative text of image

  • Add a border to the image

  • Change the height and width of the image

  • Set the hspace of the image And the vspace attribute

  • Returns the value of the longdesc attribute of the image

  • Creates a link pointing to a low-resolution image

  • Return the name of the image

  • Change the src of the image

  • ##Return the usemap value of a client image map

  • More Image object examples are in our

    JavaScript Reference Manual.

Event Object

  • Which mouse button was clicked?

  • The keycode of the pressed keyboard key?

  • The coordinates of the mouse?

  • The coordinates of the mouse relative to the screen?

  • Is the shift key pressed?

  • Which element was pressed?

  • Which event happened?

Option and Select objects

  • Disable and enable the drop-down list

  • Get the drop-down list ID of the form

  • Get the number of options in the drop-down list

  • Convert the drop-down list into a multi-line list

  • Select multiple options in the drop-down list

  • Pop up all the options in the drop-down list

  • Pop up the selected option in the drop-down list Index

  • Change the text of the selected option in the drop-down list

  • Delete the option in the drop-down list

Table, TableHeader, TableRow, TableData objects

  • Change the width of the table border

  • Change the cellpadding and cellspacing of the table

  • Specify the frame of the table

  • Specify the rules for the table

  • The innerHTML of a row

  • InnerHTML for a cell

  • Create a title for the table

  • Delete rows in the table

  • Add rows in the table

  • Add cells in the row

  • Align cell content horizontally

  • Vertical alignment of cell content

  • Horizontal alignment of the content of a single cell

  • Alignment of a single cell Align the cell content vertically

  • Change the cell content

  • Change the number of columns the cell spans (colspan attribute)