Sideway
output.to from Sideway
Document Object Model (DOM)



Draft for Information Only

Content

Node Object
  Examples
 Element Object Property
  Obsolete properties.
 Element Object Method
  Obsolete methods.
 Others Misc.
 Source/Reference

Node Object

The Node object is used to represent a node of the DOM tree of any web document loaded in the user agent. In general, node object is only related to the connecton structure of the DOM document tree. The following interfaces all inherit from Node’s methods and properties: Document, Element, Attr, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference.

Examples

Examples of document object

ASP.NET Code Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    </head>
    <body>
   <!-- comment -->
   <DIV>
       <TABLE>
           <TR>
               <TD>Table cell 1
               </TD>
           </TR>
           <TR>
               <TD>Table cell 2
               </TD>
           </TR>
       </TABLE>
   </DIV>
   <PRE id="demo">
   </PRE>
<script type = "text/javascript">
var myelement = document.body
   document.write("Body element nodeName: " + myelement.nodeName + "<br>");
   document.write("Body element tagName: " + myelement.tagName + "<br>");
   document.write("Body element clientHeight: " + myelement.clientHeight + "<br>");
   document.write("Body element clientWidth: " + myelement.clientWidth + "<br>");
</script> 

    </body>
</html>
HTTP Response Output:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    </head>
    <body>
<p>Results on Microsoft-IIS/8.5 .net: 2.0.50727.8000 VB Version 8.0</p>
   <!-- comment -->
   <DIV>
       <TABLE>
           <TR>
               <TD>Table cell 1
               </TD>
           </TR>
           <TR>
               <TD>Table cell 2
               </TD>
           </TR>
       </TABLE>
   </DIV>
   <PRE id="demo">
   </PRE>
<script type = "text/javascript">
var myelement = document.body
   document.write("Body element nodeName: " + myelement.nodeName + "<br>");
   document.write("Body element tagName: " + myelement.tagName + "<br>");
   document.write("Body element clientHeight: " + myelement.clientHeight + "<br>");
   document.write("Body element clientWidth: " + myelement.clientWidth + "<br>");
</script> 

    </body>
</html>
HTML Web Page Embedded Output:

Element Object Property

Some typical Document object properties are.

Inherits properties from its parent, EventTarget.

  • Node.baseURI: Read only. Returns a DOMString representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last '/'.
  • Node.baseURIObject: This API has not been standardized. (Not available to web content.) The read-only nsIURI object representing the base URI for the element.
  • Node.childNodes: Read only. Returns a live NodeList containing all the children of this node. NodeList being live means that if the children of the Node change, the NodeList object is automatically updated.
  • Node.firstChild: Read only. Returns a Node representing the first direct child node of the node, or null if the node has no child.
  • Node.isConnected: Read only. Returns a boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the Document object in the case of the normal DOM, or the ShadowRoot in the case of a shadow DOM.
  • Node.lastChild: Read only. Returns a Node representing the last direct child node of the node, or null if the node has no child.
  • Node.nextSibling: Read only. Returns a Node representing the next node in the tree, or null if there isn't such node.
  • Node.nodeName: Read only. Returns a DOMString containing the name of the Node. The structure of the name will differ with the node 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: Read only. Returns an unsigned short representing the type of the node. Possible values are:
    Name Value
    ELEMENT_NODE 1
    ATTRIBUTE_NODE (This deprecated API should no longer be used, but will probably still work.) 2
    TEXT_NODE 3
    CDATA_SECTION_NODE 4
    ENTITY_REFERENCE_NODE (This deprecated API should no longer be used, but will probably still work.) 5
    ENTITY_NODE (This deprecated API should no longer be used, but will probably still work.) 6
    PROCESSING_INSTRUCTION_NODE 7
    COMMENT_NODE 8
    DOCUMENT_NODE 9
    DOCUMENT_TYPE_NODE 10
    DOCUMENT_FRAGMENT_NODE 11
    NOTATION_NODE (This deprecated API should no longer be used, but will probably still work.) 12
  • Node.nodeValue: Returns / Sets the value of the current node
  • Node.ownerDocument: Read only. Returns the Document that this node belongs to. If the node is itself a document, returns null.
  • Node.parentNode: Read only. Returns 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: Read only. 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.previousSibling: Read only. Returns a Node representing the previous node in the tree, or null if there isn't such node.
  • Node.textContent: Returns / Sets the textual content of an element and all its descendants.

Obsolete properties.

  • Node.localName: This is an obsolete API and is no longer guaranteed to work. Read only. Returns a DOMString representing the local part of the qualified name of an element.

    Note: In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML.

  • Node.namespaceURI: This is an obsolete API and is no longer guaranteed to work. Read only. The namespace URI of this node, or null if it is no namespace.

    Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml/ namespace in both HTML and XML trees.

  • Node.nodePrincipal: This API has not been standardized. Obsolete since Gecko 46. A nsIPrincipal representing the node principal.
  • Node.prefix: This is an obsolete API and is no longer guaranteed to work. Read only. Is a DOMString representing the namespace prefix of the node, or null if no prefix is specified.
  • Node.rootNode: This is an obsolete API and is no longer guaranteed to work. Read only. Returns a Node object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This has been replaced by Node.getRootNode().

Element Object Method

Some typical Document object methods are.

Inherits methods from its parent, EventTarget.

  • Node.appendChild(): Adds the specified childNode argument as the last child to the current node.
    If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.
  • Node.cloneNode(): Clone a Node, and optionally, all of its contents. By default, it clones the content of the node.
  • Node.compareDocumentPosition(): Compares the position of the current node against another node in any other document.
  • Node.contains(): Returns a Boolean value indicating whether a node is a descendant of a given node or not.
  • Node.getRootNode(): Returns the context object's root which optionally includes the shadow root if it is available.
  • Node.hasChildNodes(): Returns a Boolean indicating if the element has any child nodes, or not.
  • Node.insertBefore(): Inserts a Node before the reference node as a child of a specified parent node.
  • Node.isDefaultNamespace(): Accepts a namespace URI as an argument and returns a Boolean with a value of true if the namespace is the default namespace on the given node or false if not.
  • Node.isEqualNode(): Returns a Boolean which indicates whether or not two nodes are of the same type and all their defining data points match.
  • Node.isSameNode(): Returns a Boolean value indicating whether or not the two nodes are the same (that is, they reference the same object).
  • Node.lookupPrefix(): Returns a DOMString containing the prefix for a given namespace URI, if present, and null if not. When multiple prefixes are possible, the result is implementation-dependent.
  • Node.lookupNamespaceURI(): Accepts a prefix and returns the namespace URI associated with it on the given node if found (and null if not). Supplying null for the prefix will return the default namespace.
  • Node.normalize(): Clean up all the text nodes under this element (merge adjacent, remove empty).
  • Node.removeChild(): Removes a child node from the current element, which must be a child of the current node.
  • Node.replaceChild(): Replaces one child Node of the current one with the second one given in parameter.

Obsolete methods.

  • Node.getFeature(): This is an obsolete API and is no longer guaranteed to work.
  • Node.getUserData(): This is an obsolete API and is no longer guaranteed to work. Allows a user to get some DOMUserData from the node.
  • Node.hasAttributes(): This is an obsolete API and is no longer guaranteed to work.
  • Returns a Boolean indicating if the element has any attributes, or not.
  • Node.isSupported(): This is an obsolete API and is no longer guaranteed to work. Returns a Boolean flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.
  • Node.setUserData(): This is an obsolete API and is no longer guaranteed to work. Allows a user to attach, or remove, DOMUserData to the node.

Others Misc.

  • attributes: A NamedNodeMap containing the attributes of this node (if it is an Element)

Source/Reference

  • https://developer.mozilla.org/en-US/docs/Web/API/Node
  • https://www.w3schools.com/xml/dom_node.asp

©sideway

ID: 190500025 Last Updated: 2019/5/25 Revision: 0

IMAGE

Home (5)

Business

Management

HBR (3)

Information

Recreation

Hobbies (7)

Culture

Chinese (1097)

English (336)

Reference (66)

Computer

Hardware (149)

Software

Application (187)

Digitization (24)

Numeric (19)

Programming

Web (602)new

CSS (SC)

ASP.NET (SC)new

HTML

Knowledge Base

Common Color (SC)

Html Entity (Unicode) (SC)

Html 401 Special (SC)

OS (373)new

MS Windows

Windows10 (SC)

.NET Framework (SC)new

DeskTop (6)

Knowledge

Mathematics

Formulas (8)

Number Theory (206)

Algebra (20)

Trigonometry (18)

Geometry (18)

Calculus (67)

Complex Analysis (21)

Engineering

Tables (8)

Mechanical

Mechanics (1)

Rigid Bodies

Statics (92)

Dynamics (37)

Fluid (5)

Fluid Kinematics (5)

Control

Process Control (1)

Acoustics (19)

FiniteElement (2)

Biology (1)

Geography (1)

Latest Updated Links

Copyright © 2000-2019 Sideway . All rights reserved Disclaimers last modified on 10 Feb 2019