First, access the HTML element method
1. Pursuant to access the HTML element id
Methods: document.getElementById (id name)
2. Access HTML elements based on css selectors
Method: Element querySelector (selectors) which can be either a selector, or may be a plurality of selectors css separated by a comma, the method returns an HTML document is always in line with the first selected parameter of the HTML element
NodeList querySelectorAll (selectors) returns in line with the set selector of the HTML element
3. Access HTML elements using the node relationships
Methods: Node parentNode: Returns the parent of the current node
Node previousSibling: Returns the previous sibling node
Node nextSibling: return after a sibling of the current node
Node [] childNodes: Returns all child nodes of the current node
Node [] getElementsByTagName (tagName): Returns all child nodes of a label
Node firstChild: Returns the first child of the current node, note that each visit <li /> nodes respectively above and below the blank, the blank can be considered an element.
Node lastChild: Returns the last child of the current node
Second, some exceptions to access HTML elements
1. Access form controls (represented by HTMLFormElement form objects in the DOM, what are a few common attributes of the object)
action: Returns the value of the action attribute of the form, This property specifies the address form submission, read-write property
elements: Array return to the form of the composition of all the form controls, the array can be accessed using any form controls ( note, elements attribute value is not an ordinary array, but a HTMLCollection object, which can use both as a normal array ( access via a numerical index) may be used as an associative array (accessed through the index string) If there are a plurality of name or id attribute value of the same form, it will return an object again HTMLCollection )
HTMLFormElement access form control has the following three syntax
formObj.elements [index]: Returns the index th sheet form control
formObj.elements [ 'elementName']: Returns a collection of a form name or id form controls as elementName
form.elemrntName: return form id or name for the set of form controls elementName
length: Returns the number of form fields within the form, the attribute value is equal to elements.length, read-only attribute
method: return the form method attribute
target: the results window is used to determine when the form is submitted
reset: resetting the form, the form field values of all the initial value
submit: submit the form
Option 2. Access list boxes, drop-down menus, the following attributes
form: return to list boxes, drop-down menu form object is located. Read-only attribute
length: Back to list boxes, drop-down menu option number
options: returns an array of options
selectedIndex: Index Options drop-down list, select return
type: Return Type drop-down list, namely whether to allow multiple choice, and if so, select-multiple returns, if not supported by select-one return
HTMLSelectElement of options can be accessed directly attribute list box good, all list items drop-down menu, passing the specified index can be realized. Syntax is as follows
select.options [index]: Returns a list box first index + 1 option
form: this option to return to the form object which belongs to the drop-down list
defaultSelected: returns whether this option is selected by default
selected: if this option is selected returns
text: Returns the text of the options presented
value: Returns the value of the option value
3, access to sub-elements form
caption: Returns the table header object
HTMLCollection rows: return all the table rows in the table
HTMLCollection tBodies: return the form to all <tbody /> elements of an array
Table row of the table returns a first line index + 1: table.rows [index]
Representative HTMLTableRowElement table rows, some of the properties are as follows
cells: Returns an array of all the cells in the form of composition
rowIndex: Returns the row index value in the form which
sectionRowIndex: it returned to the table rows in the element index
Representative cell object HTMLTableCellElement
cellIndex: Returns the index value of a cell in a table row