x.innerHTML
x.innerHTML = "Let's <u>change</u> it!"

Get or set the HTML contained by node x.

• If you change the innerHTML of a script tag the browser doesn’t recognize the new script and you can’t execute it. Don’t do this.
• The order of the attributes on the HTML element may be off in IE. Not a big deal, but still.
• If you remove elements through innerHTML in IE, their content is wiped and only the element itself (i.e. opening and closing tags) remain. If you want to remove nodes that you may want to reinsert at a later time, use DOM methods such as removeChild().
• In IE9 and lower innerHTML refuses to work on tables and selects. Solve this by using pure DOM methods instead. See this explanation of the table behaviour by innerHTML’s inventor. I assume something similar goes for selects.
• Xpress doesn’t support the writing of selects and style elements.

x.innerText
x.innerText = "Let's change it!"

Get or set the text contained by node x. Any HTML tags in the node are ignored, though their text content is added to the innerText. If you set innerText all inner HTML elements are removed.

Cross browser:

var text = x.textContent || x.innerText

x.insertAdjacentElementL(position,DOM_node)

Takes two arguments: the position (see below) and the DOM node to be inserted.

Positions:

• beforebegin: before element x.
• afterbegin: as first child of element x.
• beforeend: as last child of element x.
• afterend: after element x.

x.insertAdjacentHTML(position,HTML_string)

Takes two arguments: the position (see below) and the HTML string to be inserted.

Positions:

• beforebegin: before element x.
• afterbegin: added to element x’s innerHTML at the start.
• beforeend: added to element x’s innerHTML at the end.
• afterend: after element x.

x.outerHTML
x.outerHTML = "Let's <u>change</u> it!"

Get or set the HTML of the entire node x, including the outermost tag (element x itself).

• IE8 returns UPPER CASE tags, even though the source is lower case.
• Once you’ve changed the outerHTML, element x is removed entirely and replaced by the HTML you’ve specified. However, variable x still refers to the removed element that now floats in “DOM hyperspace.” In IE its content is removed, though, because of the bug mentioned under innerHTML.

x.outerText
x.outerText = "Let's change it!"

Get or set the text contained by node x. Exactly the same as innerText except that node x is also overwritten and removed when you set outerText.

See outerHTML note about element x.

x.textContent
x.textContent = "Let's change it!"

Get or set the text contained by node x. Any HTML tags in the node are ignored, though their text content is added to the textContent.

Cross browser:

var text = x.textContent || x.innerText

x.classList

An array with all the class names of element x. You can read it out as an array, where each member contains one class name. If you change it to a string (x.classList.toString()) you should get the same result as with className.

It also has the following methods:

• add(className). className is added to the element’s classList.
• contains(className). Returns true if the element’s classList currently contains className; returns false otherwise.
• remove(className). className is removed from the element’s classList.
• toggle(className). className is added if it’s absent; removed if it’s present.

x.className
x.className = 'blue'

Get or set the value of the class attribute of node x, if any.

x.dataset

Grants access to all data-* attributes on element x. Each attribute is a property of x.dataset. The names are complicated, though:

1. Chop off data-.
2. Any lower case character preceded by a dash becomes upper case, while the dash is removed. (Same as with CSS property names.)

So the data-a-complicated-value attribute becomes x.dataset.aComplicatedValue.

x.dir
x.dir = 'rtl'

Get or set the text direction (ltr or rtl, left to right or right to left) of element x. For the moment dir serves as a glorified align.

x.id
x.id = 'otherID'

Get or set the id of node x, which must be a tag. If no ID is specified in the HTML, it is empty.

x.add(y,x.options[x.options.length])

Adds an option to a select box, where x is the select box and y is the new option. The second argument is the option object before which the new option should be inserted.

Say again?

Yup, this is the complicated way. One wonders what the person who thought this up was smoking. It even used to be a W3C standard.

x.add(y,2)

Adds an option to a select box, where x is the select box and y is the new option. The second argument is simply an index.

This is the simple way. Microsoft pushed this, and I’m glad they won because they were right.

x.remove(1)

Remove the second option from select x.

x.caption

Access the caption of table x.

x.cellIndex

The index number of element x, which must be a <td> or <th>, in its row (<tr>).

x.cellPadding = 10

Sets the cell padding of table x to 10 pixels. cellPadding is overruled by any CSS padding declaration. When you set cellPadding, the changes only apply to table cells without any CSS padding.

x.rows[1].cells

A nodeList with all cells of the second row of table x. Contains both <td>s and <th>s.

x.cellSpacing = 10

Set the cell spacing of table x to 10.

x.createCaption()

If table x already has a caption this method returns the caption. If not, a new caption is created.

x.createTFoot()

If table x has a <tfoot>, get it. If not, create a <tfoot> and append it to the table.

x.createTHead()

If table x has a <thead>, get it. If not, create a <thead> and append it to the table.

x.deleteCaption()

Delete the caption of table x, if present.

x.rows[1].deleteCell(0)

Delete the first cell of the second row of table x.

x.deleteRow(1)

Delete the second row of table x.

x.tBodies[1].deleteRow(1)

Delete the second row of the second <tbody> of table x.

x.deleteTFoot()

Delete the tFoot of table x.

x.deleteTHead()

Delete the tHead of table x.

x.rows[0].insertCell(1)

Insert a <td> the first <tr> of table x, as the second <td>.

x.insertRow(1)

Insert a <tr> into table x as the second <tr>.

moveRow(0,3)

Move row with index 0 to index 3.

x.rowIndex

The index number of element x, which must be a <tr>, in its table, regardless of table section (tHead, tBody, tFoot).

Note that browsers should move any <thead> to the top of the table, and any <tfoot> to the bottom. Therefore rows should be counted in the order <thead>-rows, <tbody>-rows, <tfoot>-rows: the order in which they're visible in the rendered page.

• Opera Presto keeps to the source code order (where the <tfoot> precedes the <tbody>.)

x.rows

A nodeList with all rows of table x.

• Safari 3.0 and Opera keep to the source order (where the <tfoot> precedes the <tbody>)

x.sectionRowIndex

The index number of element x, which must be a <tr>, in its table section (tHead, tBody, tFoot).

x.tBodies

x.tFoot

x.tHead

document.activeElement

I test this property with form fields, links, and buttons.

1: supported on form fields
2: supported on links
3: supported on buttons

• Xiaomi Android 4 DOES support it for buttons. That’s because it’s really a Chromium, which I didn’t yet know when I created this table.
• This is the sort of property proxy browsers find very hard to support. The test kind-of works in Opera Mini and Nokia Xpress, except on the inputs. That’s because they refuse to send a JavaScript event, and not because they fundamentally don’t support it. UC Mini really doesn’t support it.
  The point here is that proxy browsers don’t handle Javascript on the client, so that, even if the browser can theoretically handle this property, it’s never updated without a round-trip to the server, which kind-of defeats the purpose.

document.body

Represents the BODY tag.

document.compatMode

Returns the compatibility mode of the document: BackCompat (Quirks Mode) or CSS1Compat (Strict Mode). See the Quirks and Strict Mode page for an explanation.

• IE 5.5 doesn't support this property, but it doesn't need to. It's permanently locked in Quirks Mode.

document.defaultView

Refers to the window. I have no idea why we need yet another reference to the window.

document.doctype

document.lastModified

document.parentWindow

Refers to the window. I have no idea why we need yet another reference to the window.

The value charSet and characterSet return when there’s no character declaration.

• The Sony e-reader and Xiaomi always report UTF-8, regardless of character set definition.
• The English UC 9 reports ISO; the two Chinese ones GBK. That makes sense, given their default language. (I can’t judge if GBK makes sense in a Chinese context, though.)

document.characterSet

The actually-defined character set of the page. With a UTF-8 declaration that should be UTF-8; without one the default character set.

• The Sony e-reader and Xiaomi always report UTF-8, regardless of character set definition.

document.charSet

The actually-defined character set of the page. With a UTF-8 declaration that should be UTF-8; without one the default character set.

• The Sony e-reader and Xiaomi always report UTF-8, regardless of character set definition.

document.defaultCharset

Should always return the value that the other two properties return on a page without a character set definition.

• On Android WebKit this property returns Latin-1, but it should return ISO-8859-1, which both other properties return on a page without a character set definition. Exceptions:
  • the Sony e-reader and the Xiaomi use UTF-8 (for all character properties). This means they support this property correctly.
  • the Whoop Echo has auto-detector
  • the Galaxy Note doesn’t support it
• Cyanogen’s Chromium 33 and Dolphin also return Latin-1.
• Nintendo returns UTF-8