JavaScript DOM-9 HTML DOM (HTML DOM overview, common HTML DOM objects, HTML forms)

I. Overview of the HTML DOM

HTML DOM Overview

-HTML DOM defines a series of standard objects for HTML, as well as a standard way to access and manipulate HTML documents

-HTML Tag Object

-Treat every element in a Web page as an object

Common HTML DOM objects

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/63/wKioL1b-HWOSZZ7UAABoftRXPdU802.png "title=" Web.png "alt=" Wkiol1b-hwoszz7uaaboftrxpdu802.png "/>650" this.width=650; "src=" http://s1.51cto.com/wyfs02/M02/ 7e/67/wkiom1b-hvpj_uxmaacdrbqhpl0589.png "title=" Web.png "alt=" Wkiom1b-hvpj_uxmaacdrbqhpl0589.png "/>

Standard DOM and HTML Dom

-HTML Tag Object

-CreateElement

-AppendChild

-SetAttribute

-RemoveAttribute

-NodeName

- ...

-HTML DOM provides a variety of encapsulated objects

-Image

-Select

-Option

- ...

-How the standard DOM is implemented

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/68/wKiom1b-HzniusUpAAAeKsDd1kQ954.png "title=" Web.png "alt=" wkiom1b-hzniusupaaaeksdd1kq954.png "/>-how HTML DOM is implemented

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/64/wKioL1b-IFWg4lquAAAY5vDTixg978.png "title=" Web.png "alt=" wkiol1b-ifwg4lquaaay5vdtixg978.png "/>-standard DOM operation is suitable for:

-operation nodes, such as Create, delete, find, etc.

-The HTML DOM operation is suitable for:

-manipulate properties, such as reading or modifying the value of a property

HTML DOM Properties

-In the standard DOM, the attribute is present as a child of the element, and the value of the obtained attribute can be used Elementnode.getattribute ("Property name")

-In the HTML DOM, attributes are not treated as separate nodes, and you can use objects directly to access property values

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/68/wKiom1b-IhyzOqVwAABHTJYSdNM111.png "title=" Web.png "alt=" Wkiom1b-ihyzoqvwaabhtjysdnm111.png "/>

Style properties

-You can control the CSS style of an element by using the style property of the Element object

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/68/wKiom1b-InPCayteAABV9_3I5eA884.png "title=" Web.png "alt=" Wkiom1b-inpcayteaabv9_3i5ea884.png "/>650" this.width=650; "src=" http://s1.51cto.com/wyfs02/M00/ 7e/64/wkiol1b-iy2xu2liaaaccb6nn8m233.png "title=" Web.png "alt=" Wkiol1b-iy2xu2liaaaccb6nn8m233.png "/>

-You can also use the ClassName property of the element object to control the CSS class that the element belongs to

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/68/wKiom1b-I9OR1zBuAAApeb0aAVQ191.png "title=" Web.png "alt=" Wkiom1b-i9or1zbuaaapeb0aavq191.png "/>650" this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/ 7e/68/wkiom1b-i-qjeashaaabkwdpwka570.png "title=" Web.png "alt=" Wkiom1b-i-qjeashaaabkwdpwka570.png "/>

Ii. Common HTML DOM objects

Image Object

-image objects represent embedded images

- label each time an image is created. You can also create a new object by using new Image ()

-Common Properties:

-SRC

-Height

-width

Table Object

-Table object represents an HTML table

-<table> tag identifies a Table object

-Common Properties

-Rows

-Common methods

-InsertRow (Index): Returns the TableRow object

-DeleteRow (Index)

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7E/69/wKiom1b-Jh3x5HJPAACQ0j6D2qM095.png "title=" Web.png "alt=" Wkiom1b-jh3x5hjpaacq0j6d2qm095.png "/>

TableRow Object

-TableRow object represents an HTML table row

-The <tr> tag represents a TableRow object

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/65/wKioL1b-J6rgiWoPAAHAjGyqdNc153.png "title=" Web.png "alt=" Wkiol1b-j6rgiwopaahajgyqdnc153.png "/>

TableCell Object

-TableCell object represents an HTML table cell

-The <td> tag represents a TableCell object

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/65/wKioL1b-J-nhiob5AAFZlVkAsdM570.png "title=" Web.png "alt=" Wkiol1b-j-nhiob5aafzlvkasdm570.png "/>

Third, HTML form

Form Object

-The Form object represents an HTML form.

-The Form object is created in the HTML document <form> every time it appears

-Common Properties

-Action

-Method

-Enctype

-Length: Number of elements in form

-elements[]: Contains an array of all the elements in the form

-Common methods

-Reset ()

-Submit (): Submission Form

Input Object

-Common form labels have the following correspondence with HTML DOM objects

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/65/wKioL1b-K06TPmGQAAKExuHIp5A404.png "title=" Web.png "alt=" Wkiol1b-k06tpmgqaakexuhip5a404.png "/>

Select Object

-The Select object represents a drop-down list in an HTML form

-The <select> tag represents a Select object

-Common Properties

-Options, SelectedIndex, size

-Common methods

-Add (option), remove (index)

-Event

-OnChange

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/69/wKiom1b-K6jDpr06AACx_YyCVLk365.png "title=" Web.png "alt=" Wkiom1b-k6jdpr06aacx_yycvlk365.png "/>

Option Object

The-option object represents an option in the drop-down list in the HTML form

-The <option> tag represents an option object

-Create objects

-var o = new Option (text,value);

-Common Properties

-Index, text, value, selected

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/69/wKiom1b-LSiCE4eKAADdZOGmfwk140.png "title=" Web.png "alt=" Wkiom1b-lsice4ekaaddzogmfwk140.png "/>650" this.width=650; "src=" http://s4.51cto.com/wyfs02/M02/ 7e/65/wkiol1b-lewqgfkkaacy5kk3gus630.png "title=" Web.png "alt=" Wkiol1b-lewqgfkkaacy5kk3gus630.png "/>650" this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/65/wKioL1b-Lf3hDsdAAAEjptYQA8U330.png "title=" Web.png " alt= "Wkiol1b-lf3hdsdaaaejptyqa8u330.png"/>

Summary: This chapter covers the JavaScript HTML DOM (HTML DOM overview, common HTML DOM objects, HTML forms)

This article from the "Flying Ants" blog, declined to reprint!

JavaScript DOM-9 HTML DOM (HTML DOM overview, common HTML DOM objects, HTML forms)