Javascript Node - 18 properties (Reference)

Tech:
Javascript
Since:
1 year ago
Views:
5

In JavaScript, Node is a reference to the HTML DOM element. A Node gives access to the various properties of the element.

Node Properties:

baseURI

It returns the absolute base URL of a Node. It is a read-only property.

var x = document.body.baseURI;
// www.fallinfo.com

isConnected

It returns a boolean indicating whether the node is connected to the context object. It is a read-only property.

var x = document.body.isConnected;
// true

childNodes

It returns a live NodeList of child nodes. It is a read-only property.

var x = document.body.childNodes;
// NodeList(11) [text, div.header, div#cs, script, text, script, text, comment]

firstChild

It returns the node's first child in the tree. It is a read-only property.

var x = document.body.firstChild;
// #text

lastChild

It returns the node's last child in the tree. It is a read-only property.

var x = document.body.lastChild;
// #text

nextSibling

It returns the node immediately following the specified one in their parent's childNodes. It is a read-only property.

var x = document.body.nextSibling;
// null

previousSibling

It returns the node immediately preceding the specified one in their parent's childNodes. It is a read-only property.

var x = document.body.previousSibling;
// null

nodeName

It returns the name of the current Node as a string. It is a read-only property.

var x = document.body.nodeName;
// "BODY"

// Attr
// The value of Attr.name

// CDATASection
// "#cdata-section"

// Comment
// "#comment"

// Document
// "#document"

// DocumentFragment
// "#document-fragment"

// DocumentType
// The value of DocumentType.name

// Element
// The value of Element.tagName

// Entity
// The entity name

// EntityReference
// The name of entity reference

// Notation
// The notation name

// ProcessingInstruction
// The value of ProcessingInstruction.target

// Text
// "#text"

nodeType

Integer that identifies what the node is. It is a read-only property.

var x = document.body.nodeType;
// 1

// Node.ELEMENT_NODE    1
// An Element node

// Node.TEXT_NODE   3
// The actual Text inside an Element or Attr

// Node.CDATA_SECTION_NODE  4
// A CDATASection, such as

// Node.PROCESSING_INSTRUCTION_NODE 7
// A ProcessingInstruction of an XML document

// Node.COMMENT_NODE    8
// A Comment node

// Node.DOCUMENT_NODE   9
// A Document node

// Node.DOCUMENT_TYPE_NODE  10
// A DocumentType node, such as < !DOCTYPE html>

// Node.DOCUMENT_FRAGMENT_NODE  11
// A DocumentFragment node

nodeValue

It returns or sets the value of the current node. It is a read-write property.

var x = document.body.nodeValue;
// null

// CDATASection
// Content of the CDATA section

// Comment
// Content of the comment

// Document
// null

// DocumentFragment
// null

// DocumentType
// null

// Element
// null

// NamedNodeMap
// null

// EntityReference
// null

// Notation
// null

// ProcessingInstruction
// Entire content excluding the target

// Text
// Content of the text node

ownerDocument

It returns the top-level document object of the node. It is a read-only property.

var x = document.body.ownerDocument;
// #document

parentNode

It returns the parent of the specified node in the DOM tree. It is a read-only property.

var x = document.body.parentNode;
// #html

parentElement

It returns the DOM node's parent Element, or null. It is a read-only property.

var x = document.body.parentElement;
// #html

textContent

It represents the text content of the node and its descendants. It is a read-only property.

var x = document.body.textContent;
// all the child text

childElementCount

It returns an unsigned long representing the number of child elements of the given element. It is a read-only property.

var x = document.getElementById("id_name");
if (x.childElementCount > 0) {
  // code
}

// no safari support

children

It returns a live HTMLCollection which contains all of the child elements of the node. It is a read-only property.

var x = document.getElementById("id_name");
for (let i = 0; i < x.children.length; i++) {
  // code
}

firstElementChild

It returns the first node which is both a child of this ParentNode and is also an Element. It is a read-only property.

var x = document.getElementById("id_name");
var y = x.firstElementChild;
// node

lastElementChild

It returns the last node which is both a child of this ParentNode and is an Element. It is a read-only property.

var x = document.getElementById("id_name");
var y = x.lastElementChild;
// node
More Articles
Javascript Number - 10 Methods and 5 Properties (Reference)
2 years ago
1
Javascript Statements - 16 Statements (Reference)
2 years ago
6
Javascript matchMedia - 2 Methods and 2 Properties (Reference)
2 years ago
1
Javascript Object - 21 Methods (Reference)
1 year ago
3
Javascript Document - 24 Methods (Reference)
1 year ago
2