Node

A Node is an interface from which a number of DOM types, and allows these various types to be treated similarly.

Properties

  • Node.baseURI: return a DOMStirng representing the base URL
  • Node.childNodes: return a live NodeList containing all the children of this node. NodeList being live means that if the children of the Node change, the NodeList will update automatically.
  • Node.firstChild: return a Node representing the first direct child Node of this Node, or Null if the node has no child.
  • Node.lastChild: Return a Node representing the last direct child Node of this Node, or Null if the node has no child.
  • Node.nextSibling: return a Node representing the next Node in the tree, or null if there is no one.
  • Node.previousSibling
  • Node.nodeName: return a DOMString containing the name of the node. The structure of the name will differ with the name type. E.g. An HTMLElement will contain the name of the corresponding tag, like “audio”, for an HTMLAudioElement, a Text node will have the “#text” string, or a Document node will have the “#document” string.
  • Node.nodeType: return an unsigned short representing the type of the node. Possible values are:





































Name Value
Element_Node 1
Attribute_Node 2
Text_Node 3
Document_Node 9
Document_Type_Node 10
Notation_Node 12
  • Node.nodeValue: return a DOMString representing the value of an object. For most node types, this returns null, and any set operation is ignored.
    For Nodes of type TEXT_NODE(Text objects), COMMENT_NODE(Comment objects), and PROGRESSING_INSTRUCTION_NODE(ProgressingInstruction objects), the value corresponds to the text data contained in the obejct.
  • Node.parentNode: return a Node that is the parent of this node, if there is no such node, like if this node is the top of the tree or if doesn’t participate in a tree, this property returns Null.
  • Node.parentElement: returns an Element that is the parent of this node. If the node has no parent, or if that parent is not an Element, this property returns Null.
  • Node.rootNode: return a Node representing the topmost Node in this tree or the current node if it’s the topmost node in the tree.
  • Node.textContent: is a DOMString representing the textual content of an element and all its descendants.

Methods

  • Node.appendChild()
  • Node.cloneNode(): Clone a Node and optionally all of its contents. By default, it clones the content of the node.
  • Node.hasChildNodes(): return a boolean indicating if the element has any child nodes, or not.
  • Node.insertBefore(newNode, beforeItsChild)
  • Node.isEqualNode(): return a boolean which indicating whether or not two nodes are of the same type and all their defining data points match.
  • Node.isSameNode(): return a boolean value indicating whether or not the two nodes are the same(that is they reference the same object).
  • Node.removeChild()
  • Node.replace(newNode, replaceItsChild)

    *   Note: replaceNode will not generate new one.</p>
    
    • E.g.

      ul&gt;li*3

      ul.replace(li[2],li[0])

      it will act as:
      remove li[2], put it li[0], remove li[0], so the result looks like

      ul
      –li[2]
      –li[1]
      `

    Examples

    Browser All Child Nodes

    The following function recursively cycles all child nodes of a node and executes a callback function upon them(and upon the parent node itself).

    `function DOMComb(oParent, oCallBack){
      if(oParent.hasChildNodes()){
        for(var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling){
          DOMComb(oNode, oCallBack);
        }
      }
      oCallBack.call(oParent);
    }
    `

    Remove all children nested within a node

    `Element.prototype.removeAll = function(){
    while(this.firstChild){

    this.removeAll(this.firstChild);
    

    }
    return this;
    };

innerHTML and textContext and NodeValue

Summary:

  • nodeValue is a little more confusing to use, but faster than innerHTML
  • innerHTML parses content as HTML and takes longer(output text/html)
  • textContent uses straight text, does not parse HTML, and is faster(output text/plain)
  • innerText takes styles into consideration. It won’t get hidden text for instance.

node.textContent

The Node.textContent property represents the text content of a node and it descendants.

Syntax

example.textContent ="&lt;a href='...'&gt;textContent&lt;/a&gt;"
will output &lt;a href='...'&gt;textContent&lt;/a&gt;

Differences from innerText

  • textContent gets the content of all elements, including

Event

In computing, an event is an action or occurrence recognized by software that may be handled by the software. Computer events can be generated or triggered by the system, by the user or in other ways. Typically, events are handled synchronously with the program flow, that is, the software may have one or more dedicated places where events are handled, frequently an event loop. A source of events includes the user, who may interact with the software by way of, for example, keystroke on the keyboard. Another source is a hardware device such as a timer. Software can be trigger its own set of events into the event loop, e.g. to communicate the completion of a task. Software that changes its behavior in response to events is said to be event-driven, often with the goal of being inactive.

Event handler

In computer programming, an event handler is a callback subroutine that handles inputs received in a program(called a listener in Java and JavaScript). Each event is a piece of application-level information from the underlying framework, typically the GUI Toolkit. GUI events including key presses, mouse movement, action selections, and timer expiring.

DOM Events

DOM(Document Object Model) events allow event-driven programming language like JavaScript, JScript, ECMAScript, VBScript and Java to register various event handler/listener on the element nodes inside a DOM tree, e.g. HTML, XHTML, XUL, and SVG documents.

Events

HTML Events

There is a huge collection of events that can be generated by most element nodes:

  • Mouse events;
  • Keyboard events;
  • HTML frame/object events;
  • HTML form events;
  • User interface events;
  • Mutation events(notification of any changes to the structure of a document);
  • Progress events(used by XMLHttpResponse, File API, …)

Mouse:
click, dblclick, mousedown, mouseover, mousemove, mouseout, dragstart, drag, dragenter, dragleave, dragover, drop, dragend

  • Click: The sequence of click: mousedown, mouseup, click
  • Mouseover: Fires when the pointing device is moved onto an element
  • Mouseover: Fires when the pointing device is moved while it is over an element
  • Dragstart: Fired on an element when a drag is started
  • Dragend: The source of the drag will receive a dragend event when the drag operation is complete, whether it was sucessful or not,

Keyboard:
keydown, keypress, keyup

HTML frame/object:
load, unload, abort, error, resize, scroll

  • Load: Fires when the user agent finishes loading all content within a document, including window, frames, objects, and images.
  • Unlaod: Fires when the user agent removes all content from a window or frame.
  • Abort: Fires when an object/image is stopped from loading before completely loaded.
  • Error: Fires when an object/image/frame/ cannot be loaded properly.
  • Resize: Fires when a document view is resized.
  • Scroll: Fires when an element or document view is scrolled

HTML form:
select, change, submit, reset, focus, blur

  • Select: Fires when a user selects some text in a text field, including input and textarea.
  • Change: Fires when a control loses the input focus and its value has been modified since gaining focus.
  • Submit: Fires when a form is submitted.
  • Reset: Fires when a form is reset.
  • Focus: Fires when an element receives focus either via the pointing device or by tab navigation.
  • Blur: Fires when an element loses focus.

User Interface:
focusin, focusout, DOMActivate

Mutation:
DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsertedIntoDocument, DOMAttrModified, DOMCharacterDataModified

Progress:
loadstart, progress, error, abort, load, loadnd

Touch Events

Web broswer running on touch-enabled devices will generate additional events

Touch:
touchstart, touchend, touchmove, touchenter, touchleave, touchcancel

  • Touchstart: Fires when a finger is placed on the touch surface/screen.
  • Touchend: Fires when a finger is removed from the touch surface/screen.
  • Touchenter: Fires when a touch point moves onto the interactive area defined by a DOM Element
  • Touchcancel: A user-agent must dispatch this event type to indicate when a TouchPoint has been disrupted in an implementation-specific manner, such as by moving outside the bounds of the UA window.

In the W3C draft recommendation, a TouchEvent delivers a TouchList of Touch location, the modifier keys that were active, a TouchList of Touch locations within the targeted DOM element, and a TouchList of Touch lcoations that have changed since the previous TouchEvent.

Internet Explorer-specific events

In addition to the common/W3C events, two major types of events are added by Internet Explorer. Some of the events have been implemented as de facto standards by other browsers.

Clipbord:
cut, copy, paste, beforecut, beforecopy, beforepaste

Data binding:
afterupdate, beforeupdate, cellchange, dataavailable, datasetchagned, datasetcomplete, errorudpate, rowenter, rowexit, rowsdelete, rowinserted

  • Afterupdate: Fires immediately after a databound object has been updated.
  • Beforeupdate: Fires before a data source has changed.
  • Cellchange: Fires when a data source has change.
  • Dataavailable: Fires when new data from a data source become available.
  • Rowenter: Fires whena new row of data from the data source is available.

Mouse:
contextmenu, selectstart

  • Contentmenu: Fires when the context menu is shown.
  • Selectstart: Fires when the user starts to select text.

Keyboard:
help

  • Help: Fires when the user initiates help.

HTML frame/object:
beforeunload, stop

  • Beforeunload: Fires before a document is unloaded.
  • Stop: Fires when the user stop loading the object. (unlike abort, stop event can be attached to document).
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×