Javascript Document - 38 Properties (Reference)

Tech:
Javascript
Since:
1 year ago
Views:
8

The HTML DOM Document is the root node of the document tree. This document object represents the entire web page. Document object provides properties to access the document's information.

Contents:

documentElement

It returns html or root element.

var x = document.documentElement;

head

It returns head element.

var x = document.head;

body

It returns body element.

var x = document.body;

scrollingElement

It returns current scrolling element.

var x = document.scrollingElement;

doctype

It returns doctype of the document.

var x = document.doctype;
// < !DOCTYPE html>

compatMode

It returns the compatibility mode of the document.

var x = document.compatMode;
// BackCompat - if the document is in quirks mode
// CSS1Compat - if the document is in no-quirk (standards)

// read only

implementation

It returns the DOM implementation object. To check if DOM supported.

var x = document.implementation;
// DOMImplementation {}

var x = document.implementation.hasFeature("HTML", "2.0");
// true

// read only

characterSet

It returns the character set of the document.

var x = document.characterSet;
// "UTF-8"

// read only

contentType

It returns the content type of the document.

var x = document.contentType;
// "text/html"

// read only

documentURI

It returns the URI of the document.

var x = document.documentURI;
// "https://www.fallinfo.com"

// read only

fonts

It returns the fonts of the document.

var x = document.fonts;
// returns FontFaceSet

var y = document.fonts.status;
// loaded

document.fonts.ready.then(function() {
  // Code
});

hidden

It returns the hidden state of the document.

var x = document.hidden;
// false

// read only

visibilityState

It returns the visibility state of the document.

var x = document.visibilityState;
// "visible"

// read only

title

It returns the title of the document.

var x = document.title;
// "fallinfo"

// read only

readyState

It returns loading status of the document.

var x = document.readyState;
// "complete"

// read only

lastModified

It returns the last modified date of the document.

var x = document.lastModified;
// "10/14/2020 20:45:00"

// read only

timeline

It returns the timeline of the document.

var x = document.timeline;
// DocumentTimeline {currentTime: 1052012.961}

// read only

dir

It returns the direction of the document.

var x = document.dir;
// "rlt"

document.dir = "rtl";
document.dir = "ltr";

// text direction

designMode

It returns the design mode of the document. It gets/sets the ability to edit the whole document.

var x = document.designMode;
// OFF - default

childElementCount

It returns the number of child elements.

var x = document.childElementCount;
// 1

// child count

children

It returns the child elements.

var x = document.children;

firstElementChild

It returns the first child element.

var x = document.firstElementChild;

// safari - N
// IOS safari - N
// IE - N

lastElementChild

It returns last child element.

var x = document.lastElementChild;

// safari - N
// IOS safari - N
// IE - N

embeds

It returns all embedded elements.

var x = document.embeds;

plugins

It returns all embedded elements.

var x = document.plugins;

forms

It returns all form elements.

var x = document.forms;

images

It returns all images.

var x = document.images;

It returns all links.

var x = document.links;

scripts

It returns all script elements.

var x = document.scripts;

URL

It returns the URL of the document.

var x = document.URL;
// "https://www.fallinfo.com"

// read only

referrer

It returns the referrer of the document.

var x = document.referrer;
// "https://www.fallinfo.com"

// read only

location

It returns the URI of the current document.

var x = document.location;

// Object

It returns the cookie of the document.

var x = document.cookie;
// "some_cookie_data"

// setting cookie
document.cookie = "111=aaa";

// cookie with expiry
document.cookie = "111=aaa; expires=Thu, 18 Dec 2013 12:00:00 UTC";

// cookie with path specified
document.cookie = "111=aaa; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

// deleting cookie
document.cookie = "111=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";


// Example - Set cookie

var key = "111";
var value = "aaa";
var expiry_days = 10;
var date = new Date();

date.setTime(date.getTime() + (expiry_days*24*60*60*1000));
var expires = "expires="+ date.toUTCString();
document.cookie = key + "=" + value + ";" + expires + ";path=/";


// Example -  Get cookie

var name = "111=";
var decodedCookie = decodeURIComponent(document.cookie);
var splitted = decodedCookie.split(';');

for(var i = 0; i < splitted.length; i++) {
  var c = splitted[i];
  while (c.charAt(0) == ' ') {
    c = c.substring(1);
  }
  if (c.indexOf(name) == 0) {
    console.log(c.substring(name.length, c.length));
  }
}


// Example -  Check cookie

var key = getCookie("111");
if (key != "") {
 alert("cookie found");
} else {
  // set cookie
  }
}

defaultView

It returns window object.

var x = document.defaultView;

// Object

activeElement

It return active element.

var x = document.activeElement;
var x = ShadowRoot.activeElement;

fullscreenElement

It return fullscreen element.

var x = document.fullscreenElement;
var x = ShadowRoot.fullscreenElement;

pointerLockElement

It return pointerLockElement element.

var x = document.pointerLockElement;
var x = ShadowRoot.pointerLockElement;

styleSheets

It returns all styleSheet elements.

var x = document.styleSheets;
var x = ShadowRoot.styleSheets;

// object
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