demo2s-4

Proxy Traps And Reflect Methods deleteProperty()

The deleteProperty() trap is called inside the delete operator. 

Its corresponding Reflect API method is Reflect.deleteProperty().

Example

const myTarget = {};

const proxy = new Proxy(myTarget, {
  deleteProperty(target, property) {
    console.log('deleteProperty()');
    return Reflect.deleteProperty(...arguments)
  }
 });

delete proxy.foo

Output:

Return value
deleteProperty() must return a Boolean indicating if the property was successfully deleted or not.

Non-Boolean return values will be coerced into a Boolean.

Intercepted operations

delete proxy.property
delete proxy[property]
Reflect.deleteProperty(proxy, property)

Trap handler parameters
target - Target object
property - String key property being referenced on target object

Trap invariants
If an own target.property exists and is non-configurable, the handler cannot delete the property.

Proxy Traps And Reflect Methods ownKeys()

The ownKeys() trap is called inside Object.keys() and similar methods. 

Its corresponding Reflect API method is Reflect.ownKeys().

Example

const myTarget = {};

const proxy = new Proxy(myTarget, {
 ownKeys(target) {
   console.log('ownKeys()');
   return Reflect.ownKeys(...arguments)
 }
});

Object.keys(proxy);

Output:

Return value
ownKeys() must return an enumerable object that contains either strings or symbols.

Intercepted operations

Object.getOwnPropertyNames(proxy)
Object.getOwnPropertySymbols(proxy)
Object.keys(proxy)
Reflect.ownKeys(proxy)

Trap handler parameters
target - Target object
Trap invariants
The returned enumerable object must contain all non-configurable own properties of target.

If target is non-extensible, the returned enumerable object must exactly contain the own property
keys of target.

Proxy Traps And Reflect Methods getPrototypeOf()

The getPrototypeOf() trap is called inside Object.getPrototypeOf(). 

Its corresponding Reflect API method is Reflect.getPrototypeOf().

Example

const myTarget = {};

const proxy = new Proxy(myTarget, {
  getPrototypeOf(target) {
    console.log('getPrototypeOf()');
    return Reflect.getPrototypeOf(...arguments)
  }
});

Object.getPrototypeOf(proxy);

Output:

Return value
getPrototypeOf() must return an object or null.

Intercepted operations

Object.getPrototypeOf(proxy)
Reflect.getPrototypeOf(proxy)
proxy.__proto__
Object.prototype.isPrototypeOf(proxy)
proxy instanceof Object

Trap handler parameters
target - Target object
Trap invariants
If target is non-extensible, the only valid return value of Object.getPrototypeOf(proxy) is the
value returned from Object.getPrototypeOf(target).

Proxy Traps And Reflect Methods setPrototypeOf()

The setPrototypeOf() trap is called inside Object.setPrototypeOf(). 

Its corresponding Reflect API method is Reflect.setPrototypeOf().

Example

const myTarget = {};

const proxy = new Proxy(myTarget, {
  setPrototypeOf(target, prototype) {
    console.log('setPrototypeOf()');
    return Reflect.setPrototypeOf(...arguments)
  }
});

Object.setPrototypeOf(proxy, Object);

Output:

Return value
setPrototypeOf() must return a Boolean indicating if the prototype assignment was successful or
not. Non-Boolean return values will be coerced into a Boolean.

Intercepted operations

Object.setPrototypeOf(proxy)
Reflect.setPrototypeOf(proxy)

Trap handler parameters
target - Target object
prototype - The intended replacement prototype for target, or null if this is to be a top-
level prototype

Trap invariants
If target is non-extensible, the only valid prototype parameter is the value returned from Object.
getPrototypeOf(target).

Proxy Traps And Reflect Methods isExtensible()

The isExtensible() trap is called inside Object.isExtensible(). 

Its corresponding Reflect API method is Reflect.isExtensible().

Example

const myTarget = {};

const proxy = new Proxy(myTarget, {
  isExtensible(target) {
    console.log('isExtensible()');
    return Reflect.isExtensible(...arguments)
  }
});

Object.isExtensible(proxy);

Output:

Return value
isExtensible() must return a Boolean indicating if the prototype assignment was successful or not.

Non-Boolean return values will be coerced into a Boolean.

Intercepted operations

Object.isExtensible(proxy)
Reflect.isExtensible(proxy)

Trap handler parameters
target - Target object
Trap invariants
If target is extensible, the handler must return true.

If target is non-extensible, the handler must return false.

Proxy Traps And Reflect Methods preventExtensions()

The preventExtensions() trap is called inside Object.preventExtensions(). 

Its corresponding Reflect API method is Reflect.preventExtensions().

Example

const myTarget = {};

const proxy = new Proxy(myTarget, {
  preventExtensions(target) {
    console.log('preventExtensions()');
    return Reflect.preventExtensions(...arguments)
  }
});

Object.preventExtensions(proxy);

Output:

Return value
preventExtensions() must return a Boolean indicating if target is already non-extensible. 

Non-Boolean return values will be coerced into a Boolean.

Intercepted operations

Object.preventExtensions(proxy)
Reflect.preventExtensions(proxy)

Trap handler parameters
target - Target object
Trap invariants
If Object.isExtensible(proxy) is false, the handler must return true.

Proxy Traps And Reflect Methods apply()

The apply() trap is called on function calls. 

Its corresponding Reflect API method is Reflect.apply().

Example

const myTarget = () => {};
 const proxy = new Proxy(myTarget, {
  apply(target, thisArg, ...argumentsList) {
    console.log('apply()');
    return Reflect.apply(...arguments)
  }
});

proxy();

Output:

Return value
The return value is unrestricted.

Intercepted operations

proxy(...argumentsList)
Function.prototype.apply(thisArg, argumentsList)
Function.prototype.call(thisArg, ...argumentsList)
Reflect.apply(target, thisArgument, argumentsList)

Trap handler parameters

target - Target object

thisArg - this argument for the function call

argumentsList - List of arguments for the function call

Trap invariants
target must be a function object.

Proxy Traps And Reflect Methods construct()

The construct() trap is called inside the new operator. 

Its corresponding Reflect API method is Reflect.construct().

Example

const myTarget = function() {};

const proxy = new Proxy(myTarget, {
 construct(target, argumentsList, newTarget) {
   console.log('construct()');
   return Reflect.construct(...arguments)
 }
});

new proxy;

Output:

Return value
construct() must return an object.

Intercepted operations

new proxy(...argumentsList)
Reflect.construct(target, argumentsList, newTarget)

Trap handler parameters

target - Target constructor

argumentsList - List of arguments passed to the target constructor

newTarget - The originally called constructor

Trap invariants
target must be able to be used as a constructor.

Tracking Property Access via Proxy

The Proxy get() and set() can provide insight into when object properties are being
accessed and inspected. 

If you provide a trapped proxy to an object throughout your application, you
will be able to see exactly when and where this object is accessed:

const user = {
  name: 'CSS'
};

const proxy = new Proxy(user, {
  get(target, property, receiver) {
    console.log(`Getting roperty`);

    return Reflect.get(...arguments);
  },
  set(target, property, value, receiver) {
    console.log(`Setting ${property}=${value}`);

    return Reflect.set(...arguments);
  }
});

proxy.name;      // Getting name
proxy.age = 27;  // Setting age=27

Output:



Hide Properties via Proxy

We can use proxy to hide properties on the target object. 

For example:

const hiddenProperties = ['foo', 'bar'];
const targetObject = {//    w  w  w  .d    em   o  2 s  .   c  o  m 
  foo: 1,
  bar: 2,
  baz: 3
};
const proxy = new Proxy(targetObject, {
  get(target, property) {
    if (hiddenProperties.includes(property)) {
      return undefined;
    } else {
      return Reflect.get(...arguments);
    }
  },
  has(target, property) {
    if (hiddenProperties.includes(property)) {
      return false;
    } else {
      return Reflect.has(...arguments);
    }
  }
});

// get()
console.log(proxy.foo);  // undefined
console.log(proxy.bar);  // undefined
console.log(proxy.baz);  // 3

// has()
console.log('foo' in proxy);  // false
console.log('bar' in proxy);  // false
console.log('baz' in proxy);  // true

Output:



Property Validation via Proxy

Because all assignments must go through the set() trap, you can allow or reject assignments based
on the content of the intended value:

const target = {
  MyNumber: 0
};

const proxy = new Proxy(target, {
  set(target, property, value) {
    if (typeof value !== 'number') {
      return false;
    } else {
      return Reflect.set(...arguments);
    }
  }
});
proxy.MyNumber = 1;
console.log(proxy.MyNumber);  // 1
proxy.MyNumber = '2';
console.log(proxy.MyNumber);  // 1

Output:



Function and Constructor Parameter Validation via Proxy

We can use Proxy to validate function and constructor
parameters. 

For example, a function can ensure that it is only provided values of a certain type:

function median(...nums) {
  return nums.sort()[Math.floor(nums.length / 2)];
}

const proxy = new Proxy(median, {
  apply(target, thisArg, ...argumentsList) {
    console.log('parameter is');
    console.log(argumentsList);
    return Reflect.apply(...arguments);
  }
});

console.log(proxy(4, 7, 1));    
console.log(proxy(4, '7', 1));

Output:

Similarly, a constructor can enforce the presence of constructor parameters:

class User {/* w   w  w.  d    e m   o2  s    . c o   m */
  constructor(id) {
    this.id_ = id;
  }
}

const proxy = new Proxy(User, {
  construct(target, argumentsList, newTarget) {
    if (argumentsList[0] === undefined) {
      throw 'User cannot be instantiated without id';
    } else {
      return Reflect.construct(...arguments);
    }
  }
});

new proxy(1);
new proxy();

Output:



Data Binding and Observable via Proxy

Proxying can use the existence of various parts of the runtime that would otherwise
be disparate. 

For example, a proxied class can be bound to a global collection of instances so that every created
instance is added to that collection:

const userList = [];//  w    w w .    d e   mo  2   s .  c  o  m  

class User {
  constructor(name) {
    this.name_ = name;
  }
 }

const proxy = new Proxy(User, {
  construct() {
    const newUser = Reflect.construct(...arguments);
    userList.push(newUser);
    return newUser;
  }
 });

new proxy('CSS1');
new proxy('CSS2');
new proxy('CSS3');

console.log(userList); // [User {}, User {}, User{}]

Output:

Alternately, a collection can be bound to an emitter, which will fire each time a new instance
is inserted:

const userList = [];//   w  w  w  .   d  e m  o   2s   .  c  o m  

function emit(newValue) {
  console.log(newValue);
 }

const proxy = new Proxy(userList, {
  set(target, property, value, receiver) {
    const result = Reflect.set(...arguments);
    if (result) {
      emit(Reflect.get(target, property, receiver));
    }
    return result;
  }
 });

proxy.push('CSS1');

proxy.push('CSS2');

Output:



Introduction To Asynchronous Programming

ECMAScript 6 introduces a formal Promise reference type,
allowing for elegant definition and organization of asynchronous behavior.

Later editions also
extended the language to support asynchronous functions with the async and await keywords.

Synchronous 
Synchronous behavior is analogous to sequential processor instructions.

Each instruction
is executed in the order in which it appears, and each instruction can 
get information stored locally within the system.

It is easy to get the program state at any given time.

Asynchronous
Asynchronous behavior is analogous to interrupts, where an entity external to the current
process is able to trigger code execution.

An asynchronous operation can avoid waiting for operations which can take 
a long time to finish.

The following JavaScript code performs an arithmetic operation inside a timeout:

let x = 3;
setTimeout(() => x = x + 4, 1000);

For the value of x to become useful, this asynchronously executed function would need to signal to
the rest of the program that it has updated the value of x.

However, if the program does not need this
value, then it is free to proceed and do other work instead of waiting for the result.

Promise Introductions

ECMAScript 6 introduced a first-class implementation of a Promise type to handle async 
operations.

ECMAScript 6 Promise is a reference type and can be instantiated with the new
operator.

We need to pass an executor function parameter,
which here is an empty function object:

let p = new Promise(() => {});
setTimeout(console.log, 0, p);  // Promise <pending>

Output:

If an executor function is not provided, a SyntaxError will be thrown.

State
There are two primary reasons the Promise construct is useful.

The first is to abstractly represent a
block of asynchronous execution.

The state of the promise tells whether or not the promise has yet to complete execution.

The pending state indicates that execution has not yet begun or is still in progress.

The fulfilled state tells that the execution has completed successfully.

The rejected state tells that the execution did not complete successfully.

Promise State Machine

When passing a promise instance to console.log, the console output indicates that this promise instance is pending.

let p = new Promise(() => {});
setTimeout(console.log, 0, p);  // Promise <pending>

Output:

A promise is a stateful object that can exist in one of three states:

Pending
Fulfilled (or resolved)
Rejected

A pending state is the initial state a promise begins in.

From a pending state, a promise can become
settled by turning to a fulfilled state to indicate success, or a rejected state to indicate failure.

This transition to a settled state is irreversible; once a transition to either fulfilled or rejected occurs,
the state of the promise can never change.

It is not guaranteed that a promise will ever leave the pending state.

Therefore, well-structured code should behave properly if the promise 
successfully resolves, if the promise rejects, or if it never exits the pending state.

The state of a promise is private and cannot be directly inspected in JavaScript.

The state of a promise cannot be mutated by external JavaScript.

The promise intentionally encapsulates a block of asynchronous behavior, and external code performing synchronous definition of its
state would be antithetical to its purpose.

Controlling Promise State with the Executor

Because the state of a promise is private, it can only be manipulated internally.

This internal manipulation
is performed inside the promise's executor function.

The executor function has two primary duties: 
initializing the asynchronous behavior of the promise, and controlling any eventual state transition.

Control of the state transition is accomplished by invoking one of its two function parameters, typically named
resolve and reject.

Invoking resolve will change the state to fulfilled; invoking reject will change the
state to rejected.

Invoking rejected() will also throw an error.

let p1 = new Promise((resolve, reject) => resolve());
setTimeout(console.log, 0, p1);  // Promise <resolved>

let p2 = new Promise((resolve, reject) => reject());
setTimeout(console.log, 0, p2);  // Promise <rejected>
// Uncaught error (in promise)

The executor function will execute synchronously, as it acts as the initializer for the promise.

This order of execution is demonstrated here:

new Promise(() => setTimeout(console.log, 0, 'executor'));
setTimeout(console.log, 0, 'promise initialized');

Output:

You can delay the state transition by adding a setTimeout:

let p = new Promise((resolve, reject) => setTimeout(resolve, 1000));

// When this console.log executes, 
// the timeout callback has not yet executed:
setTimeout(console.log, 0, p);  // Promise <pending>

Once either resolve or reject is invoked, the state transition cannot be undone.

Attempts to further mutate the state will silently be ignored.

This is demonstrated here:

let p = new Promise((resolve, reject) => {
   resolve();
   reject();  // No effect
});

setTimeout(console.log, 0, p);  // Promise <resolved>

You can avoid promises getting stuck in a pending state by adding timed exit behavior.

For example, you can set a timeout to reject the promise after 10 seconds:

let p = new Promise((resolve, reject) => {
    setTimeout(reject, 10000);  // After 10 seconds, invoke reject()
    // Do executor things
});

setTimeout(console.log, 0, p);      // Promise <pending>
setTimeout(console.log, 11000, p);  // Check state after 11 seconds

Output:

Because a promise can only change state a single time, this timeout behavior allows you to safely set
a maximum on the amount of time a promise can remain in the pending state.

If the code inside the
executor were to resolve or reject prior to the timeout, the timeout handler's attempt to reject the
promise will be silently ignored.

Promise Casting with Promise.resolve()

We can instantiate a promise in the "resolved" state by invoking the Promise.resolve() static method.

The following two promise instantiations are effectively equivalent:

let p1 = new Promise((resolve, reject) => resolve());
let p2 = Promise.resolve();

The value of this resolved promise will become the first argument passed to Promise.resolve().

This effectively allows you to "cast" any value into a promise:

setTimeout(console.log, 0, Promise.resolve());
// Promise <resolved>: undefined

setTimeout(console.log, 0, Promise.resolve(3));
// Promise <resolved>: 3

// Additional arguments are ignored
setTimeout(console.log, 0, Promise.resolve(4, 5, 6));
// Promise <resolved>: 4

This static method can act as a pass through when the
argument is already a promise.

Calling Promise.resolve() more than once returns the same result, as demonstrated here:

let p = Promise.resolve(7);

setTimeout(console.log, 0, p === Promise.resolve(p));
// true

setTimeout(console.log, 0, p === Promise.resolve(Promise.resolve(p)));
// true

Promise.resolve() will respect the state of the promise passed to it:

let p = new Promise(() => {});

setTimeout(console.log, 0, p);                   // Promise <pending>
setTimeout(console.log, 0, Promise.resolve(p));  // Promise <pending>

setTimeout(console.log, 0, p === Promise.resolve(p));  // true

Promise.resolve() can wrap any non-promise, including an error object, as a
resolved promise, which might lead to unintended behavior:

let p = Promise.resolve(new Error('foo'));

setTimeout(console.log, 0, p);
// Promise <resolved>: Error: foo

Promise Rejection with Promise.reject()

Promise.reject() instantiates a rejected promise and
throws an asynchronous error.

The asynchronous error will not be caught by try/catch and can only be caught by a
rejection handler.

The following two promise instantiations are effectively equivalent:

let p1 = new Promise((resolve, reject) => reject());
let p2 = Promise.reject();

The 'reason' field of this resolved promise will be the first argument passed to Promise.reject().

This will also be the error passed to the reject handler:

let p = Promise.reject(3);
setTimeout(console.log, 0, p);  // Promise <rejected>: 3

p.then(null, (e) => setTimeout(console.log, 0, e));  // 3

Promise then() method

The method Promise.prototype.then() is used to attach handlers to a
promise instance.

The then() method accepts up to two arguments: an optional onResolved handler
function, and an optional onRejected handler function.

Each will execute only when the promise
upon which they are defined reaches its respective "fulfilled" or "rejected" state.

function onResolved(id) {
  setTimeout(console.log, 0, id, 'resolved');
}
function onRejected(id) {
  setTimeout(console.log, 0, id, 'rejected');
}

let p1 = new Promise((resolve, reject) => setTimeout(resolve, 3000));
let p2 = new Promise((resolve, reject) => setTimeout(reject, 3000));

p1.then(() => onResolved('p1'),
         () => onRejected('p1'));
p2.then(() => onResolved('p2'),
         () => onRejected('p2'));

Output:

Because a promise can only transition to a final state a single time, you are guaranteed that execution
of these handlers is mutually exclusive.

Both handler arguments are completely optional.

Any non-function type provided as an argument to then() will be ignored.

If you wish to explicitly provide only an
onRejected handler, providing undefined as the onResolved argument is the canonical choice.

function onResolved(id) {
  setTimeout(console.log, 0, id, 'resolved');
}
function onRejected(id) {
  setTimeout(console.log, 0, id, 'rejected');
}

let p1 = new Promise((resolve, reject) => setTimeout(resolve, 3000));
let p2 = new Promise((resolve, reject) => setTimeout(reject, 3000));

// Non-function handlers are ignored, not recommended
p1.then('do this');

// Canonical form of explicit onResolved handler skipping
p2.then(null, () => onRejected('p2'));

// p2 rejected (after 3s)

The Promise.prototype.then() method returns a new promise instance:

let p1 = new Promise(() => {});
let p2 = p1.then();
setTimeout(console.log, 0, p1);         // Promise <pending>
setTimeout(console.log, 0, p2);         // Promise <pending>
setTimeout(console.log, 0, p1 === p2);  // false

This new promise instance is derived from the return value of the onResolved handler. 

The return value
of the handler is wrapped in Promise.resolve() to generate a new promise. 

If no handler function is
provided, the method acts as a pass through for the initial promise's resolved value. 

If there is no explicit
return statement, the default return value is undefined and wrapped in a Promise.resolve().

let p1 = Promise.resolve('foo');

// Calling then() with no handler function acts as a pass through
let p2 = p1.then();
setTimeout(console.log, 0, p2);  // Promise <resolved>: foo

// These are equivalent
let p3 = p1.then(() => undefined);
let p4 = p1.then(() => {});
let p5 = p1.then(() => Promise.resolve());

setTimeout(console.log, 0, p3);  // Promise <resolved>: undefined
setTimeout(console.log, 0, p4);  // Promise <resolved>: undefined
setTimeout(console.log, 0, p5);  // Promise <resolved>: undefined

These are equivalent:

let p6 = p1.then(() => 'bar');
let p7 = p1.then(() => Promise.resolve('bar'));

setTimeout(console.log, 0, p6);  // Promise <resolved>: bar
setTimeout(console.log, 0, p7);  // Promise <resolved>: bar

Promise.resolve() preserves the returned promise

let p8 = p1.then(() => new Promise(() => {}));
let p9 = p1.then(() => Promise.reject());
// Uncaught (in promise): undefined

setTimeout(console.log, 0, p8);  // Promise <pending>
setTimeout(console.log, 0, p9);  // Promise <rejected>: undefined

Throwing an exception will return a rejected promise:

let p10 = p1.then(() => { throw 'baz'; });
// Uncaught (in promise) baz

setTimeout(console.log, 0, p10);  // Promise <rejected> baz

Returning an error will not trigger the same rejection behavior, and will instead wrap the
error object in a resolved promise:

let p11 = p1.then(() => Error('qux'));

setTimeout(console.log, 0, p11);  // Promise <resolved>: Error: qux

The onRejected handler behaves in the same way: values returned from the onRejected handler
are wrapped in Promise.resolve().

The onRejected handler is doing its job to catch an asynchronous error.

This rejection handler completing
execution without throwing an additional error should be considered expected promise behavior and
therefore return a resolved promise.

Using Promise.resolve()

let p1 = Promise.reject('foo');

Calling then() with no handler function acts as a pass through

let p2 = p1.then();
// Uncaught (in promise) foo

setTimeout(console.log, 0, p2);  // Promise <rejected>: foo

These are equivalent

let p3 = p1.then(null, () => undefined);
let p4 = p1.then(null, () => {});
let p5 = p1.then(null, () => Promise.resolve());

setTimeout(console.log, 0, p3);  // Promise <resolved>: undefined
setTimeout(console.log, 0, p4);  // Promise <resolved>: undefined
setTimeout(console.log, 0, p5);  // Promise <resolved>: undefined

These are equivalent

let p6 = p1.then(null, () => 'bar');
let p7 = p1.then(null, () => Promise.resolve('bar'));

setTimeout(console.log, 0, p6);  // Promise <resolved>: bar
setTimeout(console.log, 0, p7);  // Promise <resolved>: bar

Promise.resolve() preserves the returned promise

let p8 = p1.then(null, () => new Promise(() => {}));
let p9 = p1.then(null, () => Promise.reject());
// Uncaught (in promise): undefined

setTimeout(console.log, 0, p8);  // Promise <pending>
setTimeout(console.log, 0, p9);  // Promise <rejected>: undefined
let p10 = p1.then(null, () => { throw 'baz'; });
// Uncaught (in promise) baz

setTimeout(console.log, 0, p10);  // Promise <rejected>: baz

let p11 = p1.then(null, () => Error('qux'));

setTimeout(console.log, 0, p11);  // Promise <resolved>: Error: qux

Promise catch() method

The Promise.prototype.catch() method can attach a reject handler to a promise.

It only takes a single argument, the onRejected handler function. 

The method is the same as Promise.prototype.then(null,onRejected).

The following code demonstrates this equivalence:

let p = Promise.reject();
let onRejected = function(e) {
    setTimeout(console.log, 0, 'rejected');
};

// These two reject handlers behave identically:
p.then(null, onRejected);  // rejected
p.catch(onRejected);       // rejected

The Promise.prototype.catch() method returns a new promise instance:

let p1 = new Promise(() => {});
let p2 = p1.catch();
setTimeout(console.log, 0, p1);         // Promise <pending>
setTimeout(console.log, 0, p2);         // Promise <pending>
setTimeout(console.log, 0, p1 === p2);  // false

With respect to creation of the new promise instance, Promise.prototype.catch() behaves 
identically to the onRejected handler of Promise.prototype.then().

Promise finally() method

The Promise.prototype.finally() method can be used to attach an onFinally handler, which
executes when the promise reaches either a resolved or a rejected state. 

This is useful for avoiding
code duplication between onResolved and onRejected handlers. 

The handler cannot determine if the promise was resolved or rejected, so this method is 
used for things like cleanup.

let p1 = Promise.resolve();
let p2 = Promise.reject();
let onFinally = function() {
    setTimeout(console.log, 0, 'Finally!')
}

p1.finally(onFinally);  // Finally
p2.finally(onFinally);  // Finally

The Promise.prototype.finally() method returns a new promise instance:

let p1 = new Promise(() => {});
let p2 = p1.finally();
setTimeout(console.log, 0, p1);         // Promise <pending>
setTimeout(console.log, 0, p2);         // Promise <pending>
setTimeout(console.log, 0, p1 === p2);  // false

This new promise instance is derived in a different manner than then() or catch(). 

Because onFinally is intended to be a state-agnostic method, in most cases it will behave as a pass through
for the parent promise. 

This is true for both the resolved and rejected states.

let p1 = Promise.resolve('foo');

// These all act as a pass through
let p2 = p1.finally();
let p3 = p1.finally(() => undefined);
let p4 = p1.finally(() => {});
let p5 = p1.finally(() => Promise.resolve());
let p6 = p1.finally(() => 'bar');
let p7 = p1.finally(() => Promise.resolve('bar'));
let p8 = p1.finally(() => Error('qux'));

setTimeout(console.log, 0, p2);  // Promise <resolved>: foo
setTimeout(console.log, 0, p3);  // Promise <resolved>: foo
setTimeout(console.log, 0, p4);  // Promise <resolved>: foo
setTimeout(console.log, 0, p5);  // Promise <resolved>: foo
setTimeout(console.log, 0, p6);  // Promise <resolved>: foo
setTimeout(console.log, 0, p7);  // Promise <resolved>: foo
setTimeout(console.log, 0, p8);  // Promise <resolved>: foo

The only exceptions are when it returns a pending promise, or an error is thrown via an
explicit throw or returning a rejected promise.

In these cases, the corresponding promise is returned pending or rejected, as shown here:

// Promise.resolve() preserves the returned promise
let p9 = p1.finally(() => new Promise(() => {}));
let p10 = p1.finally(() => Promise.reject());
// Uncaught (in promise): undefined

setTimeout(console.log, 0, p9);  // Promise <pending>
setTimeout(console.log, 0, p10);  // Promise <rejected>: undefined

let p11 = p1.finally(() => { throw 'baz';});
// Uncaught (in promise) baz

setTimeout(console.log, 0, p11);  // Promise <rejected>: baz

Promise Example

Javascript Promise always run some code when a promise is fulfilled
Javascript Promise and alias
Javascript Promise async change background
Javascript Promise Async promises recursion with unknow supply of async values
Javascript Promise await Promises.all
Javascript Promise break a promise chain
Javascript Promise catch 'Uncaught (in promise) Error'
Javascript Promise catch ES6 Promise rejections and completely stop flow
Javascript Promise Catch UnhandledPromiseRejectionWarning during fetch
Javascript Promise Chaining async Promises with 1 resolve and 1 reject
Javascript Promise Composing Promises and non-promise values
Javascript Promise create a promise chain shaped like a diamond
Javascript Promise create Promises and non-promise values
Javascript Promise Creating a promise without starting to resolve it
Javascript Promise deferred pattern
Javascript Promise Delays between promises in promise chain
Javascript Promise ECMAScript 6 promises
Javascript Promise element animation
Javascript Promise example
Javascript Promise freezing browser until .then is called
Javascript Promise generators yield the data passed normally to a callback/promise
Javascript Promise get promise value
Javascript Promise handle asynchronous code
Javascript Promise ignore errors in Promise.all()
Javascript Promise ignore errors using async/await syntax in Promise.all()
Javascript Promise in promise
Javascript Promise make multiple promise
Javascript Promise make recursive promise
Javascript Promise Multiple fetch() in Promise.all
Javascript Promise Nestled API calls returning the right promise
Javascript Promise on yield and promises
Javascript Promise Promise Retry Design Patterns
Javascript Promise Promise.all to resolve fetch requests
Javascript Promise Promise.all with predicate
Javascript Promise Promise.then being resolved before previous .then with foreach
Javascript Promise Promises then/catch
Javascript Promise Q Promise resolve/reject logic
Javascript Promise rerun Promise until a condition
Javascript Promise Resolve
Javascript Promise Retry Design Patterns 2
Javascript Promise Retry Design Patterns 3
Javascript Promise return a boolean after promise has been resolved/rejected
Javascript Promise return data in Promise
Javascript Promise return from a Promise's catch/then block
Javascript Promise return from a Promise's catch/then block 2
Javascript Promise Return promise from promise
Javascript Promise returning expected value
Javascript Promise reuse
Javascript Promise run promises in parallel
Javascript Promise Sequentially running Q Promises
Javascript Promise set background color
Javascript Promise Simple new + then for Q promises
Javascript Promise take the first N Promises that pass a filter
Javascript Promise Understanding Promises
Javascript Promise use Promises correctly with multiple requests
Javascript Promise Using Promise.all to resolve fetch requests
Javascript Promise using promises with timeout
Javascript Promise View all pending promises
Javascript Promise wait 5 seconds once print out value
Javascript Promise wait for a callback to resolve a promise
Javascript Promise wait for promise before continue
Javascript Promise waiting to resolve before next then
Javascript Promise with resolve()
Javascript Promise with setTimeout


BOM Window Object

The Browser Object Model (BOM) is the core of using JavaScript on the web.

The BOM provides objects that expose browser
functionality independent of any web page content.

Window Object
At the core of the BOM is the window object, which represents an instance of the browser.

The window object acts as the JavaScript interface to the browser window and the ECMAScript Global object.

Every object, variable, and function defined
in a web page uses window as its Global object and has access to methods like parseInt().

Global Scope
Because the window object doubles as the ECMAScript Global object, all variables and 
functions declared globally with var become properties and methods of the window object.

Consider this example:

var age = 9;
var sayAge = () => console.log(this.age);

console.log(window.age);  // 9
sayAge();           // 9
window.sayAge();    // 9

Output:

Here, a variable named age and a function named sayAge() are defined in the global scope, which
automatically places them on the window object.

Thus, the variable age is also accessible as window.age, and the function sayAge() is also accessible via window.sayAge().

Because sayAge() exists in the global scope, this.age maps to window.age, and the correct result is displayed.

If let or const is substituted for var, the default attachment to the global object does
not occur:

let age = 29;
const sayAge = () => console.log(this.age);

console.log(window.age);  // undefined
sayAge();           // undefined
window.sayAge();    // TypeError: window.sayAge is not a function

BOM Window Relationships

The top object always points to the very top outer most window, which is the browser window
itself.

Another window object is called parent.

The parent object always points to the current window's immediate parent window.

For the top most browser window, parent is equal to top and both are equal to window.

The top most window has no value name unless the window
was opened using window.open().

window property self always points to window.

We can chain window objects together, such as window.parent.parent.

BOM Window Position

The position of a window object can be retrieved and changed using various properties and 
methods.

Modern browsers all provide screenLeft and screenTop properties that indicate the window's
location in relation to the left and top of the screen, respectively, in CSS pixels.

We can move the window to a new position using the moveTo() and moveBy() methods.

Each method accepts two arguments.

moveTo() expects the x and y coordinates to move to an absolute coordinate, and 
moveBy() expects the number of pixels to move relative to the current coordinate.

These methods are demonstrated here:

move the window to the upper-left coordinate

move the window down by 100 pixels

move the window to position (200, 300).

window.moveTo(200, 300);

move the window left by 50 pixels.

window.moveBy(-50, 0);

Depending on the browser, these methods may be conditionally or completely disabled.

BOM Window Size

Determining the size of a window cross-browser is not easy.

All modern browsers provide four properties: 
innerWidth, innerHeight, outerWidth, and outerHeight.

outerWidth and outerHeight return the dimensions of the browser window itself regardless of whether it's used on
the top most window object or on a frame.

The innerWidth and innerHeight properties tell the
size of the page viewport inside the browser window minus borders and toolbars.

The document.documentElement.clientWidth and 
document.documentElement.clientHeight
properties provide the width and height of the page viewport.

There's no accurate way to get the size of the browser window itself, but
we get the dimensions of the page viewport, as shown in the following example:

let pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;

if (typeof pageWidth != "number") {
  if (document.compatMode == "CSS1Compat"){
    pageWidth = document.documentElement.clientWidth;
    pageHeight = document.documentElement.clientHeight;
  } else {
    pageWidth = document.body.clientWidth;
    pageHeight = document.body.clientHeight;
  }
}

In this code, pageWidth and pageHeight are assigned initial values of 
window.innerWidth and window.innerHeight, respectively.

For mobile devices, window.innerWidth and window.innerHeight are the dimensions of the visual
viewport, which is the visible area of the page on the screen.

These values change as you zoom in or out of a page.

In other mobile browsers, the measurements of document.documentElement provide measurements
for the layout viewport, which are the actual dimensions of the rendered page as opposed to the
visual viewport, which is only a small portion of the entire page.

Because of these differences from desktop browsers, you may need to first determine if the user is on
a mobile device before deciding which measurements to use and honor.

BOM Window resize

The browser window can be resized using the resizeTo() and resizeBy() methods.

Each method accepts two arguments: resizeTo() expects a new width and height, and resizeBy() expects the
differences in each dimension.

resize to 100 x 100.

window.resizeTo(100, 100);

resize to 200 x 150.

window.resizeBy(100, 50);

resize to 300 x 300.

window.resizeTo(300, 300);

The resize methods may be disabled by the browser and are disabled by default in some browsers.

These methods apply only to the topmost window object.

BOM Window Viewport Position Scroll

We can scroll around the document with a limited viewport inside window.

The CSS pixel offset of the current viewport is available as an X and Y pair, representing the number of pixels
the viewport is currently scrolled in that direction.

The X and Y offsets are each accessible via two
properties, which return identical values: window.pageXoffset / 
window.scrollX, and window.pageYoffset / window.scrollY.

We can scroll the page by a certain amount using several different window methods.

These methods are passed two coordinates indicating how far in the X and Y direction the
viewport should scroll.window.scroll(x, y) will scroll the viewport by a relative amount.

window.scrollBy(x, y) behaves identically.

window.scrollTo(x, y) scrolls the viewport to an absolute offset.

Scroll down 100px relative to the current viewport.

window.scroll(0, 100);

Scroll right 40px relative to the current viewport.

Window.scroll(40, 0);

Scroll to the top left corner of the page.

window.scrollTo(0, 0);

Scroll to 100px from the top and left of the page.

window.scrollTo(100, 100);

These methods also accept a ScrollToOptions dictionary, 
which in addition to holding the offset
values can instruct the browser to smooth the scroll via the behavior property.

normal scroll.

window.scrollTo({
  left: 100,
  top: 100,
  behavior: 'auto'
 });

smooth scroll.

window.scrollTo({
  left: 100,
  top: 100,
  behavior: 'smooth'
});

BOM Window Open

The window.open() method can navigate to a particular URL and to open a new
browser window.

This method accepts four arguments: 

the URL to load,
the window target,
a string of features, and
a Boolean value indicating that the new page should take the place of the currently
loaded page in the browser history.

Typically only the first three arguments are used; the last argument applies only when not opening a new window.

If the second argument passed to window.open() is the name of a window or frame that already
exists, then the URL is loaded into the window or frame with that name.

Here's an example:

window.open("https://www.demo2s.com/", "topFrame");

It is the same as 

<a href="http://www.demo2s.com" target="topFrame"/>

This line of code acts as if the user clicked a link with the href 
attribute set to "https://www.demo2s.com" and the target attribute set to  topFrame.

If there is a window named topFrame, then the
URL will be loaded there; otherwise, a new window is created and given the name  topFrame.

The second argument may be any of the special window names: 

_self,
_parent,
_top, or
_blank.

Popping Up Windows
When the second argument doesn't identify an existing window, a new window or tab is created
based on a string passed in as the third argument.

If the third argument is missing, a new browser
window or tab is opened with all of the default browser window settings.

Toolbars, the location bar, and the status bar are all set based on the browser's default settings.

The third argument is ignored when not opening a new window.

The third argument is a comma-delimited string of settings indicating display information for the new
window.

The following table describes the various options.


   Setting
   Value(S)
   Description

   height
   Number
   The initial height of the new window.
   This cannot be less than 100.        
   left
   Number
   The initial left coordinate of the new window.
   This cannot be a negative number.             
   location
   "yes" or  "no"
   Indicates if the location bar should be displayed.                   
   The default varies based on the browser.                             
   When set to  "no", the location bar may be either hidden or disabled.
   menubar
   "yes" or  "no"
   Indicates if the menu bar should be displayed.
   The default is  "no".                         
   resizable
   "yes" or  "no"
   Indicates if the new window can be resized by dragging its border.
   The default is "no".                                              
   scrollbars
   "yes" or  "no"
   Indicates if the new window allows scrolling if the content cannot fit in the viewport.
   The default is  "no".                                                                  
   status
   "yes" or  "no"
   Indicates if the status bar should be displayed.
   The default varies based on the browser.        
   toolbar
   "yes" or  "no"
   Indicates if the toolbar should be displayed.
   The default is  "no".                        
   top
   Number
   The initial top coordinate of the new window.
   This cannot be a negative number.            
   width
   Number
   The initial width of the new window.
   This cannot be less than 100.       

Any or all of these settings may be specified as a comma-delimited set of name-value pairs.

The name-value pairs are indicated by an equal sign.

No white space is allowed in the feature string.

Consider the following example:

window.open("https://www.demo2s.com/",
           "myWindow",
           "height=400,width=400,top=10,left=10,resizable=yes");

This code opens a new resizable window that's 400x400 and positioned 10 pixels from the top and
left of the screen.

Return
The window.open() method returns a reference to the newly created window.

This object is the same as
any other window object except that you typically have more control over it.

For instance, some browsers that don't allow you to resize or move the main browser window by default may allow you to resize
or move windows that you've created using window.open().

This object can be used to manipulate the
newly opened window in the same way as any other window, as shown in this example:

let myWin = window.open("https://www.demo2s.com/",
              "myWindow",
              "height=400,width=400,top=10,left=10,resizable=yes");

// resize it
myWin.resizeTo(500, 500);

// move it
myWin.moveTo(100, 100);

We can close the newly opened window by calling the close() method as follows:

myWin.close();

This method works only for pop-up windows created by window.open().

It's not possible to close the main browser window without confirmation from the user.

It is possible, however, for the pop-up window
to close itself without user confirmation by calling top.close().

Once the window has been closed, the
window reference still exists but cannot be used other than to check the closed property, as shown here:

myWin.close();
console.log(myWin.closed);  // true

The newly created window object has a reference back to the window that opened it via the opener
property.

This property is defined only on the topmost window object (top) of the pop-up window
and is a pointer to the window or frame that called window.open().

For example:

let myWin = window.open("https://www.demo2s.com/",
              "myWindow",
              "height=400,width=400,top=10,left=10,resizable=yes");

console.log(myWin.opener === window);  // true

Even though there is a pointer from the pop-up window back to the window that opened it, there is
no reverse relationship.

Windows do not keep track of the pop-ups that they spawn, so it's up to you
to keep track if necessary.

Depend on browsers, some allow you to indicate that the newly created tab should be run in a
separate process by setting the opener property to null, as in the following example:

let myWin = window.open("https://www.demo2s.com/",
              "myWindow",
              "height=400,width=400,top=10,left=10,resizable=yes");

myWin.opener = null;

Setting opener to null indicates to the browser that the newly created tab doesn't need to 
communicate with the tab that opened it, so it may be run in a separate process.

BOM Window Pop-up Blockers

All modern browsers have pop-up-blocking software built in.

Most unexpected pop-ups are blocked.

When a pop-up is blocked, one of two things happens.

If the browser's built-in
pop-up blocker stopped the pop-up, then window.open() will most likely return null.

In that case,
you can tell if a pop-up was blocked by checking the return value, as shown in the following example:

let myWin = window.open("https://www.demo2s.com", "_blank");
if (myWin == null){
  console.log("The popup was blocked!");
}

When a browser add-on or other program blocks a pop-up, window.open() typically throws an
error.

So to accurately detect when a pop-up has been blocked, you must check the return value and
wrap the call to window.open() in a try-catch block, as in this example:

let blocked = false;

try {
  let myWin = window.open("https://www.demo2s.com", "_blank");
  if (myWin == null){
    blocked = true;
  }
} catch (ex){
  blocked = true;
}
if (blocked){
  console.log("The popup was blocked!");
}

This code accurately detects if a pop-up blocker has blocked the call to window.open(), regardless of
the method being used.

Using Timers from Window Object

A useful feature provided by the Window object is the ability to set one-off and recurring timers.

These  timers are used to execute a function after a preset period.

The following table summarizes the methods that  support this feature.


 Name
   Description
   Returns

 clearInterval(<id>)
   Cancels an interval timer
   void
 clearTimeout(<id>)
   Cancels a timeout timer
   void
 setInterval(<function>, <time>)
   Creates a timer that will call the specified
   function every time milliseconds            
   int
 setTimeout(<function>, <time>)
   Creates a timer that will call the specified
   function once after time milliseconds       
   int

The setTimeout() method creates a timer that executes the specified function just once, whereas the
 setInterval() method creates a timer that executes a function repeatedly.

These methods return a unique identifier that can later be used as an argument to the clearTimeout()
 and clearInterval() methods to cancel the timer.

The following code shows the use of the timer methods.

let buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
    buttons[i].onclick = handleButtonPress;
}

let timeID;/* w   ww  .  d   e m  o  2  s   . c  o    m*/
let intervalID;
let count = 0;

function handleButtonPress(e) {
    if (e.target.id == "settime") {
        timeID = window.setTimeout(function() {
            displayMsg("Timeout Expired");
        }, 5000);
        displayMsg("Timeout Set");
    } else if (e.target.id == "cleartime") {
        window.clearTimeout(timeID);
        displayMsg("Timeout Cleared");
    } else if (e.target.id == "setinterval") {
        intervalID = window.setInterval(function() {
             displayMsg("Interval expired. Counter: " + count++);
        }, 2000);
        displayMsg("Interval Set");
    } else if (e.target.id == "clearinterval") {
        window.clearInterval(intervalID);
        displayMsg("Interval Cleared");
    }
}

function displayMsg(msg) {
    document.getElementById("msg").innerHTML = msg;
}


Open in separate window
View full source code

 <html>
    <body>
        <p id="msg"></p>
        <p>
            <button id="settime">Set Time</button>
            <button id="cleartime">Clear Time</button>
            <button id="setinterval">Set Interval</button>
            <button id="clearinterval">Clear Interval</button>
        </p>

        <script>
            let buttons = document.getElementsByTagName("button");
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }<!--   w  w  w.    de  m  o  2  s  .  c   o  m -->

            let timeID;
            let intervalID;
            let count = 0;

            function handleButtonPress(e) {
                if (e.target.id == "settime") {
                    timeID = window.setTimeout(function() {
                        displayMsg("Timeout Expired");
                    }, 5000);
                    displayMsg("Timeout Set");
                } else if (e.target.id == "cleartime") {
                    window.clearTimeout(timeID);
                    displayMsg("Timeout Cleared");
                } else if (e.target.id == "setinterval") {
                    intervalID = window.setInterval(function() {
                         displayMsg("Interval expired. Counter: " + count++);
                    }, 2000);
                    displayMsg("Interval Set");
                } else if (e.target.id == "clearinterval") {
                    window.clearInterval(intervalID);
                    displayMsg("Interval Cleared");
                }
            }

            function displayMsg(msg) {
                document.getElementById("msg").innerHTML = msg;
            }

        </script>
    </body>
</html>


The script in this example sets and cancels timers and intervals that call the
displayMsg() function to set the content of a <p> element.

BOM Window Timeouts setTimeout()

JavaScript execution in a browser is single-threaded.

It does allow for the scheduling of code to run
at specific points in time through the use of timeouts and intervals.

Timeouts execute some code after
a specified amount of time, whereas intervals execute code repeatedly, waiting a specific amount of
time in between each execution.

You set a timeout using the window's setTimeout() method, which accepts two arguments: 
the code to execute and the time in milliseconds to wait before scheduling the callback function to be
executed.

The first argument can be either a string 
containing JavaScript code or a function.

For example: schedules an alert to show after 1 second

setTimeout(() => console.log("Hello world!"), 1000);

The second argument, the number of milliseconds to wait, is not necessarily when the specified
code will execute.

JavaScript is single-threaded and, as such, can execute only one piece of code at a time.

The second argument of setTimeout() tells
the JavaScript engine to add this task onto the queue after a set number of milliseconds.

If the
queue is empty, then that code is executed immediately; if the queue is not empty, the code must
wait its turn.

Time out ID
When setTimeout() is called, it returns a numeric ID for the timeout.

The timeout ID is a unique
identifier for the scheduled code that can be used to cancel the timeout.

To cancel a pending timeout,
use the clearTimeout() method and pass in the timeout ID, as in the following example:

// set the timeout
let timeoutId = setTimeout(() => console.log("Hello world!"), 1000);
// cancel it
clearTimeout(timeoutId);

As long as clearTimeout() is called before the specified amount of time has passed, a 
timeout can be canceled completely.

Calling clearTimeout() after the code has been executed has no effect.

All code executed by a timeout using a conventional anonymous function
runs in the global scope, so the value of this inside the function will always
point to window when running in non strict mode and undefined when running
in strict mode.

When setTimeout is instead provided an arrow function, this
preserves the lexical scope in which it was defined.

BOM Window setInterval()

Intervals work in the same way as timeouts except that they schedule the code for execution 
repeatedly at specific time intervals until the interval is canceled or the page is unloaded.

The setInterval() method lets you set up intervals, and it accepts the two arguments: 

the code to execute as string or function and
the milliseconds to wait between addition of the callback function to the execution queue.

Here's an example:

setInterval(() => console.log("Hello world!"), 10000);

The time interval specified with the second argument represents the 
amount of time the browser will wait in between adding a new callback
execution onto the queue.

The browser doesn't care when the callback
executes or how long it takes.

The short and non-blocking callback functions are ideal for setInterval.

The setInterval() method also returns an interval ID that can be used to cancel the interval at
some point in the future.

The clearInterval() method can be used with this ID to cancel all pending intervals.

If left unchecked, they continue to execute until the page is unloaded.

Here is a common example of interval usage:

let num = 0, intervalId = null;
let max = 10;

let incrementNumber = function() {
  num++;
  // if the max has been reached, cancel all pending executions
  if (num == max) {
    clearInterval(intervalId);
    console.log("Done");
  }
}
intervalId = setInterval(incrementNumber, 500);

In this example, the variable num is incremented every half second until it finally reaches the 
maximum number, at which point the interval is canceled.

This pattern can also be implemented using timeouts, as shown here:

let num = 0;
let max = 10;

let incrementNumber = function() {
  num++;

  //if the max has not been reached, set another timeout
  if (num < max) {
    setTimeout(incrementNumber, 500);
  } else {
    console.log("Done");
  }
}
setTimeout(incrementNumber, 500);

When you're using timeouts, it is unnecessary to track the timeout ID because the 
execution will stop on its own and continue only if another timeout is set.

This pattern is considered a best
practice for setting intervals without actually using intervals.

BOM System Dialogs

The Window object contains a set of methods for prompting the user in different ways.

The browser can invoke system dialogs to display to the user through the alert(),
confirm(), and prompt() methods.


Name
   Description
   Returns

alert(<msg>)
   Displays a dialog window to the user and waits for it to
   be dismissed                                            
   void
confirm(<msg>)
   Displays a dialog window with an OK/Cancel prompt
   boolean
prompt(<msg>, <val>)
   Displays a dialog prompting the user to enter a value
   string
showModalDialog(<url>)
   Displays a popup window showing the specified URL
   void

These dialogs are not related to the web page being displayed
in the browser and do not contain HTML.

Their appearance is determined by operating system and / or browser settings rather than CSS.

Additionally, each of these dialogs is synchronous and modal,
meaning code execution stops when a dialog is displayed, and resumes after it has been dismissed.

Alert
The alert() method accepts a string to display to the user.

alert() expects only one argument.

When alert() is called, a system message box displays the
specified text to the user, followed by a single OK button.

If alert() is passed an argument that is
not a string primitive, it will coerce the argument into a string with its.toString() method.

Alert dialogs are typically used when users must be made aware of something that they have no
control over, such as an error.

A user's only choice is to dismiss the dialog after reading the message.

Confirm
The second type of dialog is invoked by calling confirm().

A confirm dialog displays a message to the user.

A confirmation dialog has a Cancel button along with the OK button,
which allows the user to indicate if a given action should be taken.

To determine if the user clicked OK or Cancel, the confirm() method returns a Boolean value: true
if OK was clicked, or false if Cancel was clicked or the dialog box was closed by clicking the X in
the corner.

Typical usage of a confirm dialog looks like this:

if (confirm("Are you sure?")) {
   console.log("yes");
} else {
   console.log("not sure.");
}

In this example, the confirm dialog is displayed to the user in the first line, which is a condition of the
if statement.

Prompt
The final type of dialog is displayed by calling prompt(), which prompts the user
for input.

Along with OK and Cancel buttons, this dialog has a text box where the
user may enter some data.

The prompt() method accepts two arguments: the text to display to the user, and the default
value for the text box. The default value can be an empty string.

If the OK button is clicked, prompt() returns the value in the text box; if Cancel is clicked or the
dialog is otherwise closed without clicking OK, the function returns null.

Here's an example:

let result = prompt("What is your name? ", "");
if (result !== null) {
   console.log("Welcome, " + result);
}

These system dialogs can be helpful for displaying information to the user and asking for 
confirmation of decisions.

find and print
Two other types of dialogs can be displayed from JavaScript: find and print.

Both of these dialogs
are displayed asynchronously, returning control to the script immediately.

The dialogs are the same
as the ones the browser employs when the user selects either Find or Print from the browser's menu.

These are displayed using the find() and print() methods on the window object as follows:

// display print dialog
window.print();

// display find dialog
window.find();

These two methods give no indication as to whether the user has done anything with the dialog,
so it is difficult to make good use of them.

Prompting the User.

let buttons = document.getElementsByTagName("button");
for (let i = 0 ; i < buttons.length; i++) {
    buttons[i].onclick = handleButtonPress;
}

function handleButtonPress(e) {
    if (e.target.id == "alert") {
        window.alert("This is an alert");
    } else if (e.target.id == "confirm") {
        let confirmed
           = window.confirm("This is a confirm - do you want to proceed?");
        alert("Confirmed? " + confirmed);
    } else if (e.target.id == "prompt") {
        let response = window.prompt("Enter a word", "hello");
        alert("The word was " + response);
    } else if (e.target.id == "modal") {
        window.showModalDialog("https://demo2s.com");
    }
}


Open in separate window
View full source code

<html>
    <head>
        <style>
            table { border-collapse: collapse; border: thin solid black;}
            th, td { padding: 4px; }
        </style>
    </head>
    <body>
        <button id="alert">Alert</button>
        <button id="confirm">Confirm</button>
        <button id="prompt">Prompt</button>
        <button id="modal">Modal Dialog</button>

        <script type="text/javascript">

            let buttons = document.getElementsByTagName("button");
            for (let i = 0 ; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }<!--   w  w w  . d    e  m o  2  s .  c   o m  -->

            function handleButtonPress(e) {
                if (e.target.id == "alert") {
                    window.alert("This is an alert");
                } else if (e.target.id == "confirm") {
                    let confirmed
                       = window.confirm(
                          "This is a confirm - do you want to proceed?");
                    alert("Confirmed? " + confirmed);
                } else if (e.target.id == "prompt") {
                    let response = window.prompt("Enter a word", "hello");
                    alert("The word was " + response);
                } else if (e.target.id == "modal") {
                    window.showModalDialog("https://demo2s.com");
                }
            }
        </script>
    </body>
</html>



BOM Location Object

The document.location property returns a  Location object that gives you 
fine-grained information about the document's address and allows you to navigate to other documents.

BOM location object provides information about the document
that is currently loaded in the window, as well as general navigation functionality.

The location object is a property of both window and document; 
both window.location and document.location point to the same object.

The location object knows about the currently
loaded document, and it also parses the URL into discrete segments that can be accessed via a series of
properties.

The following table describes the functions and properties of the  Location object.


Property
   Description
   Returns

protocol
   Gets or sets  the protocol component of the document URL
   string
host
   Gets or sets the host component of the document URL
   string
href
   Gets or sets the current document's location
   string
hostname
   Gets or sets the host name component of the document URL
   string
port
   Gets or sets the port component of the document URL
   string
pathname
   Gets or sets the path component of the document URL
   string
search
   Gets or sets the query  component of the document URL
   string
hash
   Gets or sets the hash component of the document URL
   string
assign(<URL>)
   Navigates to the specified URL
   void
replace(<URL>)
   Removes the current document and navigates to the one
   specified by the URL.                                
   void
reload()
   Reloads the current document
   void
resolveURL(<URL>)
   Resolves the specified relative URL to an absolute one
   string

These properties are enumerated in the following table.

If the browser was currently located at 

http://userName:usrPas@www.demo2s.com:80/html-folder/?q=javascript#contents

then the location object would behave as follows:


   Property Name
   Return Value
   Description

   location.hash
   "#contents"
   The URL hash, or an empty string if the URL does not have a hash.
   location.host
   "www.demo2s.com:80"
   The name of the server and port number if present.
   location.hostname
   "www.demo2s.com"
   The name of the server without the port number.
   location.href
    "http://www.demo2s.  
   com:80/html-folder/?q=
   javascript#contents"  
    The full URL of the currently loaded page.          
   The toString() method of location returns this value.
   location.pathname
   "/html-folder/"
   The directory and/or filename of the URL.
   location.port
   "80"
   The port of the request if specified in the URL.                             
   If a URL does not contain a port, then this property returns an empty string.
location.protocol
   "http:"
   The protocol used by the page. 
   Typically "http:" or  "https:".
location.search
   "?q=javascript"
   The query string of the URL.                       
   It returns a string beginning with a question mark.
location.username
   "userName"
   The username specified before the domain name.
location.password
   "usrPas"
   The password specified before the domain name.
location.origin
   "http:// www.demo2s.com"
   The origin of the URL.
   Read only.            


BOM Location Query String Arguments

Most of the information in location is accessible from properties of location object.

Though location.search returns everything
from the question mark until the end of the URL, there is no immediate access to query-string 
arguments on a one-by-one basis.

The following function parses the query string and returns an object
with entries for each argument:

let getQueryStringArgs = function() {
  // get query string without the initial '?'
  let qs = (location.search.length > 0 ? location.search.substring(1) : ""),
      // object to hold data
      args = {};

  // assign each item onto the args object
  for (let item of qs.split("&").map(kv => kv.split("="))) {
    let name = decodeURIComponent(item[0]),
      value = decodeURIComponent(item[1]);
    if (name.length) {
      args[name] = value;
    }
  }

  return args;
}

The first step in this function is to strip off the question mark from the beginning of the query string.

This happens only if location.search has one or more characters.

The arguments will be stored on the args object, which is created using object-literal format.

Next, the query string is split on the ampersand character, returning an array of strings in the format name=value.

The for loop iterates over this array and then splits each item on the equal sign, returning an array where the first item is
    the name of the argument and the second item is the value.

The name and value are each decoded using decodeURIComponent().

Last, the name is assigned as a property on the args object, and its value is set to value.

This function is used as follows: assume query string of ?q=javascript&num=10

let args = getQueryStringArgs();

console.log(args["q"]);    // "javascript"
console.log(args["num"]);  // "10"

Each of the query-string arguments is now a property on the returned object, which provides fast
access to each argument.

Use URLSearchParams to parse search URL

URLSearchParams offers a collection of utility methods which allow you to inspect and modify query
parameters using a standardized API.

A URLSearchParams instance is created by passing a query
string to the constructor.

The instance exposes various methods like get(), set(), and delete() to
perform query string operations.

These are demonstrated here:

let qs = "?q=css&num=10";

let searchParams = new URLSearchParams(qs);

console.log(searchParams.toString());  // " q=css&num=10"
searchParams.has("num");               // true
searchParams.get("num");               // 10

searchParams.set("page", "3");
console.log(searchParams.toString());  // " q=css&num=10&page=3"

searchParams.delete("q");
console.log(searchParams.toString());  // " num=10&page=3"

Most browsers that support URLSearchParams also support using the URLSearchParams as an 
iterable object:

let qs = "?q=css&num=10";

let searchParams = new URLSearchParams(qs);

for (let param of searchParams) {
   console.log(param);
}

Output:



BOM Manipulating the Location

The browser location can be changed in a number of ways using the location object.

The first we use the assign() method and pass in a URL, as in the following example:

location.assign("https://www.demo2s.com");

This immediately starts the process of navigating to the new URL and makes an entry in the browser's history stack.

If location.href or window.location is set to a URL, the assign() method
is called with the value.

For example, both of the following perform the same behavior as calling
assign() explicitly:

window.location = "http://www.demo2s.com";
location.href = "http://www.demo2s.com";

Of these three approaches to changing the browser location, setting location.href is most often
used.

BOM Location properties

Changing various properties on the location object can also modify the currently loaded page.

The hash, search, hostname, pathname, and port properties can be set with new values that alter the
current URL, as in this example:

Assume starting at https://www.demo2s.com/css/

changes URL to "https://www.demo2s.com/css/#section1"

location.hash = "#section1";

changes URL to "https://www.demo2s.com/css/?q=javascript"

location.search = "?q=javascript";

changes URL to "http://www.yahoo.com/css/"

location.hostname = "www.yahoo.com";

changes URL to "http://www.yahoo.com/my_dir/"

location.pathname = "my_dir";

changes URL to "http://www.yahoo.com:8080/css/"

Location.port = 8080;

Each time a property on location is changed, with the exception of hash, the page reloads with
the new URL.

Changing the value of hash causes a new entry in the browser's history to be recorded.

Example
The simplest use for the document.location property is to get information about the location of the
current object.

Using the Location Object to Get Information About the Document.

document.writeln("protocol: " + document.location.protocol);
document.writeln("host: " + document.location.host);
document.writeln("hostname: " + document.location.hostname);
document.writeln("port: " + document.location.port);
document.writeln("pathname: " + document.location.pathname);
document.writeln("search: " + document.location.search);
document.writeln("hash: " + document.location.hash);


Open in separate window
View full source code

<html>
    <body>
        <script>
            document.writeln("<pre>");

            document.writeln("protocol: " + document.location.protocol);
            document.writeln("host: " + document.location.host);
            document.writeln("hostname: " + document.location.hostname);
            document.writeln("port: " + document.location.port);
            document.writeln("pathname: " + document.location.pathname);
            document.writeln("search: " + document.location.search);
            document.writeln("hash: " + document.location.hash);

            document.write("</pre>");
        </script>
    </body>
</html>


The search property returns the query string portion of the URL, and 
the hash property returns the
URL fragment. 

BOM Location replace

When the URL is changed in location object, an entry is made in
the browser's history stack so the user may click the Back button to navigate to the previous page.

It is possible to disallow this behavior by using the replace() method.

This method accepts a single
argument, the URL to navigate to, but does not make an entry in the history stack.

After calling replace(), the user cannot go back to the previous page.

Consider this example:

<!DOCTYPE html>
<html>
<head>
  <title>You won't be able to get back here</title>
</head>
<body>
  <p>Enjoy this page for a second, because you won't be coming back here.</p>
  <script>
    setTimeout(() => location.replace("https://www.demo2s.com/"), 1000);
  </script>
</body>
</html>

If this page is loaded into a web browser, it will redirect to www.demo2s.com after a second.

At that point, the Back button will be disabled, and you won't be able to navigate back to this example page
without typing in the complete URL again.

BOM Location Reload

The location reload() method reloads the currently displayed page.

When reload() is called with no argument, the page is reloaded in the most efficient way possible, which is to say
that the page may be reloaded from the browser cache if it hasn't changed since the last request.

To force a reload from the server, pass in true as an argument like this:

location.reload();      // reload - possibly from cache
location.reload(true);  // reload - go back to the server

Any code located after a reload() call may or may not be executed, depending on factors such
as network latency and system resources.

We should have reload() as the last line of code.

BOM Navigator Object

Navigator object is the standard for browser identification on the client.

The navigator object is common among all JavaScript-enabled web browsers.

Each browser supports its own set of properties.

The navigator object implements methods and properties defined in the following 
interfaces: 

NavigatorID, 
NavigatorLanguage, 
NavigatorOnLine, 
NavigatorContentUtils, 
NavigatorStorage, 
NavigatorStorageUtils, 
NavigatorConcurrentHardware, 
NavigatorPlugins, and 
NavigatorUserMedia 

The following table lists each available property and method:


Property/Method
   Description

activeVrDisplays
   Returns an array of every VRDisplay instance with its  ispresenting property set to true.
appCodeName
   Returns "Mozilla" even in non-Mozilla browsers.
appName
   Full browser name.
appVersion
    Browser version.                                           
   Typically does not correspond to the actual browser version.
battery
   Returns a BatteryManager object to interact with the Battery Status API.
buildId
   Build number for the browser.
connection
   Returns a NetworkInformation object to interact with the Network Information API.
cookieEnabled
   Indicates if cookies are enabled.
credentials
   A CredentialsContainer to interact with the Credentials Management API.
deviceMemory
   The amount of device memory in gigabytes.
doNotTrack
   The user's do-not-track preference.
geolocation
   A Geolocation object to interact with the Geolocation API.
getVRDisplays()
   Returns an array of every VRDisplay instance available.
getUserMedia()
   Returns the stream associated with the available media device hardware.
hardwareConcurrency
   The device's number of processor cores.
javaEnabled
   Indicates if Java is enabled in the browser.
language
   The browser's primary language.
languages
   An array of all the browser's preferred languages.
locks
   A LockManager object to interact with the Web Locks API.
mediaCapabilities
   A MediaCapabilities object to interact with the Media Capabilities API.
mediaDevices
   The available media devices.
maxTouchPoints
   The maximum number of supported touch points for the device's touch screen.
mimeTypes
   Array of MIME types registered with the browser.
onLine
   Indicates if the browser is connected to the Internet.
oscpu
   The operating system and/or CPU on which the browser is running.
permissions
   A Permissions object to interact with the Permissions API.
platform
   The system platform on which the browser is running.
plugins
   Array of plug-ins installed on the browser.
product
   The name of the product, typically Gecko.
productSub
   Extra information about the product (typically Gecko version information).
registerProtocolHandler()
   Registers a website as a handler for a particular protocol.
requestMediaKeySystemAccess()
   Returns a Promise which resolves to a MediaKeySystemAccess object.
sendBeacon()
   Asynchronously transmits a small payload.
serviceWorker
   The ServiceWorkerContainer used to interact with ServiceWorker objects.
share()
   If available, invokes the current platform's native sharing mechanism.
storage
   Returns the StorageManager object to interact with the Storage API.
userAgent
   The user-agent string for the browser.
vendor
   The brand name of the browser.
vendorSub
   Extra information about the vendor.
vibrate()
   Triggers the device to vibrate if vibration is supported.
webdriver
   Indicates if the browser is controlled by automation.

The navigator object's properties are typically used to determine the type of browser that is running a web page.

BOM navigator Registering Handlers

Modern browsers formally support the registerProtocolHandler() method to the navigator
object.

These methods allow a website to indicate that it can handle specific types of information.

We can handle protocols by using registerProtocolHandler(), which accepts three 
arguments: 

the protocol to handle (i.e.,  "mailto" or  "ftp"),
the URL of the page that handles the protocol, and
the name of the application.

For example, to register a web application as the default mail client, you can use the following:

navigator.registerProtocolHandler("mailto",
                                  "http://www.example.com?cmd=%s",
                                  "Some Mail Client");

In this example, a handler is registered for the mailto protocol, 
which will now point to a web-based e-mail client.

Once again, the second argument is the URL that should handle the request, and %s
represents the original request.

BOM Screen Object

The screen object as a property of window is used as an indication of client capabilities.

This object provides
information about the client's display outside the browser window, including information such as
pixel width and height.

Each browser provides different properties on the screen object.

The following table describes each of the properties.


Property
   Description

availHeight
   The pixel height of the screen minus system elements such as Windows (read only).
availLeft
   The first pixel from the left that is not taken up by system elements (read only).
availTop
   The first pixel from the top that is not taken up by system elements (read only).
availWidth
   The pixel width of the screen minus system elements (read only).
colorDepth
   The number of bits used to represent colors; for most systems, 32 (read only).
height
   The pixel height of the screen.
left
   The pixel distance of the current screen's left side.
pixelDepth
   The bit depth of the screen (read only).
top
   The pixel distance of the current screen's top.
width
   The pixel width of the screen.
orientation
   Returns the screen orientation as specified in the Screen Orientation API.


BOM History Object

The window.history property returns a History object, which you can use to perform basic operations on
the browser history.

The history object represents the user's navigation history since the given window was first used.

Because history is a property of window, each browser window object has its own history object.

For security reasons, it's not possible to determine the URLs that the user has visited.

We can navigate backwards and forwards through the list of
places the user has been without knowing the exact URL.

The following table describes the properties and methods that the History object defines.


Name
   Description
   Returns

back()
   Goes one step back in the history
   void
forward()
   Goes one step forward in the history
   void
go(<index>)
   Goes to a position in the history relative to the
   current document; positive values are forward,   
   and negative values are backward                 
   void
length
   Returns the number of items in the history
   number
pushState(<state>, <title>,
    <url>)                 
   Adds an entry to the browser history
   void
replaceState(<state>, <title>,
    <url>)                    
   Replaces the current entry in the browser
   history                                  
   void
state
   Returns the state data associated with the
    current document in the browser history  
   object

Navigation
The go() method navigates through the user's history in either direction, backward or forward.

This method accepts a single argument, which is an integer representing the number of pages to go 
backward or forward.

A negative number moves backward in history, similar to clicking the browser's
Back button.

A positive number moves forward, similar to clicking the browser's Forward button.

Here's an example: go back one page

history.go(-1);

go forward one page.

history.go(1);

go forward two pages.

history.go(2);

The go() method argument can also be a string, in which case the browser navigates to the first 
location in history that contains the given string.

The closest location may be either backward or forward.

If there's no entry in history matching the string, then the method does nothing, as in this example:

go to nearest demo2s.com page

history.go("demo2s.com");

Two shortcut methods, back() and forward(), may be used in place of go(). 

These mimic the browser Back and Forward buttons as follows:

go back one page.

history.back();

go forward one page.

history.forward();

The history object also has a property, length, which indicates how many items are in the history
stack.

This property reflects all items in the history stack, both those going backward and those going
forward.

For the first page loaded into a window or tab, history.length is equal to 0.

By testing for this value as shown here, we can determine if the user's start point was your page:

if (history.length == 0){
   //this is the first page in the user's window
}

The history object typically is used to create custom Back and Forward buttons and to determine if
the page is the first in the user's history.

Entries are made in the history stack whenever the page's URL changes.

This includes changes to the URL hash, thus setting location.hash causes a new entry to be inserted into the history
stack for these browsers.

This behavior is commonly used by single-page application frameworks, 
which wish to simulate Back and Forward button functionality without 
causing full page reloads upon each navigation event.

Location Object

The location object contains information about the current URL.

The location object is part of the window object and 
is accessed through the window.location property.

There is no public standard that applies to the location object, 
but all major browsers support it.

Method List

Method
Description

assign()
   Location assign new value Method
reload()
 Location reload url Method
replace()
   Location replace url Method

Property List

Property
Description

hash
 Location Get and Set url hash Property
host
 Location Get and Set host Property
hostname
Location Get and Set host name Property
href
 Location Get and Set href URL Property
origin
 Location Get and Set URL origin Property
pathname
Location Get and Set URL path name Property
port
 Location Get and Set URL port Property
protocol
 Location Get and Set URL protocol Property
search
Location Get and Set URL search part Property


History Object

The history object contains the URLs visited by the 
user within a browser window.

The history object is part of the window object and is 
accessed through the window.history property.

Property List

Property
   Description
length
   History length Property
Method List

Method
   Description

back()
  History go back Method
forward()
History go forward Method
go()
   History go to a history step Method


Navigator Object

The navigator object contains information about the browser.


Property
   Description

appCodeName
Javascript Navigator Get appCodeName Property
appName
Javascript Navigator Get appName Property
appVersion
  Javascript Navigator Get appVersion Property
cookieEnabled
Javascript Navigator Get cookieEnabled Property
geolocation
Javascript Navigator Get geolocation Property
language
  Javascript Navigator Get language Property
Navigator check if browser is on Line
  Javascript Navigator check if browser is on Line
platform
  Javascript Navigator Get platform Property
product
Javascript Navigator Get product Property
userAgent
Javascript Navigator Get userAgent Property
javaEnabled()
  Javascript Navigator Check if java is Enabled Method
taintEnabled()
  Javascript Navigator is taint Enabled Method


Screen Get available Height Property

Example
Get the available height of your screen:

let x = "Available Height: " + screen.availHeight;


Open in separate window
View full source code

<html>
<body>

<p>Click the button to display the available height of your screen.</p>

<button onclick="myFunction()">Test</button>

<p id="demo"></p>

<script>
function myFunction() {
  let x = "Available Height: " + screen.availHeight + "px";
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>


Description
The availHeight property returns the height of the user's screen, 
in pixels, minus interface features like the Windows Taskbar.

To get the width of the screen excluding the Windows Taskbar, 
use the availWidth property.

Browser Compatibility

    
    
    
    
    
    
  
availHeight

    
Yes
    
Yes
    
Yes
    
Yes
    
Yes
    
Yes
  

Syntax

let a = screen.availHeight;

Return Value
A Number, representing the height of the user's screen, in pixels.

More Examples
All screen properties in one example:

let txt = "";
txt += "<p>Total width/height: " + screen.width + "*" + 
        screen.height + "</p>";
txt += "<p>Available width/height: " + screen.availWidth + "*" + 
      screen.availHeight + "</p>";
txt += "<p>Color depth: " + screen.colorDepth + "</p>";
txt += "<p>Color resolution: " + screen.pixelDepth + "</p>";


Open in separate window
View full source code

<html>
<body>

<h3>Your Screen:</h3>

<div id="demo"></div>

<script>
let txt = "";<!-- w   w w   .  d   e m  o  2 s    .c  o    m-->
txt += "<p>Total width/height: " + screen.width + "*" + 
          screen.height + "</p>";
txt += "<p>Available width/height: " + screen.availWidth + "*" + 
          screen.availHeight + "</p>";
txt += "<p>Color depth: " + screen.colorDepth + "</p>";
txt += "<p>Color resolution: " + screen.pixelDepth + "</p>";

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>


Property List 

Property
  Description

available Width
 Screen Get available Width Property
color Depth
 Screen Get color Depth Property
height
   Screen Get height Property
pixel Depth
 Screen Get pixel Depth Property
width
 Screen Get width Property


Window Object Reference

The window object represents an open window in a browser.

If a document contain frames (<iframe> tags), the browser creates 
one window object for the HTML document, and one additional window 
object for each frame.

Note: There is no public standard that applies to the Window object, 
but all major browsers support it.

Method List

Method
   Description

alert()
 displays an alert box with a specified message and an OK button
atob()
 decodes a base-64 encoded string
blur()
  removes focus from the current window
btoa()
encodes a string in base-64
clearInterval()
clears a timer set with the setInterval method
clearTimeout()
clears a timer set with the setTimeout method
close()
 closes the current window
confirm()
  displays a dialog box with a specified message
focus()
  sets focus to the current window
matchMedia()
match media query
moveBy()
   moves a window relative to its current coordinates
moveTo()
  moves a window's left and top edge to the specified coordinates
open()
 opens a new browser window
print()
 prints the contents of the current window
prompt()
displays a dialog box that prompts the user for input
resizeBy()
   resizes a window by the specified amount
resizeTo()
 resizes a window to the specified width and height
scrollBy()
 scrolls the document by the specified number of pixels
scrollTo()
  scrolls the document to the specified coordinates
setInterval()
 calls a function at specified intervals in milliseconds
setTimeout()
calls a function after a specified number of milliseconds
stop()
   stops window loading

Property List

Property
  Description

closed
checks whether a window is closed
defaultStatus
   Get and Set default Status text
frameElement
  returns the <iframe> element where current window is inserted
frames
  get all iframe elements
innerWidth and innerHeight
   innerWidth and innerHeight get client size
length
get the number of iframe elements
localStorage
 Get local Storage Property
name
  Get and Set name Property
opener
   Get the window that created current window
outerWidth and outerHeight
 Get size
pageXOffset and pageYOffset
 Get the scrolled offset
parent
 get the parent window of the current window.
screenLeft and screenTop
   Get coordinates of the window relative to the screen
screenX and screenY
   Get coordinates of the window relative to the screen.
self
 returns the current window
sessionStorage
 Get session Storage Property
status
  Get and Set status text
top
Get the topmost browser window of the current window

Get coordinates of the window relative to the screen. (2)

DOM Create Dynamic Scripts

The <script> element is used to insert JavaScript code into the page, either by using the src 
attribute to include an external file or by including text inside the element itself.

Dynamic scripts are those 
that don't exist when the page is loaded but are included later by using the DOM.

There are two ways to do this: 

pulling in an external file or
inserting text directly.

External
Dynamically loading an external JavaScript file works as you would expect.

Consider the following <script> element:

<script src="foo.js"></script>

The DOM code to create this node is as follows:

let script = document.createElement("script");
script.src = "foo.js";
document.body.appendChild(script);

The DOM code mirrors the HTML code that it represents.

The external file is not downloaded until the <script> element is added to the page on the last line.

The element could be added to the <head> element as well, though this has the 
same effect.

This process can be generalized into the following function:

function loadScript(url) {
  let script = document.createElement("script");
  script.src = url;
  document.body.appendChild(script);
}

This function can now be used to load external JavaScript files via the following call:

loadScript("client.js");

Once loaded, the script is fully available to the rest of the page.

There is no standard way to handle when the script has been fully loaded.

Inline
The other way to specify JavaScript code is inline, as in this example:

<script>
function sayHi() {
    console.log("hi");
}
</script>

Using the DOM, it would be logical for the following to work:

let script = document.createElement("script");
script.appendChild(document.createTextNode(
             "function sayHi(){console.log('hi');}"));
document.body.appendChild(script);

This works in Firefox, Safari, Chrome, and Opera.

A property called text exists on all <script> elements that can be used
specifically to assign JavaScript code to, as in the following example:

var script = document.createElement("script");
script.text = "function sayHi(){console.log('hi');}";
document.body.appendChild(script);

This updated code works in Internet Explorer, Firefox, Opera, and Safari 3 and later.

This can be generalized into the following function:

function loadScriptString(code){
  var script = document.createElement("script");
  script.type = "text/javascript";
  try {
    script.appendChild(document.createTextNode(code));
  } catch (ex){
    script.text = code;
  }
  document.body.appendChild(script);
}

The function is called as follows:

loadScriptString("function sayHi(){console.log('hi');}");

Code loaded in this manner is executed in the global scope and is available immediately after
the script finishes executing.

Note: all <script> elements created with innerHTML will never execute.

DOM Create Dynamic Styles

CSS styles are included in HTML pages using one of two elements.

The <link> element is used to
include CSS from an external file, whereas the <style> element is used to specify inline styles.

The dynamic styles don't exist on the page when it is loaded initially and they are
added after the page has been loaded.

Link Element
Consider this typical <link> element:

<link rel="stylesheet" type="text/css" href="styles.css">

This element can just as easily be created using the following DOM code:

let link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "styles.css";
let head = document.getElementsByTagName("head")[0];
head.appendChild(link);

This code works in all major browsers without any issue.

Note that <link> elements should be added
to the <head> instead of the body for this to work properly in all browsers.

The technique can be generalized into the following function:

function loadStyles(url){
  let link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = url;
  let head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
}

The loadStyles() function can then be called like this:

loadStyles("styles.css");

Loading styles via an external file is asynchronous, so the styles will load out of order with the JavaScript
code being executed.

Typically, it's not necessary to know when the styles have been fully loaded.

Inline
The other way to define styles is using the <style> element and including inline CSS, such as this:

<style type="text/css">
body {
   background-color: red;
}
</style>

The following DOM code should work:

let style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red}"));
let head = document.getElementsByTagName("head")[0];
head.appendChild(style);

This code works in Firefox, Safari, Chrome, and Opera but not in Internet Explorer.

The workaround for Internet Explorer is to access the element's styleSheet
property, which in turn has a property called cssText that may be set to CSS code as this code
sample shows:

let style = document.createElement("style");
style.type = "text/css";
try{
  style.appendChild(document.createTextNode("body{background-color:red}"));
} catch (ex){
  style.styleSheet.cssText = "body{background-color:red}";
}
let head = document.getElementsByTagName("head")[0];
head.appendChild(style);

This new code uses a try-catch statement
to catch the error that Internet Explorer throws and then responds by using the 
Internet Explorer-specific way of setting styles.

The generic solution is as follows:

function loadStyleString(css){
  let style = document.createElement("style");
  style.type = "text/css";
  try{
    style.appendChild(document.createTextNode(css));
  } catch (ex){
    style.styleSheet.cssText = css;
  }
  let head = document.getElementsByTagName("head")[0];
  head.appendChild(style);
}

The function can be called as follows:

loadStyleString("body{background-color:red}");

Styles specified in this way are added to the page instantly, so changes should be seen immediately.

DOM Manipulating Tables

To facilitate building tables, the HTML DOM
adds several properties and methods to the <table>, <tbody>, and <tr> elements.

The <table> element adds the following:


Item
   Meaning

caption
   Pointer to the <caption> element (if it exists).
tBodies
   An HTMLCollection of <tbody> elements.
tFoot
   Pointer to the <tfoot> element (if it exists).
tHead
   Pointer to the <thead> element (if it exists).
rows
   An HTMLCollection of all rows in the table.
createTHead()
   Creates a <thead> element, places it into the table, and returns a reference.
createTFoot()
   Creates a <tfoot> element, places it into the table, and returns a reference.
createCaption()
   Creates a <caption> element, places it into the table, and returns a reference.
deleteTHead()
   Deletes the <thead> element.
deleteTFoot()
   Deletes the <tfoot> element.
deleteCaption()
   Deletes the <caption> element.
deleteRow(pos)
   Deletes the row in the given position.
insertRow(pos)
   Inserts a row in the given position in the rows collection.

The <tbody> element adds the following:


Item
   Meaning

rows
   An HTMLCollection of rows in the <tbody> element.
deleteRow(pos)
   Deletes the row in the given position.
insertRow(pos)
   Inserts a row in the given position in the rows collection and returns a reference to the new row.

The <tr> element adds the following:


Item
   Meaning

cells
   An HTMLCollection of cells in the <tr> element.
deleteCell(pos)
   Deletes the cell in the given position.
insertCell(pos)
   Inserts a cell in the given position in the cells collection and returns a reference to the new cell.

Suppose you want to create the following HTML table using the DOM:

<table border="1" width="100%">
 <tbody>
   <tr>
     <td>Cell 1,1</td>
     <td>Cell 2,1</td>
   </tr>
   <tr>
     <td>Cell 1,2</td>
     <td>Cell 2,2</td>
   </tr>
 </tbody>
</table>

For example, the following code shows how to create above table:

// create the table
let table = document.createElement("table");
table.border = 1;/*  w  ww    . d   e m   o 2 s    .c  o   m */
table.width = "100%";

// create the tbody
let tbody = document.createElement("tbody");
table.appendChild(tbody);

// create the first row
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));

// create the second row
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));

// add the table to the document body
document.body.appendChild(table);

To create the first row, the insertRow() method is called on the <tbody> element with
an argument of 0, which indicates the position in which the row should be placed.

After that point,
the row can be referenced by tbody.rows[0] because it is automatically created and added into the
<tbody> element in position 0.

Creating a cell is done by calling insertCell() on the <tr> element and passing in 
the position in which the cell should be placed.

The cell can then be referenced by tbody.rows[0].cells[0] because the cell has been created and inserted into the row in position 0.

DOM Mutation Observers Introduction

The MutationObserver API allows you to
asynchronously execute a callback when the DOM is modified.

With a MutationObserver, you are
able to observe an entire document, a DOM subtree, or just a single element.

You can observe changes to element attributes, child nodes, text, or any combination of the three.

Basic usage
A MutationObserver instance is created by calling the MutationObserver constructor and passing a
callback function:

let observer = new MutationObserver(() => console.log('DOM was mutated!'));

To link this observer with the DOM, the observe() method is used.

This method accepts two required arguments: 

the target DOM node which is observed for changes, and
the MutationObserverInit object.

The MutationObserverInit object is used to control what changes the observer should watch for.

It takes the form of a dictionary of key/value configuration options.

For example, the following code
creates an observer and configures it to watch for attribute changes on the body element:

let observer = new MutationObserver(() => 
                 console.log('<body> attributes changed'));

observer.observe(document.body, { attributes: true });

At this point, any attribute changes to the <body> element will be detected by the MutationObserver
instance, and the callback will asynchronously execute.

Modifications to children or other non-attribute DOM mutations will not schedule a callback.

This behavior is demonstrated here:

let observer = new MutationObserver(() => 
                 console.log('<body> attributes changed'));

observer.observe(document.body, { attributes: true });

document.body.className = 'foo';
console.log('Changed body class');

Output:

Note that the callback console.log executes second, indicating that the callback does not 
synchronously execute with the actual DOM mutation.

DOM Working with Callbacks and MutationRecord

Each callback is provided with an array of MutationRecord instances.

Each instance contains information about what kind of mutation occurred and what part of the DOM was affected.

The MutationRecord array for a single attribute mutation is shown here:

let observer = new MutationObserver(
     (mutationRecords) => console.log(mutationRecords));

observer.observe(document.body, { attributes: true });

document.body.setAttribute('foo', 'bar');

Output:

A similar mutation involving a namespace is shown here:

let observer = new MutationObserver(
    (mutationRecords) => console.log(mutationRecords));

observer.observe(document.body, { attributes: true });

document.body.setAttributeNS('baz', 'foo', 'bar');

Output:

Sequential modifications will generate multiple MutationRecord instances, 
and the next callback invocation will be passed all the pending instances in the 
order they were enqueued:

let observer = new MutationObserver(
    (mutationRecords) => console.log(mutationRecords));

observer.observe(document.body, { attributes: true });

document.body.className = 'foo';
document.body.className = 'bar';
document.body.className = 'baz';

Output:

A MutationRecord instance will have the following properties:


   Key
   Value

   target
   The node that was affected by the mutation.
   type
   A string indicating what type of mutation occurred.  
   Can be "attributes", "characterData", or "childList".
   oldValue
   When enabled in the MutationObserverInit object, attributes or characterData mutations will set this field to the value that was replaced.
   This value is only provided when attributeOldValue or characterDataOldValue is true, otherwise this value is null.                    
   A childList mutation will always set this field to  null.                                                                                 
   attributeName
     For attributes mutations, the string name of the attribute which was modified.
   For all other mutations, this field is set to null.                             
   attributeNamespace
     For attributes mutations which make use of namespaces, the string namespace of the attribute which was modified.
   For all other mutations, this field is set to null.                                                               
   addedNodes
     For childList mutations, returns a NodeList of nodes added in the mutation.
   Defaults to an empty NodeList.                                               
   removedNodes
     For childList mutations, returns a NodeList of nodes removed in the mutation.
   Defaults to an empty NodeList.                                                 
   previousSibling
     For childList mutations, returns the previous sibling Node of the mutated node.
   Defaults to null.                                                                
   nextSibling
     For childList mutations, returns the next sibling Node of the mutated node.
   Defaults to null.                                                            

The second argument to the callback is the MutationObserver instance that 
detected the mutation, demonstrated here:

let observer = new MutationObserver(
    (mutationRecords, mutationObserver) => 
              console.log(mutationRecords, mutationObserver));

observer.observe(document.body, { attributes: true });

document.body.className = 'foo';

Output:



DOM MutationObserver disconnect() method

By default, a MutationObserver callback will execute for every DOM mutation in its designated
purview until the element is garbage collected.

To terminate callback execution early, use the disconnect() method.

This example demonstrates how invoking disconnect() synchronously will halt 
callbacks.

It will discard any pending asynchronous callbacks, even if they were
from a DOM mutation during the observation window:

let observer = new MutationObserver(() => 
               console.log('<body> attributes changed'));
observer.observe(document.body, { attributes: true });
document.body.className = 'foo';
observer.disconnect();
document.body.className = 'bar';

To allow for these queued callbacks to execute before invoking disconnect(), a setTimeout could
be employed to allow for pending callbacks to execute:

let observer = new MutationObserver(() =>
             console.log('<body> attributes changed'));
observer.observe(document.body, { attributes: true });
document.body.className = 'foo';
setTimeout(() => {
  observer.disconnect();
  document.body.className = 'bar';
}, 0);

Output:



DOM Register a MutationObserver to many targets

A MutationObserver can be associated with many different target elements by calling observe()
multiple times.

The target property on the MutationRecord can identify which element was subject
to that particular mutation.

This behavior is demonstrated here:

let observer = new MutationObserver(
                 (mutationRecords) => console.log(mutationRecords.map((x) =>
x.target)));

// Append two children to body
let childA = document.createElement('div'),
    childB = document.createElement('span');
document.body.appendChild(childA);
document.body.appendChild(childB);

// Observe both children
observer.observe(childA, { attributes: true });
observer.observe(childB, { attributes: true });

// Perform mutation on each child
childA.setAttribute('foo', 'bar');
childB.setAttribute('foo', 'bar');

Output:

The disconnect() method will disconnect all observed nodes:

let observer = new MutationObserver(
                 (mutationRecords) => console.log(mutationRecords.map((x) =>
x.target)));

// Append two children to body
let childA = document.createElement('div'),
    childB = document.createElement('span');
document.body.appendChild(childA);
document.body.appendChild(childB);

// Observe both children
observer.observe(childA, { attributes: true });
observer.observe(childB, { attributes: true });

observer.disconnect();

// Perform mutation on each child
childA.setAttribute('foo', 'bar');
childB.setAttribute('foo', 'bar');

DOM Reusing a MutationObserver

After calling disconnect() from MutationObserver, we can 
reattach the same instance to a node.

The following example demonstrates this behavior by disconnecting and then
reconnecting in two consecutive async blocks:

let observer = new MutationObserver(() => 
               console.log('<body> attributes changed'));

observer.observe(document.body, { attributes: true });
// This will register as a mutation
document.body.setAttribute('foo', 'bar');

setTimeout(() => {//   w w   w   .d   e  m  o 2  s   .   co  m  
  observer.disconnect();

   // This will not register as a mutation
   document.body.setAttribute('bar', 'baz');
}, 0);

setTimeout(() => {
 // Reattach
 observer.observe(document.body, { attributes: true });

 // This will register as a mutation
 document.body.setAttribute('baz', 'qux');
}, 0);

Output:



DOM Controlling the Observer scope with MutationObserverInit

The MutationObserverInit object controls which elements the observer 
should care about, and what kinds of changes it should care about.

The observer can
watch for attribute changes, text changes, or child node changes.

The following are the properties in the MutationObserverInit object:


   Key
   Type
   Value

   subtree
   Boolean
   Indicating if the target element's node subtree should be watched in addition to the target element.
   When false, only the target element will be observed for designated mutations.                      
   When true, the target element and its entire node subtree will be watched for designated mutations. 
   Defaults to false.                                                                                  
   attributes
   Boolean
   Indicating if modifications to node attributes should register as a mutation.
   Defaults to false.                                                           
   attributeFilter
   Array of string values
     Indicating which specific attributes should be observed for mutations.    
   Setting this value to true will also coerce the value of attributes to true.
     Defaults to observing all attributes.                                     
attributeOldValue
   Boolean
    Indicating if the character data prior to mutation should be recorded in the MutationRecord.
   Setting this value to an array will also coerce the value of attributes to true.             
    Defaults to false.                                                                          
characterData
   Boolean
    Indicating if modifications to character data should register as a mutation.
   Defaults to false.                                                           
characterDataOldValue
   Boolean
     Indicating if the character data prior to mutation should be recorded in the MutationRecord.
   Setting this value to true will also coerce the value of characterData to true.               
   Defaults to false.                                                                            
childList
   Boolean
     Indicating if modifications to the target node's child nodes should register as a mutation.
   Defaults to false.                                                                           

When calling observe(), the MutationObserverInit object must specify
at least one of attributes, characterData, or childList to be true either
explicitly or implicitly via an associated property such as attributeOldValue.

Otherwise, an error will be thrown since there is no mutation that will trigger a
callback to be invoked.

DOM Observing attribute mutations via MutationObserver

A MutationObserver can monitor changes 
when a node attribute is added, removed, or changed.

Registering a callback is accomplished by setting the attributes property inside the 
MutationObserverInit object to true, as demonstrated here:

let observer = new MutationObserver(
    (mutationRecords) => console.log(mutationRecords));

observer.observe(document.body, { attributes: true });

// Add attribute
document.body.setAttribute('foo', 'bar');

// Modify existing attribute
document.body.setAttribute('foo', 'baz');

// Remove attribute
document.body.removeAttribute('foo');

Output:

The default behavior is to observe all attribute changes and to not record the old value inside the
MutationRecord.

To observe a subset of attributes, the attributeFilter property can
be used as a white list of attribute names:

let observer = new MutationObserver(
    (mutationRecords) => console.log(mutationRecords));

observer.observe(document.body, { attributeFilter: ['foo'] });

// Add whitelisted attribute
document.body.setAttribute('foo', 'bar');

// Add excluded attribute
document.body.setAttribute('baz', 'qux');

Only a single mutation record is created for the 'foo' attribute mutation

Output:

To preserve the old value inside the mutation record, the attributeOldValue can be
set to true:

let observer = new MutationObserver(
    (mutationRecords) => console.log(mutationRecords .map((x) => x.oldValue)));

observer.observe(document.body, { attributeOldValue: true });

document.body.setAttribute('foo', 'bar');
document.body.setAttribute('foo', 'baz');
document.body.setAttribute('foo', 'qux');

Each mutation records the previous value

Output:



DOM Observing character data mutations via MutationObserver

A MutationObserver can monitor changes when a textual node, 
such as Text, Comment, or
ProcessingInstruction nodes, has its character data added, removed, or changed.

This is accomplished by setting the characterData property inside 
the MutationObserverInit object to true, as
demonstrated here:

let observer = new MutationObserver(
    (mutationRecords) => console.log(mutationRecords));

// Create an initial text node to observe
document.body.innerText = 'foo';

observer.observe(document.body.firstChild, { characterData: true });

// Identical string assignment
document.body.innerText = 'foo';

// New string assignment

document.body.innerText = 'bar';

 // Node setter assignment
document.body.firstChild.textContent = 'baz';

// All three are recorded as mutations

Output:

The default behavior is to not record the old value inside the MutationRecord.

To preserve the old value inside the mutation record, 
the attributeOldValue can be set to true:

let observer = new MutationObserver(
   (mutationRecords) => console.log(mutationRecords .map((x) => x.oldValue)));

document.body.innerText = 'foo';

observer.observe(document.body.firstChild, { characterDataOldValue: true });

document.body.innerText = 'foo';
document.body.innerText = 'bar';
document.body.firstChild.textContent = 'baz';

Each mutation records the previous value

Output:



DOM Observing child mutations via MutationObserver

A MutationObserver can monitor changes 
when an element has a child node added or removed.

This is accomplished by setting the childList property inside the MutationObserverInit
object to true.

A child node addition is demonstrated here:

// clear body
document.body.innerHTML = '';

let observer = new MutationObserver(
    (mutationRecords) => console.log(mutationRecords));

observer.observe(document.body, { childList: true });

document.body.appendChild(document.createElement('div'));

A child node removal is demonstrated here:

// clear body
document.body.innerHTML = '';

let observer = new MutationObserver(
    (mutationRecords) => console.log(mutationRecords));

observer.observe(document.body, { childList: true });

document.body.appendChild(document.createElement('div'));

A child reordering will register as two separate
mutations since it is technically a node removal and subsequent re-addition:

// clear body
document.body.innerHTML = '';

let observer = new MutationObserver(
     (mutationRecords) => console.log(mutationRecords));

// Create two initial children
document.body.appendChild(document.createElement('div'));
document.body.appendChild(document.createElement('span'));

observer.observe(document.body, { childList: true });

// Reorder children
document.body.insertBefore(document.body.lastChild, document.body.firstChild);

DOM Observing subtree mutations via MutationObserver

By default, the MutationObserver is scoped to only observe modifications to a single element and its
child node list.

This scope can be expanded to the entirety of its DOM subtree by setting the subtree
property inside the MutationObserverInit object to true.

Watching a subtree for attribute mutations can be accomplished in the following code:

// clear body
document.body.innerHTML = '';

let observer = new MutationObserver(
(mutationRecords) => console.log(mutationRecords));

// Create initial element
document.body.appendChild(document.createElement('div'));

// Observe the <body> subtree
observer.observe(document.body, { attributes: true, subtree: true });

// Modify <body> subtree
document.body.firstChild.setAttribute('foo', 'bar');

After a subtree node is removed, mutations which are
now outside the observed subtree will still register as qualified mutations.

This behavior is demonstrated here:

// clear body//   w  w w    .  d e  m   o2   s   .  c  om  
document.body.innerHTML = '';

let observer = new MutationObserver(
(mutationRecords) => console.log(mutationRecords));

let subtreeRoot = document.createElement('div'),
subtreeLeaf = document.createElement('span');

// Create initial subtree of height 2
document.body.appendChild(subtreeRoot);
subtreeRoot.appendChild(subtreeLeaf);

// Observe the subtree
observer.observe(subtreeRoot, { attributes: true, subtree: true });

// Move node in subtree outside of observed subtree
document.body.insertBefore(subtreeLeaf, subtreeRoot);

subtreeLeaf.setAttribute('foo', 'bar');

subtree modification still registers as mutation

Output:



DOM Clear Queue from MutationObserver

We can clear a MutationObserver's record queue with the takeRecords() method.

This will return the array of MutationRecord instances which exist in the queue, and empty the
queue itself.

This is demonstrated here:

let observer = new MutationObserver(
(mutationRecords) => console.log(mutationRecords));

observer.observe(document.body, { attributes: true });

document.body.className = 'foo';
document.body.className = 'bar';
document.body.className = 'baz';

console.log(observer.takeRecords());
console.log(observer.takeRecords());

Output:

We can use takeRecords() 
when you would like to call disconnect() but wish to handle all pending 
MutationRecord instances in the queue which are discarded by calling disconnect().

DOM XML XHTML Namespaces Introduction

XML namespaces allow elements from different XML-based languages to be mixed together in a
single, well-formed document without fear of element name clashes.

Technically, XML namespaces
are not supported by HTML but supported in XHTML; therefore, the examples in this section
are in XHTML.

Namespaces are specified using the xmlns attribute.

The namespace for XHTML is http://www.w3.org/1999/xhtml and should be included on the <html> element of any well-formed XHTML
page, as shown in the following example:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Example XHTML page</title>
 </head>
 <body>
   Hello world!
 </body>
</html>

For this example, all elements are considered to be part of the XHTML namespace by default.

You
can explicitly create a prefix for an XML namespace using xmlns, followed by a colon, followed by
the prefix, as in this example:

<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <xhtml:head>
    <xhtml:title>Example XHTML page</xhtml:title>
  </xhtml:head>
  <xhtml:body>
    Hello world!
  </xhtml:body>
</xhtml:html>

Here, the namespace for XHTML is defined with a prefix of xhtml, requiring all XHTML elements
to begin with that prefix.

Attributes may be qualified by namespace to avoid confusion between languages,
as shown in the following example:

<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <xhtml:head>
    <xhtml:title>Example XHTML page</xhtml:title>
  </xhtml:head>
  <xhtml:body xhtml:class="home">
    Hello world!
  </xhtml:body>
</xhtml:html>

The class attribute in this example is prefixed with xhtml.

Adding namespace isn't really necessary when
only one XML-based language is being used in a document; it is, however, very useful when mixing
two languages together.

Consider the following document containing both XHTML and SVG:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example XHTML page</title>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
       viewBox="0 0 100 100" style="width:100%; height:100%">
      <rect x="0" y="0" width="100" height="100" style="fill:red" />
     </svg>
  </body>
</html>

In this example, the <svg> element is indicated as foreign to the containing document by setting its
own namespace.

All children of the <svg> element, as well as all attributes of the elements, are 
considered to be in the http://www.w3.org/2000/svg namespace.

Even though the document is technically an XHTML document, the SVG code is considered valid because of the use of namespaces.

DOM Styles Introduction

Styles are defined in HTML in three ways: 

including an external style sheet via the <link> element,
defining inline styles using the <style> element, and
defining element-specific styles using the style attribute.

DOM Styles provides an API around all three of these styling mechanisms.

Accessing Element Styles
Any HTML element that supports the style attribute also has a style property exposed in 
JavaScript.

The style object is an instance of CSSStyleDeclaration and contains all stylistic 
information specified by the HTML style attribute but no information about styles that have cascaded from
either included or inline style sheets.

Any CSS property specified in the style attribute are represented as properties on the style object.

Because CSS property names use dash case, such as background-image, the names 
must be converted into camel case in order
to be used in JavaScript.

The following table lists some common CSS properties and the equivalent
property names on the style object.


Css Property
Javascript Property

background-image
style.backgroundImage
color
   style.color
display
 style.display
font-family
 style.fontFamily

The one CSS property float, which is a reserved word in JavaScript, 
is converted to be cssFloat.

Styles can be set using JavaScript at any time as long as a valid DOM element reference is available.

Here are some examples:

let myDiv = document.getElementById("myDiv");

// set the background color
myDiv.style.backgroundColor = "red";

// change the dimensions
myDiv.style.width = "100px";
myDiv.style.height = "200px";

// assign a border
myDiv.style.border = "1px solid black";

When styles are changed in this manner, the display of the element is automatically updated.

When in standards mode, all measurements have to include a unit of measure.

In quirks mode, you can set style.width to be  "20" and it will assume
that you mean  "20px"; in standards mode, setting style.width to  "20" will be
ignored because it has no unit of measure.

In practice, it's best to always include the unit of measurement.

Styles specified in the style attribute can also be retrieved using the style object.

Consider the following HTML:

<div id="myDiv" style="background-color: blue; width: 10px; height: 25px"></div>

The information from this element's style attribute can be retrieved via the following code:

console.log(myDiv.style.backgroundColor);   // "blue"
console.log(myDiv.style.width);             // "10px"
console.log(myDiv.style.height);            // "25px"

If no style attribute is specified on an element, the style object will contain empty values for all
possible CSS properties.

DOM Style Properties and Methods

The DOM Style specification defines several properties and methods on the style
object.

These properties and methods provide information about the contents of the element's style
attribute and enabling changes.

They are as follows:


Name   
cssText
   Description                                              
     provides access to the CSS code of the style attribute.

length
   The number of CSS properties applied to the element.
parentRule
   The CSSRule object representing the CSS information.
getPropertyCSSValue(propertyName)
   Returns a CSSValue object containing the value of the given property.
getPropertyPriority(propertyName)
   Returns  "important" if the given property is set using  !important; otherwise, it returns an empty string.
getPropertyValue(propertyName)
   Returns the string value of the given property.
item(index)
   Returns the name of the CSS property at the given position.
removeProperty(propertyName)
   Removes the given property from the style.
setProperty(propertyName, value, priority)
   Sets the given property to the given value with a priority (either  "important" or an empty string).

cssText
The cssText property allows access to the CSS code of the style.

When used in read mode, cssText
returns the browser's internal representation of the CSS code in the style attribute.

When used in
write mode, the value assigned to cssText overwrites the entire value of the style attribute, meaning
that all previous style information specified using the attribute is lost.

For instance, if the element has
a border specified via the style attribute and you overwrite cssText with rules that don't include
the border, it is removed from the element.

The cssText property is used as follows:

myDiv.style.cssText = "width: 25px; height: 100px; background-color: red";
console.log(myDiv.style.cssText);

Setting the cssText property is the fastest way to make multiple changes to an element's style.

Length
The length property is designed for use in conjunction with the item() method for iterating over the
CSS properties defined on an element.

With these, the style object effectively becomes a collection,
and bracket notation can be used in place of item() to retrieve the CSS property name in the given
position, as shown in the following example:

for (let i = 0, len = myDiv.style.length; i < len; i++) {
  console.log(myDiv.style[i]);   // alternately, myDiv.style.item(i)
}

Using either bracket notation or item(), you can retrieve the CSS property name ( "background-color", not  "backgroundColor").

This property name can then be used in getPropertyValue() to
retrieve the actual value of the property, as shown in the following example:

let prop, value, i, len;
for (i = 0, len = myDiv.style.length; i < len; i++) {
   prop = myDiv.style[i];   // alternately, myDiv.style.item(i)
   value = myDiv.style.getPropertyValue(prop);
   console.log('prop: ${value}');
}

The getPropertyValue() method always retrieves the string representation of the CSS property value.

If you need more information, getPropertyCSSValue() returns a CSSValue object that has two properties: cssText and cssValueType.

The cssText property is the same as the value returned from getPropertyValue().

The cssValueType property is a numeric constant indicating the type
of value being represented: 

0 for an inherited value,
1 for a primitive value,
2 for a list, or
3 for a custom value.

The following code outputs the CSS property value and the value type:

let prop, value, i, len;
for (i = 0, len = myDiv.style.length; i < len; i++) {
   prop = myDiv.style[i];   // alternately, myDiv.style.item(i)
   value = myDiv.style.getPropertyCSSValue(prop);
   console.log(`prop: ${value.cssText} (${value.cssValueType})`);
}

The removeProperty() method is used to remove a specific CSS property from the element's styling.

Removing a property using this method means that any default styling for that property cascading from other style sheets will be applied.

For instance, to remove a border property that was set in the
style attribute, you can use the following code:

myDiv.style.removeProperty("border");

This method is helpful when you're not sure what the default value for a given css property is.

Simply removing the property allows the default value to be used.

DOM Computed Styles

DOM Style augments document.defaultView to provide a method called getComputedStyle().

This method accepts two arguments: the element to get the computed style for and a
pseudo-element string, such as ":after".

The second argument can be null if no pseudo-element information is necessary.

The getComputedStyle() method returns a CSSStyleDeclaration object, 
which the same type as the style property, containing all computed styles for the element.

Consider the following HTML page:

<!DOCTYPE html>
<html>
<head>
  <title>Computed Styles Example</title>
  <style type="text/css">
    #myDiv {
      background-color: blue;
      width: 100px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div id="myDiv" style="background-color: red; border: 1px solid black"></div>
</body>
</html>

In this example, the <div> element has styles applied to it both from an inline style sheet and from the style attribute.

The style object has values for backgroundColor
and border, but nothing for width and height, which are applied through a style sheet rule.

The following code retrieves the computed style for the element:

let myDiv = document.getElementById("myDiv");
let computedStyle = document.defaultView.getComputedStyle(myDiv, null);

console.log(computedStyle.backgroundColor);  // "red"
console.log(computedStyle.width);            // "100px"
console.log(computedStyle.height);           // "200px"
console.log(computedStyle.border);// "1px solid black" in some browsers

When retrieving the computed style of this element, the background color is reported as  "red", the
width as  "100px", and the height as  "200px".

The background color is not "blue" because
that style is overridden on the element itself.

The border property may or may not return the exact border rule from the style sheet.

You should test your code on a number of browsers when using getComputedStyle().

The computed styles in all browsers are read-only;
you cannot change CSS properties on a computed style object.

Sny CSS property that has a default value will be represented in the computed style.

For instance, the visibility property always
has a default value in all browsers, but this value differs per implementation.

DOM Working with CSS Style Sheets

The CSSStyleSheet type represents a CSS style sheet as included using a <link> element or defined
in a <style> element.

The elements themselves are represented by the HTMLLinkElement
and HTMLStyleElement types, respectively.

The CSSStyleSheet type is generic enough to represent
a style sheet no matter how it is defined in HTML.

The CSSStyleSheet type inherits from StyleSheet, which can be used as a base to define non-CSS
style sheets.

The following properties are inherited from StyleSheet:


Property
   Description

disabled
   A Boolean value indicating if the style sheet is disabled.                           
   This property is read/write, so setting its value to true will disable a style sheet.
href
   The URL of the style sheet if it is included using <link>;
   otherwise, this is null.                                  
media
   A collection of media types supported by this style sheet.                                          
   The collection has a length property and item() method, as with all DOM collections.                
   Like other DOM collections, you can use bracket notation to access specific items in the collection.
   An empty list indicates that the style sheet should be used for all media.                          
ownerNode
     Pointer to the node that owns the style sheet, which is either a <link> or a <style> element in HTML.
   This property is null if a style sheet is included in another style sheet using @import.               
parentStyleSheet
   When a style sheet is included via @import, this is a pointer to the style sheet that imported it.
title
   The value of the title attribute on the ownerNode.
type
   A string indicating the type of style sheet.
   For CSS style sheets, this is  "text/css".  

With the exception of disabled, the rest of these properties are read-only.

The CSSStyleSheet type
supports all of these properties and the following properties and methods:


Property
   Description

cssRules
   A collection of rules contained in the style sheet.
ownerRule
   If the style sheet was included using @import, this is a pointer to the rule representing the import; otherwise, this is null.
deleteRule(index)
   Deletes the rule at the given location in the cssRules collection.
insertRule(rule, index)
   Inserts the given string rule at the position specified in the cssRules collection.

The list of style sheets available on the document is represented by the document.styleSheets collection.

The number of style sheets on the document can be retrieved using the length property, and
each individual style sheet can be accessed using either the item() method or bracket notation.

Here is an example:

let sheet = null;
for (let i = 0, len = document.styleSheets.length; i < len; i++) {
   sheet = document.styleSheets[i];
   console.log(sheet.href);
}

This code outputs the href property of each style sheet used in the document.

<style> elements have no href.

The style sheets returned in document.styleSheets vary from browser to browser.

We can retrieve the CSSStyleSheet object directly from the <link> or <style> element.

The DOM specifies a property called sheet that contains the CSSStyleSheet object.

DOM CSS Rule Object

A CSSRule object represents each rule in a style sheet.

The CSSRule type is a base type from
which several other types inherit, but the most often used is CSSStyleRule, which represents styling information.

The following properties are available on a CSSStyleRule object:


Property
   Meaning

cssText
   Returns the text for the entire rule.                                                                                              
   This text may be different from the actual text in the style sheet because of the way that browsers handle style sheets internally;
   Safari always converts everything to all lowercase.                                                                                
parentRule
      If this rule is imported, this is the import rule;
   otherwise, this is null.                             
parentStyleSheet
   The style sheet that this rule is a part of.
selectorText
     Returns the selector text for the rule.                                                                                          
   This text may be different from the actual text in the style sheet because of the way that browsers handle style sheets internally.
   This property is read-only in Firefox, Safari, Chrome, and Internet Explorer (where it throws an error).                           
   Opera allows selectorText to be changed.                                                                                         
style
   A CSSStyleDeclaration object that allows the setting and getting of specific style values for the rule.
type
   A constant indicating the type of rule. For style rules, this is always  1.

The three most frequently used properties are cssText, selectorText, and style.

The cssText property is similar to the style.cssText property but not exactly the same.

The former includes the
selector text and the braces around the style information; the latter contains only the style information, similar to style.cssText on an element.

cssText is read-only, whereas style.cssText may be overwritten.

The style property is all that is required to manipulate style rules.

This object can be used just like the one on each element to read or change the style information for a rule.

Consider the following CSS rule:

div.box {
   background-color: blue;
   width: 100px;
   height: 200px;
}

Assuming that this rule is in the first style sheet on the page and is the only style in that style sheet,
the following code can be used to retrieve all of its information:

let sheet = document.styleSheets[0];
let rules = sheet.cssRules || sheet.rules;  // get rules list
let rule = rules[0];              // get first rule
console.log(rule.selectorText);           // "div.box"
console.log(rule.style.cssText);          // complete CSS code
console.log(rule.style.backgroundColor);  // "blue"
console.log(rule.style.width);            // "100px"
console.log(rule.style.height);           // "200px"

Using this technique, we can determine the style information related to a rule in the same way you can determine the inline style information for an element.

As with elements, we can change the style information, as shown in the following example:

let sheet = document.styleSheets[0];
let rules = sheet.cssRules || sheet.rules;  // get rules list
let rule = rules[0];                        // get first rule
rule.style.backgroundColor = "red"

Changing a rule in this way affects all elements on the page for which the rule applies.

If there are two <div> elements that have the box class, they will both be affected by this change.

DOM Creating CSS Rules

We can add new rules to existing style sheets using the insertRule() method.

This method expects two arguments: the text of the rule and the index at which to insert the rule.

Here is an example:

sheet.insertRule("body { background-color: silver }", 0);  // DOM method

This example inserts a rule that changes the document's background color.

The rule is inserted as the
first rule in the style sheet (position 0).

The order is important in determining how the rule cascades
into the document.

DOM Deleting CSS Rules

We can delete rules from a style sheet using deleteRule() method, which accepts a single argument: the index of the rule to remove.

To remove the first rule in a style sheet, you can use the following code:

sheet.deleteRule(0);  // DOM method

Deleting rules can affect the cascading effect of CSS.

DOM Range Introduction

A range can be used to select a section of a document regardless of node boundaries.

A DOM range can be created using createRange() from Document type, as shown here:

let range = document.createRange();

The newly created range is linked to the document on which it was created
and cannot be used on other documents.

This range can then be used to select specific parts of the
document behind the scenes.

Once a range has been created and its position set, a number of different
operations can be performed on the range.

Each range is represented by an instance of the Range type, 
which has a number of properties and methods.

The following properties provide information about the range:


Property
   Meaning

startContainer
      The node within which the range starts.    
   The parent of the first node in the selection.
startOffset
     The offset within the startContainer where the range starts.                                                                                 
   If startContainer is a text node, comment node, or CData node, the startOffset is the number of characters skipped before the range starts;
   otherwise, the offset is the index of the first child node in the range.                                                                         
endContainer
    The node within which the range ends.       
   The parent of the last node in the selection.
endOffset
   The offset within the endContainer where the range ends.
   It follows the same rules as startOffset.               
commonAncestorContainer
   The deepest node in the document that has both startContainer and endContainer as descendants.

These properties are filled when the range is placed into a specific position in the document.

DOM Simple Selection in DOM Ranges

To select a part of the document using a range is use either selectNode() or
selectNodeContents().

These methods each accept one argument, a DOM node, and fill a range
with information from that node.

The selectNode() method selects the entire node, including its
children, whereas selectNodeContents() selects only the node's children.

For example, consider the following HTML:

<!DOCTYPE html>
<html>
  <body>
    <p id="p1"><b>Hello</b> world!</p>
  </body>
</html>

This code can be accessed using the following JavaScript:

let range1 = document.createRange(),
    range2 = document.createRange(),
    p1 = document.getElementById("p1");
range1.selectNode(p1);
range2.selectNodeContents(p1);

The two ranges in this example contain different
sections of the document: range1 contains the <p>
element and all its children, whereas range2 contains 
the <b> element, the text node  "Hello", and the text 
node  "world!".



When selectNode() is called, startContainer,
endContainer, and commonAncestorContainer are all equal to the parent node of the node that
was passed in; in this example, these would all be equal to document.body.

The startOffset property is equal to the index of the given node within the parent's childNodes collection which is
1 in this example.

The endOffset is equal to the startOffset plus one because only one node is selected.

When selectNodeContents() is called, startContainer, endContainer, and 
commonAncestorContainer
 are equal to the node that was passed in, which is the <p> element in this example.

The startOffset property is always equal to  0, because the range begins with the first child of the
given node, whereas endOffset is equal to the number of child nodes as node.childNodes.length,
which is 2 in this example.

We can get more fine-grained control over which nodes are included in the selection by using
the following range methods:


Method
   Meaning

setStartBefore(refNode)
   Sets the starting point of the range to begin before refNode, so refNode is the first node in the selection.                                                          
   The startContainer property is set to refNode.parentNode, and the startOffset property is set to the index of refNode within its parent's childNodes collection.
setStartAfter(refNode)
    Sets the starting point of the range to begin after refNode, so refNode is not part of the selection; rather, its next sibling is the first node in the selection.            
   The startContainer property is set to refNode.parentNode, and the startOffset property is set to the index of refNode within its parent's childNodes collection plus one.
setEndBefore(refNode)
      Sets the ending point of the range to begin before refNode, so refNode is not part of the selection; its previous sibling is the last node in the selection.   
   The endContainer property is set to refNode.parentNode, and the endOffset property is set to the index of refNode within its parent's childNodes collection.
setEndAfter(refNode)
      Sets the ending point of the range to begin before refNode, so refNode is the last node in the selection.                                                                
   The endContainer property is set to *refNode. parentNode*, and the endOffset property is set to the index of refNode within its parent's childNodes collection plus one.

When you use any of these methods, all properties are assigned for you.

However, it is possible to
assign these values directly in order to make complex range selections.

DOM Complex Selection in DOM Ranges

Creating complex ranges requires the use of the setStart() and setEnd() methods 
from Range object.

Both methods accept two arguments: a reference node and an offset.

For setStart(), the reference node becomes
the startContainer, and the offset becomes the startOffset.

For setEnd(), the reference node
becomes the endContainer, and the offset becomes the endOffset.

With these methods, it is possible to mimic selectNode() and selectNodeContents().

Here is
an example:

let range1 = document.createRange(),
    range2 = document.createRange(),
    p1 = document.getElementById("p1"),
    p1Index = -1,
    i,
    len;
for (i = 0, len = p1.parentNode.childNodes.length; i < len; i++) {
  if (p1.parentNode.childNodes[i] === p1) {
    p1Index = i;
    break;
  }
}

range1.setStart(p1.parentNode, p1Index);
range1.setEnd(p1.parentNode, p1Index + 1);
range2.setStart(p1, 0);
range2.setEnd(p1, p1.childNodes.length);

Note that to select the node, you must first determine the index of the given 
node (p1) in its parent node's childNodes collection.

To select the node contents using range2, you do
not need calculations; setStart() and setEnd() can be set with default values.

Partial Selection
setStart() and setEnd() can do partial selection of nodes.

For example, consider the following HTML:

<!DOCTYPE html>
<html>
  <body>
    <p id="p1"><b>Hello</b> world!</p>
  </body>
</html>

Suppose that you want to select only from the  "llo" in  "Hello" to the  "o" in  "world!" in the previous HTML code.

The first step is to get references to all of the relevant nodes, as shown in the following example:

let p1 = document.getElementById("p1"),
    helloNode = p1.firstChild.firstChild,
    worldNode = p1.lastChild

The  "Hello" text node is actually a grandchild of <p> because it's a child of <b>, 
so you can use p1.firstChild to get <b> and p1.firstChild.firstChild to get the 
text node.

The  "world!" text node is the second and the last child of <p>, so you can use 
p1.lastChild to retrieve it.

Next, the range must be created and its boundaries defined, as shown in the 
following example:

let range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

Because the selection should start after the  "e" in
"Hello", helloNode is passed into setStart() with                   
an offset of 2, the position after the  "e" where  "H"              
is in position 0. 

To set the end of the selection, pass            
worldNode into setEnd() with an offset of 3, 
indicating the first character that should not be selected,
which is  "r" in position 3.

There is actually a space in
position 0. 



Because both helloNode and worldNode are text nodes, they become 
the startContainer and
endContainer for the range so that the startOffset and endOffset accurately look 
at the text
contained within each node rather than look for child nodes.

The commonAncestorContainer is the <p> element, which is the first ancestor that
contains both nodes.

DOM Delete DOM Range Content

When a range is created, internally it creates a document fragment node where all of the nodes
in the selection are attached.

The range contents must be well formed in order for this process to take place.

The range does not represent a well-formed DOM structure 
if the selection begins inside one text node and ends in another.

Ranges can recognize missing opening and closing tags and can 
reconstruct a valid DOM structure to operate on.

With the range created, the contents of the range can be manipulated using a variety of methods.

Delete
For example, consider the following HTML:

<!DOCTYPE html>
<html>
  <body>
    <p id="p1"><b>Hello</b> world!</p>
  </body>
</html>

The method deleteContents() simply
deletes the contents of the range from the document.

Here is an example:

let p1 = document.getElementById("p1"),
    helloNode = p1.firstChild.firstChild,
    worldNode = p1.lastChild,
    range = document.createRange();

range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

range.deleteContents();

Executing this code results in the following HTML being shown on the page:

<p><b>He</b>rld!</p>

Because the range selection process altered the underlying DOM structure to remain well formed, 
the resulting DOM structure is well formed even after removing 
the contents.

DOM Extract DOM Range Content

extractContents() is similar to deleteContents() since it removes the range selection from
the document.

The extractContents() returns the range's document fragment to the caller.
This allows you to insert the contents of the range somewhere else.

For example, consider the following HTML:

<!DOCTYPE html>
<html>
  <body>
    <p id="p1"><b>Hello</b> world!</p>
  </body>
</html>

Here is an example:

let p1 = document.getElementById("p1"),
    helloNode = p1.firstChild.firstChild,
    worldNode = p1.lastChild,
    range = document.createRange();

range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

let fragment = range.extractContents();
p1.parentNode.appendChild(fragment);

In this example, the fragment is extracted and added to the end of the document's <body> element.

When a document fragment is passed into appendChild(), only the fragment's 
children are added, not the fragment itself.

DOM Clone DOM Range Content

The range can create a clone of itself and can be inserted else where in
the document by using cloneContents().

For example, consider the following HTML:

<!DOCTYPE html>
<html>
  <body>
    <p id="p1"><b>Hello</b> world!</p>
  </body>
</html>

let p1 = document.getElementById("p1"),
    helloNode = p1.firstChild.firstChild,
    worldNode = p1.lastChild,
    range = document.createRange();

range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

let fragment = range.cloneContents();
p1.parentNode.appendChild(fragment);

cloneContents() method returns a document fragment.

The document fragment returned by cloneContents() contains 
clones of the nodes contained in the range instead of the actual nodes.

The splitting of nodes ensures that a well-formed document isn't produced
until one of these methods is called.

The original HTML remains intact right up until the point that
the DOM is modified.

DOM Inserting DOM Range Content

The insertNode() method can insert a node at the beginning of the range selection.

For example, consider the following HTML:

<!DOCTYPE html>
<html>
  <body>
    <p id="p1"><b>Hello</b> world!</p>
  </body>
</html>

Suppose that you want to insert the following HTML:

<span style="color: red">Inserted text</span>

The following code accomplishes this:

let p1 = document.getElementById("p1"),
   helloNode = p1.firstChild.firstChild,
   worldNode = p1.lastChild,
   range = document.createRange();

range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

let span = document.createElement("span");
span.style.color = "red";
span.appendChild(document.createTextNode("Inserted text"));

range.insertNode(span);

Running this JavaScript effectively creates the following HTML code:

<p id="p1"><b>He<span style="color: red">Inserted text</span>llo</b> world</p>

<span> is inserted just before the  "llo" in  "Hello", which is the first 
part of the range selection.

We can insert content surrounding the range by using the surroundContents() method.

This method accepts the node that surrounds the range contents as the argument.

The following code highlights certain words in a web page, as shown here:

let p1 = document.getElementById("p1"),
   helloNode = p1.firstChild.firstChild,
   worldNode = p1.lastChild,
   range = document.createRange();

range.selectNode(helloNode);
let span = document.createElement("span");
span.style.backgroundColor = "yellow";
range.surroundContents(span);

This code highlights the range selection with a yellow background.

The resulting HTML is as follows:

<p><b><span style="background-color:yellow">Hello</span></b> world!</p>

In order to insert the <span>, the range has to contain a whole DOM selection.

It can't have only partially selected DOM nodes.

DOM Collapsing a DOM Range

When a range isn't selecting any part of a document, it is said to be collapsed.

When you collapse a range, its location is set between parts of
a document, either at the beginning of the range selection or at the end.

You can collapse a range by using the collapse() method, which accepts a single argument: 
a Boolean value indicating which end of the range to collapse to.

If the argument is true, then the
range is collapsed to its starting point; if it is false, the range is collapsed to its ending point.

To determine if a range is already collapsed, you can use the collapsed property as follows:

range.collapse(true);    // collapse to the starting point
console.log(range.collapsed);  // outputs "true"

We can find out if two tags are next to each other 
by testing whether a range is collapsed. 

For example, consider this HTML code:                 

<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>

We can create the following range:

let p1 = document.getElementById("p1"),
p2 = document.getElementById("p2"),                          
range = document.createRange();
range.setStartAfter(p1);
range.setStartBefore(p2);
console.log(range.collapsed);  // true

Since the the created range is collapsed then we know that 
there is nothing between the end of p1 and the beginning of p2.

DOM Comparing DOM Ranges

We can use the compareBoundaryPoints() method to 
determine if the ranges have any boundaries in common between two range objects.

The method accepts two arguments: the range to compare to and how to compare.

It is one of the following constant values:


Value
   Number
   Meaning
Range.START_TO_START
Range.START_TO_END  
Range.END_TO_END    
Range.END_TO_START  
   0  
   1  
   2  
     3
   Compares the starting point of the first range to the starting point of the second.       
      Compares the starting point of the first range to the end point of the second.         
      Compares the end point of the first range to the end point of the second.              
               Compares the end point of the first range to the starting point of the second.
The compareBoundaryPoints() method returns 

-1 if the point from the first range comes before the point from the second range,
0 if the points are equal, or
1 if the point from the first range comes after the point from the second range.

Consider the following example:

let range1 = document.createRange();
let range2 = document.createRange();
let p1 = document.getElementById("p1");

range1.selectNodeContents(p1);
range2.selectNodeContents(p1);
range2.setEndBefore(p1.lastChild);

console.log(range1.compareBoundaryPoints(Range.START_TO_START, range2));  
console.log(range1.compareBoundaryPoints(Range.END_TO_END, range2));      

DOM Cloning DOM Ranges

Ranges can be cloned by calling the cloneRange() method.

For example, consider the following HTML:

<!DOCTYPE html>
<html>
  <body>
    <p id="p1"><b>Hello</b> world!</p>
  </body>
</html>

This method creates an exact duplicate of the range on which it is called:

let p1 = document.getElementById("p1"),
   helloNode = p1.firstChild.firstChild,
   worldNode = p1.lastChild,
   range = document.createRange();

range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

let newRange = range.cloneRange();

The new range contains all of the same properties as the original, and its end points can be modified
without affecting the original in any way.

DOM Range Cleanup

When you are done using a range, we should call the detach() method, which detaches 
the range from the document on which it was created.

After calling detach(), the range can be safely 
dereferenced, so the memory can be reclaimed through garbage collection.

For example, consider the following HTML:

<!DOCTYPE html>
<html>
  <body>
    <p id="p1"><b>Hello</b> world!</p>
  </body>
</html>

Here is an example:

let p1 = document.getElementById("p1"),
   helloNode = p1.firstChild.firstChild,
   worldNode = p1.lastChild,
   range = document.createRange();

range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

range.detach();  // detach from document
range = null;        //  dereferenced

Following these two steps is the most appropriate way to finish using a range.

Once it is detached, a range can no longer be used.

Document Object Model Introduction

The Document Object Model (DOM) is an application programming interface (API) for HTML
and XML documents.

The DOM represents a document as a hierarchical tree of nodes, allowing developers to add, remove, and modify individual parts of the page.

The DOM is a collection of objects representing the elements in your HTML document. 

Evolving out of early Dynamic HTML (DHTML), the DOM is now a truly
cross-platform, language-independent way of representing and manipulating pages for markup.

DOM Level 1 became a W3C recommendation in October 1998, providing interfaces for basic
document structure and querying.

Given the following html code:

<!DOCTYPE HTML>
<html>
    <body>
        <p id="myId">
            test<span id="myId2">span</span> 
            test
        </p>
        <p id="LEGO">
            test 
        </p>
    </body>
</html>

As part of the process of displaying your HTML document, the browser parses the HTML and
creates a model.

The model preserves the hierarchy of the HTML elements, and
each element is represented by a JavaScript object.



You can use the DOM to get information about the
document or to make changes to it.

This is the foundation of modern web applications.

Each model object in the model has properties and methods.

When you use these to change the
state of the object, the browser reflects the changes in the corresponding HTML element and updates
your document.

All of the DOM objects that represent elements support the same set of basic features.

Testing for DOM Features

We can test for the presence of the property or method on the DOM object that is
associated with a feature.

let images;
if (document.querySelectorAll) {
    images = document.querySelectorAll("#paratext > img");
} else {
    images = document.getElementById("paratext").getElementsByTagName("img");
}

for (let i = 0; i < images.length; i++) {
    images[i].style.border = "thick solid black";
    images[i].style.padding = "4px";
}


Open in separate window
View full source code

<html>
    <body>
        <p id="paratext">
            This is a test.
            <img src="html.png" alt="myId3"/>
        </p>
        <script>
            let images;<!-- w    ww   .  d e    mo    2  s.    c o  m -->
            if (document.querySelectorAll) {
                images = document.querySelectorAll("#paratext > img");
            } else {
                images = document.getElementById("paratext").
                         getElementsByTagName("img");
            }

            for (let i = 0; i < images.length; i++) {
                images[i].style.border = "thick solid black";
                images[i].style.padding = "4px";
            }
        </script>
    </body>
</html>


In this example, the script uses an if clause to determine whether
the document object defines a method called querySelectorAll.

If the clause evaluates to true, then the browser supports the feature,
and we can go on and use it.

If the clause evaluates to false, then we can take an alternative approach to
achieve the same goal.

DOM Hierarchy Of Nodes

Any HTML or XML document can be represented as a hierarchy of nodes using the DOM.

There are several node types, each representing different information and/or markup in the document.

Each node type has different characteristics, data, and methods, and each may have relationships with
other nodes.

These relationships create a hierarchy that allows markup to be represented as a tree,
rooted at a particular node.

For instance, consider the following HTML:

<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

This simple HTML document can be represented
in a hierarchy, as illustrated in the following tree.

Document
 |
 +---Element html
      |
      +---Element head
      |    |
      |    +---Element title
      |         |
      |         +---Text Sample Page
      |
      +---Element body
           |
           +---Element p
                |
                +----Text Hello world!

A document node represents every document as the root.

In this example, the only child of the document node is the <html> element, which is
called the document element.

The document element is the outermost element in the document
within which all other elements exist.

There can be only one document element per document.

In HTML pages, the document element is always the <html> element. 

In XML, where there are no predefined elements, any element may be the document element.

Every piece of markup can be represented by a node in the tree: 

HTML elements are represented by element nodes,
attributes are represented by attribute nodes,
the document type is represented by a document type node, and
comments are represented by comment nodes.

In total, there are 12 node types, all of which inherit from a base type. 

DOM Node Type

DOM Level 1 describes an interface called Node that is to be implemented by all node types in the DOM.

The Node interface is implemented in JavaScript as the Node type, which is accessible in all
browsers.

All node types inherit from Node in JavaScript, so all node types
share the same basic properties and methods.

Every node has a nodeType property that indicates the type of node that it is.

Node types are represented by one of the following 12 numeric constants on the Node type:


Type
   Number Value

Node.ELEMENT_NODE
   1
Node.ATTRIBUTE_NODE
   2
Node.TEXT_NODE
   3
Node.CDATA_SECTION_NODE
   4
Node.ENTITY_REFERENCE_NODE
   5
Node.ENTITY_NODE
   6
Node.PROCESSING_INSTRUCTION_NODE
   7
Node.COMMENT_NODE
   8
Node.DOCUMENT_NODE
   9
Node.DOCUMENT_TYPE_NODE
   10
Node.DOCUMENT_FRAGMENT_NODE
   11
Node.NOTATION_NODE
   12

A node's type is easy to determine by comparing against one of these constants, as shown here:

if (someNode.nodeType == Node.ELEMENT_NODE){
  console.log("Node is an element.");
}

This example compares the someNode.nodeType to the Node.ELEMENT_NODE constant.

If they're equal, it means someNode is actually an element.

Not all node types are supported in web browsers.

Developers most often work with element and text nodes.

DOM node Name and node Value Properties

Two properties, nodeName and nodeValue, give specific information about the node.

The values of these properties are completely dependent on the node type.

We need to test the node type before using one of these values, as the following code shows:

if (someNode.nodeType == 1){
  value = someNode.nodeName;   // will be the element's tag name
}

In this example, the node type is checked to see if the node is an element.

If so, the nodeName value is assigned to a variable.

For elements, nodeName is always equal to the element's tag name, and 
nodeValue is always null.

DOM Node Relationships

All nodes in a document have relationships to other nodes.

For instance, consider the following HTML:

<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

In HTML, the <body>
element is a child of the <html> element; 
likewise the <html> element is the parent of the <body> element.

The <head> element is a sibling of the <body> element,
because they both share the same immediate parent, the <html> element.

This simple HTML document can be represented
in a hierarchy, as illustrated in the following tree.

Document
 |
 +---Element html
      |
      +---Element head
      |    |
      |    +---Element title
      |         |
      |         +---Text Sample Page
      |
      +---Element body
           |
           +---Element p
                |
                +----Text Hello world!

DOM Node List Object

Each node has a childNodes property containing a NodeList.

A NodeList is an array-like object used
to store an ordered list of nodes that are accessible by position.

A NodeList is not an
instance of Array even though its values can be accessed using bracket notation and the length 
property is present.

NodeList objects are unique in that they are actually queries being run against the DOM
structure, so changes will be reflected in NodeList objects automatically.

A NodeList is a living object rather than a snapshot of what happened at the time it was first accessed.

The following example shows how nodes stored in a NodeList may be accessed via bracket notation
or by using the item() method:

let firstChild = someNode.childNodes[0];
let secondChild = someNode.childNodes.item(1);
let count = someNode.childNodes.length;

Using bracket notation and using the item() method are both acceptable practices.

The length property indicates the number of nodes in the NodeList at that time.

We can convert NodeList objects into arrays using Array.prototype.slice().

Consider the following example:

let arrayOfNodes = Array.prototype.slice.call(
                     someNode.childNodes,0);

DOM Parent child Node

Each node has a parentNode property pointing to its parent in the document tree.

All nodes contained within a childNodes list have the same parent, so each 
of their parentNode properties points to the same node.

Each node within a childNodes list is considered to be a sibling of the
other nodes in the same list.

We can navigate from one node in the list to another by using the
previousSibling and nextSibling properties.

The first node in the list has null for the value of its
previousSibling property, and the last node in the list has null for 
the value of its nextSibling property, as shown in the following example:

if (someNode.nextSibling === null){
  console.log("Last node in the parent's childNodes list.");
} else if (someNode.previousSibling === null){
  console.log("First node in the parent's childNodes list.");
}

If there's only one child node, both nextSibling and previousSibling will be null.

Another relationship exists between a parent node and its first and last child nodes.

The firstChild
and lastChild properties point to the first and last node in the childNodes list, respectively.

The value of someNode.firstChild is always equal to someNode.childNodes[0], 
and the value of someNode.lastChild is always equal 
to someNode.childNodes[someNode.childNodes.length-1].

If there is only one child node, firstChild and lastChild point to the same node.

If there are no children, then firstChild and lastChild are both null.

All of these relationships help
to navigate easily between nodes in a document structure.

hasChildNodes() returns true if the node has one
or more child nodes and is more efficient than querying the length of the childNodes list.

The ownerDocument property is a pointer to the document node that represents the entire document.

Nodes are considered to be owned by the document
in which they were created, because nodes cannot exist
simultaneously in two or more documents.

This property provides a quick way to access the 
document node without needing to traverse the node hierarchy back up to the top.

Not all node types can have child nodes even though all node types
inherit from Node.

DOM Manipulating Nodes

Several methods are available to manipulate nodes.

Append
The appendChild() method adds a node to the end of the childNodes list.

Doing so updates all of the relationship pointers in the newly added node, 
the parent node, and the previous last child in the childNodes list.

When complete, appendChild() returns the newly added node.

Here is an example:

let returnedNode = someNode.appendChild(newNode);
console.log(returnedNode == newNode);         // true
console.log(someNode.lastChild == newNode);   // true

If the node passed into appendChild() is already part of the document, it is removed from its
previous location and placed at the new location.

No DOM node may exist in more than one location in a document.

If you call appendChild() and pass in the first child of a parent, it will end up
as the last child:

// assume multiple children for someNode
let returnedNode = someNode.appendChild(someNode.firstChild);
console.log(returnedNode == someNode.firstChild);  // false
console.log(returnedNode == someNode.lastChild);   // true

Insert
When a node needs to be placed in a specific location within the childNodes list, 
use the insertBefore() method.

The insertBefore() method accepts two arguments: 

the node to insert and
a reference node.

The node to insert becomes the previous sibling of the
reference node and is ultimately returned by the method.

If the reference node is null, then insertBefore() acts the same as appendChild(), as this example shows:

insert as last child

returnedNode = someNode.insertBefore(newNode, null);
console.log(newNode == someNode.lastChild);   // true

insert as the new first child.

returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
console.log(returnedNode == newNode);         // true
console.log(newNode == someNode.firstChild);  // true

insert before last child.

returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
console.log(newNode == someNode.childNodes[someNode.childNodes.length - 2]);
// true

Both appendChild() and insertBefore() insert nodes without removing any.

Replace
The replaceChild() method accepts two arguments: 

the node to insert and
the node to replace.

The node to replace is returned by the function and is removed from the document tree completely while the
inserted node takes its place.

Here is an example:replace first child

let returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

replace last child

returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

When a node is inserted using replaceChild(), all of its relationship pointers are duplicated from
the node it is replacing.

The replaced node no longer has a specific location in the document.

Remove
To remove a node without replacing it, you can use the removeChild() method.

This method accepts a single argument, which is the node to remove.

The removed node is then returned as the function value, as this example shows:

Remove first child

let formerFirstChild = someNode.removeChild(someNode.firstChild);

remove last child.

let formerLastChild = someNode.removeChild(someNode.lastChild);

A node removed via removeChild() is still owned by the document but
doesn't have a specific location in the document.

To use the above method you must know the immediate parent node,
which is accessible via the parentNode property.

Not all node types can have child nodes, and these methods will throw errors
if you attempt to use them on nodes that don't support children.

DOM Clone Node

DOM cloneNode() method creates an exact clone of the node on which it's called.

The cloneNode() method accepts a single Boolean argument indicating whether to do a deep copy.

When the argument is true, a deep copy is used, cloning
the node and its entire subtree; when false, only the initial node is cloned.

The cloned node that
is returned is owned by the document but has no parent node assigned.

The cloned node is
an orphan and doesn't exist in the document until added via appendChild(), insertBefore(), or
replaceChild().

For example, consider the following HTML:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

If a reference to this <ul> element is stored in a variable named myList, 
the following code shows the two modes of the cloneNode() method:

Deep clone:

let deepList = myList.cloneNode(true);
console.log(deepList.childNodes.length);     

Shallow clone:

let shallowList = myList.cloneNode(false);
console.log(shallowList.childNodes.length);  

In this example, deepList is filled with a deep copy of myList.

This means deepList has three list
items, each of which contains text.

The variable shallowList contains a shallow copy of myList, so
it has no child nodes.

The cloneNode() method doesn't copy JavaScript properties that you
add to DOM nodes, such as event handlers.

This method copies only attributes and, optionally, child nodes.

Everything else is lost.

DOM Node normalize

The method normalize() deals with text nodes in a document subtree.

After DOM node manipulations, we can have text nodes 
that contain no text or text nodes that are siblings.

When normalize() is called on a
node, that node's descendants are searched for both of these circumstances.

If an empty text node is
found, it is removed; if text nodes are immediate siblings, they are joined into a single text node.

DOM Node Compare

We can use Node isSameNode() and isEqualNode() to help compare nodes.

Both methods accept a single node as an argument and return true if that node is the same as or
equal to the reference node.

Two nodes are the same when they reference the same object.

Two nodes are equal when they are of the same type and have properties that are equal 
(nodeName, nodeValue, and so on), and their attributes and 
childNodes properties are equivalent.

Here is an example:

let div1 = document.createElement("div");
div1.setAttribute("class", "box");

let div2 = document.createElement("div");
div2.setAttribute("class", "box");

console.log(div1.isSameNode(div1));   // true
console.log(div1.isEqualNode(div2));  // true
console.log(div1.isSameNode(div2));   // false

Here, two <div> elements are created with the same attributes.

The two elements are equivalent to one another but are not the same.

DOM Node NodeIterator

The NodeIterator type can be created using the document.createNodeIterator() method. 

This method accepts the following four arguments:


Parameter
   Description

root
   The node in the tree that you want to start searching from.
whatToShow
   A numerical code indicating which nodes should be visited.
filter
   A NodeFilter object or a function indicating whether a particular node should be accepted or rejected.
entityReferenceExpansion
     A Boolean value indicating whether entity references should be expanded.    
   This has no effect in HTML pages because entity references are never expanded.

The whatToShow argument is a bit mask that determines which nodes to visit by applying one or more
filters.

Possible values for this argument are included as constants on the NodeFilter type as follows:


Value
   Meaning

NodeFilter.SHOW_ALL
   Show all node types.
NodeFilter.SHOW_ELEMENT
   Show element nodes.
NodeFilter.SHOW_ATTRIBUTE
   Show attribute nodes.                                    
   This can't actually be used because of the DOM structure.
NodeFilter.SHOW_TEXT
   Show text nodes.
NodeFilter.SHOW_CDATA_SECTION
   Show CData section nodes.      
   This is not used in HTML pages.
NodeFilter.SHOW_ENTITY_REFERENCE
   Show entity reference nodes.   
   This is not used in HTML pages.
NodeFilter.SHOW_ENTITY
   Show entity nodes.             
   This is not used in HTML pages.
NodeFilter.SHOW_PROCESSING_INSTRUCTION
   Show PI nodes.                 
   This is not used in HTML pages.
NodeFilter.SHOW_COMMENT
   Show comment nodes.
NodeFilter.SHOW_DOCUMENT
   Show document nodes.
NodeFilter.SHOW_DOCUMENT_TYPE
   Show document type nodes.
NodeFilter.SHOW_DOCUMENT_FRAGMENT
   Show document fragment nodes.  
   This is not used in HTML pages.
NodeFilter.SHOW_NOTATION
   Show notation nodes.           
   This is not used in HTML pages.

With the exception of NodeFilter.SHOW_ALL, you can combine multiple options using the bitwise OR operator, as shown in the following example:

let whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;

The filter argument of createNodeIterator() can be used to specify a custom NodeFilter
object or a function that acts as a node filter.

A NodeFilter object has only one method, acceptNode(), which returns NodeFilter.FILTER_ACCEPT if the given node should be visited or 
NodeFilter.FILTER_SKIP if the given node should not be visited.

Because NodeFilter is an abstract type, it's not possible to create an instance of it.

Instead, just create an object with an acceptNode() method and pass the object into createNodeIterator().

The following code accepts only <p> elements:

let filter = {
  acceptNode(node) {
    return node.tagName.toLowerCase() == "p" ?
         NodeFilter.FILTER_ACCEPT :
         NodeFilter.FILTER_SKIP;
  }
 };

let iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT,
                                           filter, false);

The third argument can also be a function that takes the form of the acceptNode() method, as
shown in this example:

let filter = function(node) {
    return node.tagName.toLowerCase() == "p" ?
         NodeFilter.FILTER_ACCEPT :
         NodeFilter.FILTER_SKIP;
};

let iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT,
                                           filter, false);

If no filter is required, the third argument should be set to null.

To create a simple NodeIterator that visits all node types, use the following code:

let iterator = document.createNodeIterator(document, NodeFilter.SHOW_ALL,
                                           null, false);

The two primary methods of NodeIterator are nextNode() and previousNode().

The nextNode()
method moves one step forward in the depth-first traversal of the DOM subtree, and previousNode() moves one step backward in the traversal.

When the NodeIterator is first created, an internal pointer points to the root, so the first call to nextNode() returns the root.

When the traversal has reached the last node in the DOM subtree, nextNode() returns null.

The previousNode() method works in a similar way.

When the traversal has reached the last node in the DOM subtree, after 
previousNode() has returned the root of the traversal, it will return null.

Consider the following HTML fragment:

<div id="div1">
  <p><b>Hello</b> world!</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>

Suppose that you would like to traverse all elements inside of the <div> element.

This can be accomplished using the following code:

let div = document.getElementById("div1");
let iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT,
                                           null, false);
let node = iterator.nextNode();
while (node !== null) {
  console.log(node.tagName);     // output the tag name
  node = iterator.nextNode();
}

The first call to nextNode() in this example returns the <p> element.

Because nextNode() returns
null when it has reached the end of the DOM subtree, a while loop checks to see when null has been returned as it calls nextNode() each time through.

When this code is executed, logs are displayed with the following tag names:

This can be accomplished by using a filter, as shown in the following example:

let div = document.getElementById("div1");
let filter = function(node) {
 return node.tagName.toLowerCase() == "li" ?
   NodeFilter.FILTER_ACCEPT :
   NodeFilter.FILTER_SKIP;
};

let iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT,
      filter, false);

let node = iterator.nextNode();
while (node !== null) {
    console.log(node.tagName);     // output the tag name
    node = iterator.nextNode();
}

In this example, only <li> elements will be returned from the iterator.

The nextNode() and previousNode() methods work with NodeIterator's internal pointer in the
DOM structure, so changes to the structure are represented appropriately in the traversal.

DOM Node Tree Visitor

DOM traversals are a depth-first traversal of the DOM structure that allows
movement in at least two directions depending on the type being used.

NodeIterator and TreeWalker perform depth-first traversals of a
DOM structure given a certain starting point.

A traversal is rooted at a given node, and it cannot go any further up the DOM tree than the starting root.

Consider the following HTML page:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <p><b>Hello</b> world!</p>
  </body>
</html>

Any node can be the root of the traversals.

Suppose, for example, that the <body> element is the traversal root.

The traversal can then visit the <p> element, the <b> element, and the two text nodes that
are descendants of <body>.

The traversal can never reach the <html> element, the <head>
element, or any other node that isn't in the <body> element's subtree.

A traversal that has its root at
document can access all of the nodes in document.

Starting at document and moving sequentially, the first node visited is document and the last node
visited is the text node containing  " world!" from the very last text node at the end of the document.

The traversal can be reversed to go back up the tree.

In that case, the first node visited is the text
node containing  " world!" and the last one visited is the document node itself.

Both NodeIterator and TreeWalker perform traversals in this manner.

DOM Node TreeWalker

TreeWalker has the same functionality as  NodeIterator, including
nextNode() and previousNode(), and adds the following methods to traverse a DOM structure in different directions:


Method
   Description

parentNode()
   Travels to the current node's parent.
firstChild()
   Travels to the first child of the current node.
lastChild()
   Travels to the last child of the current node.
nextSibling()
   Travels to the next sibling of the current node.
previousSibling()
   Travels to the previous sibling of the current node.


the root to traverse from,
which node types to show,
a filter, and
a Boolean value indicating if entity references should be expanded.

Because
of these similarities, TreeWalker can always be used in place of NodeIterator, as in this example:

let div = document.getElementById("div1");
let filter = function(node) {
  return node.tagName.toLowerCase() == "li" ?
    NodeFilter.FILTER_ACCEPT :
    NodeFilter.FILTER_SKIP;
};

let walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT,
                                       filter, false);

let node = iterator.nextNode();
while (node !== null) {
  console.log(node.tagName);     // output the tag name
  node = iterator.nextNode();
}

In addition to NodeFilter.FILTER_ACCEPT and NodeFilter.FILTER_SKIP, there is NodeFilter.FILTER_REJECT.

When used with a NodeIterator object, NodeFilter.FILTER_SKIP and NodeFilter.FILTER_REJECT do the same thing: they skip over the node.

When used with a TreeWalker object, NodeFilter.FILTER_SKIP skips over the node and goes on to the next node in the subtree, whereas NodeFilter.FILTER_REJECT skips over that node and that node's entire subtree.

TreeWalker can move around the DOM structure.

Consider the following HTML fragment:

<div id="div1">
  <p><b>Hello</b> world!</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>

Instead of specifying filter, it's possible to get at the <li> elements by navigating through the DOM tree using TreeWalker, as shown here:

let div = document.getElementById("div1");
let walker = document.createTreeWalker(div, 
                       NodeFilter.SHOW_ELEMENT, null, false);

walker.firstChild();   // go to <p>
walker.nextSibling();  // go to <ul>

let node = walker.firstChild();  // go to first <li>
while (node !== null) {
  console.log(node.tagName);
  node = walker.nextSibling();
}

TreeWalker from above code is
returning only elements because of the second argument passed in to createTreeWalker().

The TreeWalker type also has a property called currentNode that indicates the node that was last
returned from the traversal via any of the traversal methods.

This property can also be set to change
where the traversal continues from when it resumes, as shown in this example:

let node = walker.nextNode();
console.log(node === walker.currentNode);  // true
walker.currentNode = document.body;        // change where to start from

Compared to NodeIterator, the TreeWalker type allows greater flexibility when traversing the DOM.

DOM Node Get and Set User Data

The setUserData() method assigns data to a node and accepts three arguments: 

the key to set,
the actual data, and
a handler function.

You can assign data to a node using the following code:

document.body.setUserData("name", "CSS", function() {});

You can then retrieve the information using getUserData() and passing in the same key, as
shown here:

let value = document.body.getUserData("name");

The handler function for setUserData() is called whenever the node with the data is cloned,
removed, renamed, or imported into another document.

It gives you the opportunity to determine
what should happen to the user data in each of those cases.

The handler function accepts five arguments: 

a number indicating the type of operation (1 for clone, 2 for import, 3 for delete, or 4 for rename),
the data key,
the data value,
the source node, and
the destination node.

The source node is null when the node is being deleted, and the destination node is null unless the node is being
cloned.

You can then determine how to store the data.

Here is an example:

let div = document.createElement("div");
div.setUserData("name", "CSS", function(operation, key, value, src, dest) {
  if (operation == 1) {
    dest.setUserData(key, value, function() {});  }
});

let newDiv = div.cloneNode(true);
console.log(newDiv.getUserData("name"));  // "CSS"

Here, a <div> element is created and has some data assigned to it, including some user data.

When the element is cloned via cloneNode(), the handler function is called and the data is automatically
assigned to the clone.

When getUserData() is called on the clone, it returns the same value that
was assigned to the original.

DOM Using NodeList

NodeList object, NamedNodeMap and 
HTMLCollection are three important collections in DOM.

Each of these collections is considered "live".

They are updated when the document structure changes so they are always
showing the most accurate information.

In reality, all NodeList objects are queries that are run against the DOM document.

Any time you want to iterate over a NodeList, 
we should initialize a second variable with the length
and then compare the iterator to that variable, as shown in the following example:

let divs = document.getElementsByTagName("div");

for (let i = 0, len = divs.length; i < len; ++i) {
    let div = document.createElement("div");
    document.body.appendChild(div);
}

In this example, a second variable, len, is initialized.

Because len contains a snapshot of divs.length at the time the loop began, 
it prevents the infinite loop.

Generally speaking, we should limit the number of times you interact with a NodeList.

Because a query
is run against the document each time, try to cache frequently used values retrieved from a NodeList.

DOM Node namespace properties and methods

The Node type includes the following namespace-specific properties:


Property
 Meaning

localName
   The node name without the namespace prefix.
namespaceURI
The namespace URI of the node or null if not specified.
prefix
  The namespace prefix or null if not specified.

When a node uses a namespace prefix, the nodeName is equivalent to prefix + ":" + localName.

Consider the following example:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Example XHTML page</title>
 </head>
 <body>
   <s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.1"
      viewBox="0 0 100 100" style="width:100%; height:100%">
     <s:rect x="0" y="0" width="100" height="100" style="fill:red" />
   </s:svg>
 </body>
</html>

For the <html> element, the localName and tagName is  "html", 
the namespaceURI is  "http://www.w3.org/1999/xhtml", and the prefix is null. 

For the <s:svg> element, the localName is  "svg", the tagName is  "s:svg", 
the namespaceURI is  "http://www.w3.org/2000/svg", and the prefix is  "s".

DOM Level 3 introduces the following methods to work with namespaces:


Method
   Meaning

isDefaultNamespace(namespaceURI)
   Returns true when the specified namespaceURI is the default namespace for the node.
lookupNamespaceURI(prefix )
   Returns the namespace URI for the given prefix.
lookupPrefix(namespaceURI)
   Returns the prefix for the given namespaceURI.

In the previous example, the following code can be executed:

console.log(document
             .body
             .isDefaultNamespace("http://www.w3.org/1999/xhtml"));// true

// assume svg contains a reference to <s:svg>
console.log(svg.lookupPrefix("http://www.w3.org/2000/svg"));  // "s"
console.log(svg.lookupNamespaceURI("s"));  // "http://www.w3.org/2000/svg"

These methods are useful when you have a reference to a node without knowing its 
relationship to the rest of the document.

DOM Working with the Document Object

You access the Document object through the global document variable;
this is one of the key objects that the browser creates for us.

The Document object provides you with information about the document
as a whole and gives you access to the individual objects in the model.

The following example demonstrates some basic DOM features.

<p id="myId">
    test<span id="mySpan">mySpan</span>test
</p>
<p id="LEGO">
    This is a test.
</p>
<script>
    document.writeln("<pre>URL: " + document.URL);
    let elems = document.getElementsByTagName("p");
    for (let i = 0; i < elems.length; i++) {
        document.writeln("Element ID: " + elems[i].id);
        elems[i].style.border = "medium double black";
        elems[i].style.padding = "4px";
    }
    document.write("</pre>");
</script>


Open in separate window
View full source code

<html>
    <body>
        <p id="myId">
            test<span id="mySpan">mySpan</span>test
        </p>
        <p id="LEGO">
            This is a test.
        </p>
        <script>
            document.writeln("<pre>URL: " + document.URL);
            let elems = document.getElementsByTagName("p");
            for (let i = 0; i < elems.length; i++) {
                document.writeln("Element ID: " + elems[i].id);
                elems[i].style.border = "medium double black";
                elems[i].style.padding = "4px";
            }<!--  w  w   w.    d  e m   o  2  s  .  c o   m-->
            document.write("</pre>");
        </script>
    </body>
</html>


The Document object captures information about the HTML document
that we are working with.

The first line in the script does just that:

document.writeln("<pre>URL: " + document.URL);

In this case, we have read the value of the document.URL property,
which returns the URL of the current document.

This is the URL that the browser used to load the document in which the script is running.

The statement also calls the writeln method:

document.writeln("<pre>URL: " + document.URL);

This method appends content to the end of the HTML document.

In this case, we have written the
opening tag of a pre element and the value of the URL property.

This is a very simple example of
modifying the DOM, meaning that I have changed the structure of the document.

Next, we select some elements from the document:

let elems = document.getElementsByTagName("p");

There is a range of methods for selecting elements.

The getElementsByTagName selects all of the elements of a
given type, in this case, <p> elements.

Any <p> elements that are contained in the document are returned
from the method and placed in the variable called elems.

All elements are represented by the HTMLElement object, which provides the basic functionality
to represent HTML elements.

The result from the getElementsByTagName method is a collection
of HTMLElement objects.

Now that we have a collection of HTMLElement objects to work with, we use a
for loop to enumerate the contents of the collection and process each <p> element that the browser has
found in the HTML document:

for (let i = 0; i < elems.length; i++) {
    document.writeln("Element ID: " + elems[i].id);
    elems[i].style.border = "medium double black";
    elems[i].style.padding = "4px";
}

For each HTMLElement in the collection, we read the id property to get
the value of the  id attribute and use the document.writeln method to append the result to the contents of the pre element
 that we started earlier:

for (let i = 0; i < elems.length; i++) {
    document.writeln("Element ID: " + elems[i].id);
    elems[i].style.border = "medium double black";
    elems[i].style.padding = "4px";
}

The id property is one of a number of properties defined by HTMLElement.

You can use these properties to obtain information about an element or to
modify it.

In this case, we have used the style
property to change the value of the CSS border and padding properties:

for (let i = 0; i < elems.length; i++) {
    document.writeln("Element ID: " + elems[i].id);
    elems[i].style.border = "medium double black";
    elems[i].style.padding = "4px";
}

These changes create an inline style for each of the elements that you found using the
getElementsByTagName earlier.

When you change an object, the
browser applies the change to the corresponding element immediately, in this case, by adding padding
 and a border to the <p> elements.

The last line of the script writes the end tag for the <pre> element that we opened back at the start of the
script.

We use the write method to do this, which is just like writeln but doesn't append end-of-line
 characters to the string that is added to the document.

The use of the <pre> element means that the end-of-line characters added by the writeln method will
be used to structure the content.

DOM Document Quick Reference

The Document Members
The following table summarizes the members from Document object.


Name
   Description
   Returns

activeElement
   Returns an object representing the currently
   focused element in the document.            
   HTMLElement
    
body
   Returns an object representing the body
   element in the document.               
              
   HTMLElement
characterSet
   Returns the document character set     
   encoding. This is a read-only property.
   string
charset
   Gets or sets the document character set
   encoding.                              
   string
childNodes
   Returns the set of child elements.
   HTMLElement[]
compatMode
   Gets compatibility mode for the document.
   string
cookie
   Gets or sets the cookies for the current
     document.                             
   string
defaultCharset
     Gets the default character encoding used by
   the browser.                                 
   string
defaultView
    Returns the Window object for the current
   document.                                 
   Window
dir
    Gets or sets the text direction for the
   document.                               
   string
      
domain
   Gets or sets the domain for the current
   document.                              
         
   string
embeds
   Returns objects representing all the embed
   elements in the document.                 
   HTMLCollection
firstChild
   Returns the first child element of an element.
   HTMLElement
forms
   Returns objects representing all the form
   elements in the document.                
   HTMLCollection
                    
getElementById(<id>)
   Returns the element with the specified id
   value.                                   
              
   HTMLElement
getElementsByClassName(<class>)
     Returns the elements with the specified class
   value.                                         
   HTMLElement[]
                         
getElementsByName(<name>)
   Returns the elements with the specified name
   value.                                      
                
   HTMLElement[]
getElementsByTagName(<tag>)
   Returns the elements of the specified type.
   HTMLElement[]
hasChildNodes()
   Returns true if the current element has child
   elements.                                    
   boolean
head
   Returns an object representing the head
   element.                               
   HTMLHeadElement
images
   Returns objects representing all the img
       elements.                           
   HTMLCollection
implementation
   Provides information about the DOM features
    that are available.                       
   DOMImplementation
lastChild
   Returns the last child element.
   HTMLElement
lastModified
    Returns the last modified time of the
   document.                             
   string
links
   Returns objects representing all the a and   
    area elements in the document that have href
      attributes.                               
   HTMLCollection
location
   Provides information about the URL of the
   current document.                        
   Location
nextSibling
   Returns the sibling element defined after the
   current element.                             
   HTMLElement
parentNode
   Returns the parent element.
   HTMLElement
               
previousSibling
   Returns the sibling element defined before
   the current element.                      
              
   HTMLElement
                         
querySelector(<selector>)
   Returns the first element that matches the

   specified CSS selector.                   
              
   HTMLElement
querySelectorAll(<selector>)
    Returns all of the elements that match the
   specified CSS selector.                    
   HTMLElement[]
readyState
   Returns the state of the current document.
   string
referrer
    Returns the URL of the document that linked 
   to the current document (this is the value of
    the corresponding HTTP header).             
   string
scripts
   Returns objects representing all the script
     elements.                                
   HTMLCollection
title
   Gets or sets the title of the current document.
   string


DOM Working with Document Metadata

Document object provides you with information  about the document.

The following table describes the properties you can use to get document metadata.


Property
   Description
   Returns

characterSet
    Returns the document character set encoding. This is a
   read-only property.                                    
   string
charset
   Gets or sets the document character set encoding.
   string
compatMode
   Gets the compatibility mode for the document.
   string
cookie
   Gets or sets the cookies for the current document.
   string
defaultCharset
   Gets the default character encoding used by the browser.
   string
defaultView
   Returns the Window object for the current document
   Window
dir
   Gets or sets the text direction for the document.
   string
domain
   Gets or sets the domain for the current document.
   string
implementation
   Provides information about the DOM features that are
   available.                                          
   DOMImplementation
lastModified
     Returns the last modified time of the document (or the
   current time if no modification time is available).     
   string
location
   Provides information about the URL of the current
   document.                                        
   Location
readyState
   Returns the state of the current document. This is a read-
   only property.                                            
   string
referrer
   Returns the URL of the document that linked to the current
   document (this is the value of the corresponding HTTP     
   header).                                                  
   string
title
   Gets or sets  the title of the current document (the contents
   of the title element, described in Chapter 7).               
   string

Getting Information from the Document
You can get some useful information about the document using the metadata properties.

Using the Document Object to Obtain Metadata.

document.writeln("characterSet: " + document.characterSet);
document.writeln("charset: " + document.charset);
document.writeln("compatMode: " + document.compatMode);
document.writeln("defaultCharset: " + document.defaultCharset);
document.writeln("dir: " + document.dir);
document.writeln("domain: " + document.domain);
document.writeln("lastModified: " + document.lastModified);
document.writeln("referrer: " + document.referrer);
document.writeln("title: " + document.title);


Open in separate window
View full source code

<html>
    <body>
        <script>
            document.writeln("<pre>");

            document.writeln("characterSet: " + document.characterSet);
            document.writeln("charset: " + document.charset);
            document.writeln("compatMode: " + document.compatMode);
            document.writeln("defaultCharset: " + document.defaultCharset);
            document.writeln("dir: " + document.dir);
            document.writeln("domain: " + document.domain);
            document.writeln("lastModified: " + document.lastModified);
            document.writeln("referrer: " + document.referrer);
            document.writeln("title: " + document.title);

            document.write("</pre>");
        </script>
    </body>
</html>


These properties provide you with some useful insights into the document that you are working
with.

You can see the values for these properties.

Using the Location Object to Navigate Elsewhere

You can also use the  Location object available through the document.location property to navigate
else where.

There are a couple of different ways of doing this.

First, you can assign a new value to one of the properties.

Navigating to a Document by Assigning a New Value to a Location Property.

document.location.href = "https://demo2s.com";


Open in separate window
View full source code

<html>
    <body>
        <p>
            This is a test.
        </p>
        <button id="pressme">Press Me</button>
        <p>
            This is a test.  Test Test Test Test.

        </p>
        <script>
            document.getElementById("pressme").onclick = function() {
                document.location.href = "https://demo2s.com";
            }
        </script>

    </body>
</html>


This example contains a button element that, when clicked, causes a new value to be assigned to the
document.location.href property.

The association between the button and the JavaScript function that
will be executed when it is clicked is made using an event.

You can also use the  methods that the  Location object defines.

The difference between the assign() and replace() methods is that replace removes the
current document from the browser's history, meaning that when the user clicks the back button, for example,
the browser will skip over the current document, as though it had never been visited.

The following code shows the use of the assign method.

Navigating Using the assign Method of the Location Object.

document.location.assign("https://demo2s.com");


Open in separate window
View full source code

<html>
    <body>
        <button id="pressme">Press Me</button>
        <script>
            document.getElementById("pressme").onclick = function() {
                document.location.assign("https://demo2s.com");
            }
        </script>
    </body>
</html>


When the user clicks the  button element, the browser will navigate to the specified URL, which in
this case is https://demo2s.com.

Document Object Reading and Writing Cookies

The cookie property allows you to read, add to, and update the cookies associated with the document.

Reading and Creating Cookies.

function readCookies() {
    document.getElementById("cookiedata").innerHTML = document.cookie;
}

function createCookie() {
    cookieCount++;
    document.cookie = "Cookie_" + cookieCount + "=Value_" + cookieCount;
    readCookies();
}

function updateCookie() {
    document.cookie = "Cookie_" + cookieCount + "=Updated_" + cookieCount;
    readCookies();
}


Open in separate window
View full source code

<html>
    <body>
        <p id="cookiedata">

        </p>
        <button id="write">Add Cookie</button>
        <button id="update">Update Cookie</button>
        <script>

            let cookieCount = 0;<!--   ww   w   .d  e  m    o2   s  . c   o  m -->
            document.getElementById("update").onclick = updateCookie;
            document.getElementById("write").onclick = createCookie;
            readCookies();

            function readCookies() {
                document.getElementById("cookiedata").innerHTML =
                         document.cookie;
            }

            function createCookie() {
                cookieCount++;
                document.cookie =
                       "Cookie_" + cookieCount + "=Value_" + cookieCount;
                readCookies();
            }

            function updateCookie() {
                document.cookie =
                       "Cookie_" + cookieCount + "=Updated_" + cookieCount;
                readCookies();
            }
        </script>
    </body>
</html>


The cookie property works in a slightly odd way.

When you read the value of the property, you get
back all of the cookies that are associated with the document.Cookies are name/value pairs in the form
name=value.

If multiple cookies are available, all are returned as the result of the cookie property,
separated by a semicolon, for example: name1=value1;name2=value2.

By contrast, when you want to create a new cookie, you assign a new name/value pair as the value of
the cookie property, and it is added to the set of cookies for the document.

You can set only one cookie at a time.

If you set a value whose name portion corresponds to an existing cookie, then the value
portion is used to update the cookie.

To demonstrate this, the code above contains a script that reads, creates, and updates cookies.

The readCookies() function reads the value of the document.cookie property and sets the result as the content
of a paragraph (p) element.

There are two button elements in the document.

When the Add Cookie button is clicked, the
createCookie() function assigns a new value to the cookie property, which will be added to the cookie
collection.

The Update Cookie button causes the updateCookie() function to be invoked.

This function
provides a new value for an existing cookie.

Although the  name=value form is the default for adding cookies, you can apply some additional data that
changes the way the cookie is handled.

These additions are described in the following table.

The Additional Fields That Can Be Added to a Cookie.


Addition
   Description

path=<path>
   Sets the path associated with the cookie; this default to the path of the current document if not specified.
domain=<domain>
   Sets the domain associated with the cookie; this defaults to the domain of the current document if not specified.
max-age=<seconds>
   Sets the life of the cookie in terms of the number of seconds from the moment it was created.
expires=<date>
   Sets the life of the cookie using a GMT-format date.
secure
   The cookie will be sent only over a secure (HTTPS) connection.

Each of these additional items is prepended to the name/value pair and separated with a semicolon,
like this:

document.cookie = "MyCookie=MyValue;max-age=10";

Document Object Getting DOM Implementation Details

The document.implementation property provides you with information about the browser
implementation of the DOM features.

This property returns a DOMImplementation object, which has one
method that you are interested in: the hasFeature method.

You can use this method to determine which
DOM features are implemented.

Using the document.implementation.hasFeature() Method.

let features = ["Core", "HTML", "CSS", "Selectors-API"];
let levels = ["1.0", "2.0", "3.0"];

document.writeln("<pre>");
for (let i = 0; i < features.length; i++) {
    document.writeln("Checking for feature: " + features[i]);
    for (let j = 0; j < levels.length; j++) {
        document.write(features[i] + " Level " + levels[j] + ": ");
        document.writeln(document.implementation.hasFeature(features[i],
            levels[j]));
    }
}
document.write("</pre>")


Open in separate window
View full source code

<html>
    <body>
        <script>

            let features = ["Core", "HTML", "CSS", "Selectors-API"];
            let levels = ["1.0", "2.0", "3.0"];

            document.writeln("<pre>");
            for (let i = 0; i < features.length; i++) {
                document.writeln("Checking for feature: " + features[i]);
                for (let j = 0; j < levels.length; j++) {
                    document.write(features[i] + " Level " + levels[j] + ": ");
                    document.writeln(
                      document.implementation.hasFeature(features[i],
                        levels[j]));<!--  w w   w .    de   m o   2  s .    c o  m -->
                }
            }
            document.write("</pre>")
        </script>
    </body>
</html>


This script checks some of the different DOM features and the defined feature levels.

This isn't as useful as it might appear.

First, browsers don't always report the features they implement correctly.

Some implement features but don't report them through the hasFeature() method, and others claim to
implement features but don't.

Second, a browser reporting that a feature doesn't mean that it is
implemented in a useful way.

Obtaining HTML Element Objects as HTMLCollection

We can use the following Element Properties of the Document Object to get elements from
document.


Property
   Description
   Returns

activeElement
   Returns an object representing the currently focused
   element                                             
   HTMLElement
body
   Returns an object representing the body element
   HTMLElement
embeds 
plugins
   Returns objects representing all the embed elements
   HTMLCollection
forms
   Returns objects representing all the form elements
   HTMLCollection
head
   Returns an object representing the head element
   HTMLHeadElement
images
   Returns objects representing all the img elements
   HTMLCollection
links
   Returns objects representing all the a and area elements in
      the document that have href attributes                  
   HTMLCollection
scripts
   Returns objects representing all the script elements
   HTMLCollection

Most of the properties described in table return an HTMLCollection object.

This is the way that the DOM represents a collection of objects that represent elements.

The following code demonstrates the two
ways in which you can access the objects contained in the HTMLCollection Object.

let resultsElement = document.getElementById("results");

let elems = document.images;

for (let i = 0; i < elems.length; i++) {
    resultsElement.innerHTML += "Image Element: " + elems[i].id + "\n";
}

let srcValue = elems.namedItem("myId3").src;
resultsElement.innerHTML += "Src for myId3 element is: " + srcValue + "\n";


Open in separate window
View full source code

<html>
    <head>
        <style>
            pre {border: medium double black;}
        </style>
    </head>
    <body>
        <pre id="results"></pre>
        <img id="js" src="javascript.png" alt="javascript"/>
        <p>
            This is a test.
        </p>
        <img id="myId3" src="html.png" alt="myId3"/>
        <p>
            This is a test.  Test Test Test Test.

        </p>
        <img id="myImage" src="css.png" alt="css"/>
        <script>
            let resultsElement = document.getElementById("results");

            let elems = document.images;

            for (let i = 0; i < elems.length; i++) {
                resultsElement.innerHTML +=
                           "Image Element: " + elems[i].id + "\n";
            }<!-- w   w   w .   d  em    o  2s  .    co  m  -->

            let srcValue = elems.namedItem("myId3").src;
            resultsElement.innerHTML +=
                        "Src for myId3 element is: " + srcValue + "\n";
        </script>
    </body>
</html>


The first way of working with an HTMLCollection is to treat it like an array.

The length property
returns the number of items in the collection, and the standard JavaScript array indexer is supported
(the element[i] notation) to provide direct access to individual objects in the collection.

This is the first approach we use in the example, having used the document.images
property to get an HTMLCollection containing object representing all of the <img> elements in the document.

Notice that we used the innerHTML property to set the contents of the <pre> element.

The second approach is to use the namedItem() method, which returns the item in the collection that
has the specified id or name attribute value (if there is one).

This is the second approach we use in the
example, where we use the namedItem() method to retrieve the object representing the  <img> element with the
id attribute value.

Notice that we read the value of the src property on one of the objects.

This is a property that is implemented
by HTMLImageElement objects, which are used to represent <img> elements.

The other property we use, id, is part of HTMLElement and so
is available for all types of element.

Using Array Notation to Obtain a Named Element
You can also use array-style notation to obtain an object representing a named element.

This is an element that has an id or name attribute value.

Obtaining Named Element Objects.

let resultsElement = document.getElementById("results");
let elems = document["html"];

if (elems.namedItem) {
    for (let i = 0; i < elems.length; i++) {
        resultsElement.innerHTML += "Image Element: " + elems[i].id + "\n";
    }
} else {
    resultsElement.innerHTML += "Src for element is: " + elems.src + "\n";
}


Open in separate window
View full source code

<html>
    <head>
        <style>
            pre {border: medium double black;}
        </style>
    </head>
    <body>
        <pre id="results"></pre>
        <img id="js" name="image" src="javascript.png" alt="js"/>
        <p>
            This is a test.
        </p>
        <img id="html" name="image" src="html.png" alt="html"/>
        <p>
            This is a test.  Test Test Test Test.

        </p>
        <img id="myImage" src="css.png" alt="css"/>
        <script>
            let resultsElement = document.getElementById("results");
            let elems = document["html"];

            if (elems.namedItem) {<!--  w   w w .  d  e    m  o 2  s .   c  o m  -->
                for (let i = 0; i < elems.length; i++) {
                    resultsElement.innerHTML +=
                       "Image Element: " + elems[i].id + "\n";
                }
            } else {
                resultsElement.innerHTML +=
                    "Src for element is: " + elems.src + "\n";
            }
        </script>
    </body>
</html>


You can see how we have used the array-style indexer to obtain an object representing the element
with an  id value.

An oddity of obtaining elements this way is that you can get different kinds of
results, depending on the contents of the document and the order of the elements.

The browser looks at all of the elements in the document in a depth-first order, trying to match
either the id or name attribute to the specified value.

If the first match is an  id attribute, then the browser
stops searching (because id values must be unique in documents) and returns an HTMLElement
representing the matched element.

If the first match is against a name attribute value, then you will receive either an HTMLElement (if
there is only one matching element) or an HTMLCollection (if there is more than one).

The browser won't match id values once it has started to match name values.

You can see how we use the  namedItem property as a test to see which kind of result we have received.

In the example we receive an HTMLElement because the value we specified matches an id value.

You can also refer to named elements as properties.

So, for example, document['yourId'] and document.yourId have the same meaning.

We tend to prefer the dot-notation format because it makes it clearer that
we are trying to obtain element objects, but it is a matter of personal preference.

DOM Document Object Searching for Elements

The Document object defines a number of methods that you can use to search for elements in the
document.

These methods are described in the following table.


Property
   Description
   Returns

getElementById(<id>)
   Returns the element with the specified id
   value                                    
   HTMLElement
getElementsByClassName(<class>)
   Returns the elements with the specified class
   value                                        
   HTMLElement[]
getElementsByName(<name>)
   Returns the elements with the specified name
   value                                       
   HTMLElement[]
getElementsByTagName(<tag>)
   Returns the elements of the specified type
   HTMLElement[]
querySelector(<selector>)
   Returns the first element that matches the
   specified CSS selector                    
   HTMLElement
querySelectorAll(<selector>)
   Returns all of the elements that match the
   specified CSS selector                    
   HTMLElement[]

As you might expect, some of these methods return multiple elements.

In fact, these methods
return a NodeList, which is part of the underlying DOM specification that deals with generic structured
document formats and not just HTML.

However, for these purposes, you can treat them like arrays and
keep the focus on HTML5.

The search methods can be broken into two categories.

The following code demonstrates the first
of these categories-those methods whose name begins with getElement.

let resultsElement = document.getElementById("results");

let pElems = document.getElementsByTagName("p");
resultsElement.innerHTML += "There are " + pElems.length + " p elements\n";

let myClassElems = document.getElementsByClassName("myClass");
resultsElement.innerHTML += "There are " + myClassElems.length
    + " elements in the myClass class\n";

let nameElems = document.getElementsByName("myId");
resultsElement.innerHTML += "There are " + nameElems.length
    + " elements with the name 'myId'";


Open in separate window
View full source code

<html>
    <head>
        <style>
            pre {border: medium double black;}
        </style>
    </head>
    <body>
        <pre id="results"></pre>

        <img id="js" class="myClass" name="myId" src="javascript.png" alt="js"/>
        <p>
            This is a test.
        </p>
        <img id="myId" class="myClass images"
             name="myId"  src="html.png" alt="myId"/>
        <p>
            This is a test.  Test Test Test Test.

        </p>
        <img id="myImage" src="css.png" alt="css"/>
        <script>
            let resultsElement = document.getElementById("results");

            let pElems = document.getElementsByTagName("p");
            resultsElement.innerHTML +=<!--  w w    w .   de   m   o 2  s   . c  o m  -->
                    "There are " + pElems.length + " p elements\n";

            let myClassElems = document.getElementsByClassName("myClass");
            resultsElement.innerHTML += "There are " + myClassElems.length
                + " elements in the myClass class\n";

            let nameElems = document.getElementsByName("myId");
            resultsElement.innerHTML += "There are " + nameElems.length
                + " elements with the name 'myId'";
        </script>
    </body>
</html>


When using the getElementById() method, the browser will return null if no element can be found with the specified
id value.

By contrast, the other methods will always return an array of HTMLElement objects, but the
length property will return 0 to indicate no matches.

Searching with CSS Selectors
A useful alternative is to search using CSS selectors.

Selectors allow you to find a broader range of elements in the document.

Obtaining Element Objects Using CSS Selectors.

let resultsElement = document.getElementById("results");

let elems = document.querySelectorAll("p, img#myId")
resultsElement.innerHTML += "The selector matched " + elems.length
    + " elements\n";


Open in separate window
View full source code

<html>
    <head>
        <style>
            pre {border: medium double black;}
        </style>
    </head>
    <body>
        <pre id="results"></pre>
        <img id="js"
             class="myClass"
             name="myId"
             src="javascript.png" alt="js"/>
        <p>
            This is a test.
        </p>
        <img id="myId"
             class="myClass images" name="myId"  src="html.png" alt="myId"/>
        <p>
            This is a test.  Test Test Test Test.

        </p>
        <img id="myImage" src="css.png" alt="css"/>
        <script>
            let resultsElement = document.getElementById("results");

            let elems = document.querySelectorAll("p, img#myId")
            resultsElement.innerHTML += "The selector matched " + elems.length
                + " elements\n";
        </script>
    </body>
</html><!--  w w    w.  d   e   m o  2   s.    c  o  m-->


In this example, we have used a selector that will match all <p> elements and
the <img> element that has an id value.

Chaining Searches Together
A nice DOM feature is that all but one of the search methods the  Document object implements are also
implemented by HTMLElement objects, allowing you to chain searches together.

The exception is the
getElementById method, which is available only through the Document object.

Chaining Searches Together.

let resultsElement = document.getElementById("results");

let elems = document.getElementById("tblock")
                  .getElementsByTagName("span");
resultsElement.innerHTML +=
   "There are " + elems.length + " span elements\n";

let elems2 = document.getElementById("tblock")
                     .querySelectorAll("span");
resultsElement.innerHTML += "There are " + elems2.length
    + " span elements (Mix)\n";

let selElems = document.querySelectorAll("#tblock > span");
resultsElement.innerHTML += "There are " + selElems.length
    + " span elements (CSS)\n";


Open in separate window
View full source code

<html>
    <head>
        <style>
            pre {border: medium double black;}
        </style>
    </head>
    <body>
        <pre id="results"></pre>
        <p id="tblock">
            test<!--   w w   w.   d  e   m o 2  s   .   c  om  -->
            <span id="mySpan">mySpan</span>

            test<span id="apple">LEGO</span>,
            <span="orange">Star War</span>
        </p>
        <script>
            let resultsElement = document.getElementById("results");

            let elems = document.getElementById("tblock")
                              .getElementsByTagName("span");
            resultsElement.innerHTML +=
               "There are " + elems.length + " span elements\n";

            let elems2 = document.getElementById("tblock")
                                 .querySelectorAll("span");
            resultsElement.innerHTML += "There are " + elems2.length
                + " span elements (Mix)\n";

            let selElems = document.querySelectorAll("#tblock > span");
            resultsElement.innerHTML += "There are " + selElems.length
                + " span elements (CSS)\n";

        </script>
    </body>
</html>


There are two chained searches in this example, both of which we have started with the
getElementById() method which gives me a single object to work with.

In the first example, we chain a
search using the getElementsByTagName method, and in the second we use a very simple CSS selector
through the querySelectorAll method.

Each of these examples returns the collection of span elements
contained in the p element whose id is tblock.

DOM Element Navigating the DOM Tree

We can search for elements to treat the DOM like a tree and navigate its
hierarchical structure.

There are a set of properties and methods that are supported by all DOM objects
that let us do just that; they are described in the following table.

Tree navigation Properties and Methods.


Property
   Description
   Returns

childNodes
   Returns the set of child elements
   HTMLElement[]
firstChild
   Returns the first child element
   HTMLElement
hasChildNodes()
   Returns true if the current element has child elements
   boolean
lastChild
   Returns the last child element
   HTMLElement
nextSibling
   Returns the sibling element defined after the current
   element                                              
   HTMLElement
parentNode
   Returns the parent element
   HTMLElement
previousSibling
   Returns the sibling element defined before the current
   element                                               
   HTMLElement

The following code shows a script that lets you navigate around the document, displaying information
about the currently selected element in a pre element.

Navigating the DOM Tree.

let resultsElem = document.getElementById("results");
let element = document.body;

let buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
    buttons[i].onclick = handleButtonClick;
}

processNewElement(element);/*  w  ww    .d  e   m o    2 s  .   c  o m */

function handleButtonClick(e) {
    if (element.style) {
        element.style.backgroundColor = "white";
    }

    if (e.target.id == "parent" && element != document.body) {
        element = element.parentNode;
    } else if (e.target.id == "child" && element.hasChildNodes()) {
        element = element.firstChild;
    } else if (e.target.id == "prev" && element.previousSibling) {
        element = element.previousSibling;
    } else if (e.target.id == "next" && element.nextSibling) {
        element = element.nextSibling;
    }
    processNewElement(element);
    if (element.style) {
        element.style.backgroundColor = "lightgrey";
    }
}

function processNewElement(elem) {
    resultsElem.innerHTML = "Element type: " + elem + "\n";
    resultsElem.innerHTML += "Element id: " + elem.id + "\n";
    resultsElem.innerHTML += "Has child nodes: "
        + elem.hasChildNodes() + "\n";
    if (elem.previousSibling) {
        resultsElem.innerHTML += ("Prev sibling is: "
             + elem.previousSibling + "\n");
    } else {
        resultsElem.innerHTML += "No prev sibling\n";
    }
    if (elem.nextSibling) {
        resultsElem.innerHTML += "Next sibling is: "
            + elem.nextSibling + "\n";
    } else {
        resultsElem.innerHTML += "No next sibling\n";
    }
}


Open in separate window
View full source code

<html>
    <head>
        <style>
            pre {border: medium double black;}
        </style>
    </head>
    <body>
        <pre id="results"></pre>
        <p id="tblock">
            test<!--  w  w w    .d   e   m  o  2s    .c  o   m -->
            <span id="mySpan">mySpan</span>
            test<span id="apple">LEGO</span>,
            <span="orange">Star War</span>
            test
        </p>
        <img id="apple"
             class="myClass images" name="apple"  src="html.png" alt="apple"/>
        <img id="myImage" src="css.png" alt="css"/>
        <p>
            This is a test.  Test Test Test Test.
        </p>
        <p>
            <button id="parent">Parent</button>
            <button id="child">First Child</button>
            <button id="prev">Prev Sibling</button>
            <button id="next">Next Sibling</button>
        </p>

        <script>
            let resultsElem = document.getElementById("results");
            let element = document.body;

            let buttons = document.getElementsByTagName("button");
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonClick;
            }

            processNewElement(element);

            function handleButtonClick(e) {
                if (element.style) {
                    element.style.backgroundColor = "white";
                }

                if (e.target.id == "parent" && element != document.body) {
                    element = element.parentNode;
                } else if (e.target.id == "child" && element.hasChildNodes()) {
                    element = element.firstChild;
                } else if (e.target.id == "prev" && element.previousSibling) {
                    element = element.previousSibling;
                } else if (e.target.id == "next" && element.nextSibling) {
                    element = element.nextSibling;
                }
                processNewElement(element);
                if (element.style) {
                    element.style.backgroundColor = "lightgrey";
                }
            }

            function processNewElement(elem) {
                resultsElem.innerHTML = "Element type: " + elem + "\n";
                resultsElem.innerHTML += "Element id: " + elem.id + "\n";
                resultsElem.innerHTML += "Has child nodes: "
                    + elem.hasChildNodes() + "\n";
                if (elem.previousSibling) {
                    resultsElem.innerHTML += ("Prev sibling is: "
                         + elem.previousSibling + "\n");
                } else {
                    resultsElem.innerHTML += "No prev sibling\n";
                }
                if (elem.nextSibling) {
                    resultsElem.innerHTML += "Next sibling is: "
                        + elem.nextSibling + "\n";
                } else {
                    resultsElem.innerHTML += "No next sibling\n";
                }
            }
        </script>
    </body>
</html>



Obtaining a Window Object

You can get a Window object in two ways.

The official HTML5 way is to use the defaultView property on the Document object.

Another approach is to use the window global variable, which all of the browsers
support.

The following code demonstrates both techniques.

Obtaining a Window Object.

document.getElementById("owidth").innerHTML = window.outerWidth;
document.getElementById("oheight").innerHTML
    = document.defaultView.outerHeight;


Open in separate window
View full source code

<html>
    <body id="bod">
        <table>
            <tr><th>outerWidth:</th><td id="owidth"></td></tr>
            <tr><th>outerHeight:</th><td id="oheight"></td></tr>
        </table>

        <script type="text/javascript">
            document.getElementById("owidth").innerHTML = window.outerWidth;
            document.getElementById("oheight").innerHTML
                = document.defaultView.outerHeight;
        </script>
    </body>
</html>


In the script we use the Window object to read the value of a pair of properties,
outerWidth and outerHeight.

Getting Information about the Window
The basic functionality of the Window object relates to the window in which the
document is currently displayed.

The following table lists the properties and methods that handle this functionality.

For the purposes of HTML, tabs within a browser window are treated as windows in their
own right.


Name
   Description
   Returns

innerHeight
   Gets the height of the window content area
   number
innerWidth
   Gets the width of the window content area
   number
outerHeight
    Gets the height of the window, including borders, menu bars, and
   so on                                                            
   number
outerWidth
   Gets the width of the window, including borders, menu bars, and
   so on                                                          
   number
pageXOffset
   Gets the number of pixels that the window has been scrolled
    horizontally from the top-left corner                     
   number
pageYOffset
   Gets the number of pixels that the window has been scrolled
   vertically from the top-left corner                        
   number
screen
   Returns a Screen object describing the screen
   Screen
screenLeft
screenX   
   Gets the number of pixels from the left edge of the window to the
   left edge of the screen                                          
   number
screenTop
screenY  
   Gets the number of pixels from the top edge of the window to the
   top edge of the screen                                          
   number

The following code shows how to use these properties to get information about the window.

document.getElementById("ow").innerHTML = window.outerWidth;
document.getElementById("oh").innerHTML = window.outerHeight;
document.getElementById("iw").innerHTML = window.innerHeight;
document.getElementById("ih").innerHTML = window.innerHeight;
document.getElementById("sw").innerHTML = window.screen.width;
document.getElementById("sh").innerHTML = window.screen.height;


Open in separate window
View full source code

<html>
    <head>
        <style>
            table { border-collapse: collapse; border: thin solid black;}
            th, td { padding: 4px; }
        </style>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>outerWidth:</th><td id="ow"></td>
                <th>outerHeight:</th><td id="oh">
            </tr>
            <tr>
                <th>innerWidth:</th><td id="iw"></td>
                <th>innerHeight:</th><td id="ih">
            </tr>
           <tr>
                <th>screen.width:</th><td id="sw"></td>
                <th>screen.height:</th><td id="sh">
            </tr>
        </table>

        <script type="text/javascript">
            document.getElementById("ow").innerHTML = window.outerWidth;
            document.getElementById("oh").innerHTML = window.outerHeight;
            document.getElementById("iw").innerHTML = window.innerHeight;
            document.getElementById("ih").innerHTML = window.innerHeight;
            document.getElementById("sw").innerHTML = window.screen.width;
            document.getElementById("sh").innerHTML = window.screen.height;
        </script>
    </body>
</html><!-- w   w w    .  d  e m  o  2  s  .   c o m  -->


The script in this example displays the value of various Window properties in a table.

Notice that we used the screen property to obtain a Screen object.

This object provides information about the screen
that the window is displayed on and defines the properties shown
in the following table.


Name
   Description
   Returns

availHeight
    The height of the portion of the screen available for displaying windows
   (excludes toolbars, menu bars, and so on)                                
   number
availWidth
   The width of the portion of the screen available for displaying windows
    (excludes toolbars, menu bars, and so on)                             
   number
colorDepth
   The color depth of the screen
   number
height
   The height of the screen
   number
width
   The width of the screen
   number


Interacting with the Window using window Object

The Window object provides a set of methods through which you can interact with the window that
contains your document.

These methods are described in the following table.


Name
   Description
   Returns

blur()
   Un-focuses the window
   void
close()
   Closes the window (not all browsers allow a script to
   close the window)                                    
   void
focus()
   Focuses the window
   void
print()
   Prompts the user to print the page
   void
scrollBy(<x>, <y>)
   Scrolls the document relative to its current position
   void
scrollTo(<x>, <y>)
   Scrolls to the specified position
   void
stop()
   Stops the document from loading
   void

All of these methods should be used with caution because they take the control of the browser
window away from the user.

The following code shows some of the window interaction methods in use.

let buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
    buttons[i].onclick = handleButtonPress;
}

function handleButtonPress(e) {
    if (e.target.id == "print") {
        window.print();/*  w  w w   .d    e m   o  2s   .  c  o m  */
    } else if (e.target.id == "close") {
        window.close();
    } else {
        window.scrollTo(0, 400);
    }
}

<!DOCTYPE HTML>
<html>
    <body>
        <p>
            <button id="scroll">Scroll</button>
            <button id="print">Print</button>
            <button id="close">Close</button>
        </p>
        <p>
            This is a test.
            <img src="html.png" alt="apple"/>
            This is a test.  Test Test Test Test.
            <br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br>
            <img src="css.png" alt="css"/>
            test

            test
        </p>
        <script>
            let buttons = document.getElementsByTagName("button");
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }

            function handleButtonPress(e) {
                if (e.target.id == "print") {
                    window.print();
                } else if (e.target.id == "close") {
                    window.close();
                } else {
                    window.scrollTo(0, 400);
                }
            }
        </script>
    </body>
</html>

The script in this example prints, closes, and scrolls the window in response to button presses.

Navigating Within the Browsing History

The window.history property returns a History object, which you can use to perform basic operations on
the browser history.

The back(), forward(), and go() methods tell the browser to navigate to
a URL in the history.

The back() and forward() methods have the same effect as the browser back and forward buttons.

The go() method navigates to a place in the history relative to the current document.

A positive value specifies the browser
should go forward in the history, and a negative value specifies to move backward.

The magnitude of the value specifies how many steps.

For example, a value of  -2 tells the browser to navigate to the document
before last in the history.

The following code demonstrates the use of these three methods.

Navigating Within the Browser History.

let buttons = document.getElementsByTagName("button");
for (let i = 0 ; i < buttons.length; i++) {
    buttons[i].onclick = handleButtonPress;
}

function handleButtonPress(e) {
    if (e.target.id == "back") {
        window.history.back();
    } else if (e.target.id == "forward") {
        window.history.forward();
    } else if (e.target.id == "go") {
        window.history.go("http://www.demo2s.com");
    }
}


Open in separate window
View full source code

<html>
    <body>
        <button id="back">Back</button>
        <button id="forward">Forward</button>
        <button id="go">Go</button>

        <script type="text/javascript">

            let buttons = document.getElementsByTagName("button");
            for (let i = 0 ; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }<!-- w    ww    .d   e m  o    2s    . c  o m  -->

            function handleButtonPress(e) {
                if (e.target.id == "back") {
                    window.history.back();
                } else if (e.target.id == "forward") {
                    window.history.forward();
                } else if (e.target.id == "go") {
                    window.history.go("http://www.demo2s.com");
                }
            }
        </script>
    </body>
</html>


In addition to these basic functions, HTML5 provides support for changing the browser history,
within certain constraints.

Dealing with the Browser History.

Consider the following code

let sel = "No selection made";
document.getElementById("msg").innerHTML = sel;

let buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function(e) {
        document.getElementById("msg").innerHTML = e.target.innerHTML;
    };
}


Open in separate window
View full source code

<html>
    <body>
        <p id="msg"></p>
        <button id="banana">Banana</button>
        <button id="apple">Apple</button>

        <script type="text/javascript">

            let sel = "No selection made";
            document.getElementById("msg").innerHTML = sel;

            let buttons = document.getElementsByTagName("button");
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function(e) {
                    document.getElementById("msg").innerHTML =
                            e.target.innerHTML;
                };<!--  w w    w  . d  e   mo  2    s.    c  o  m-->
            }
        </script>
    </body>
</html>


This example contains a script that displays a message based on which button the user clicks.

The problem is that when the user navigates away from the example document, the
information about which button was clicked is lost.

Inserting an Entry into the History
The History.pushState() method lets you add a URL to the browser history, with some constraints.

The URL must be from the same server name and port as the current document.

One approach to adding
URLs is to use just the query string or hash fragment appended to the current document.

Adding an Entry to the Browser History.

let sel = "No selection made";
if (window.location.search == "?banana") {
    sel = "Selection: Banana";
} else if (window.location.search == "?apple") {
    sel = "Selection: Apple";
}
document.getElementById("msg").innerHTML = sel;

let buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function(e) {
        document.getElementById("msg").innerHTML = e.target.innerHTML;
        window.history.pushState("", "", "?" + e.target.id);
    };
}


Open in separate window
View full source code

<html>
    <body>
        <p id="msg"></p>
        <button id="banana">Banana</button>
        <button id="apple">Apple</button>

        <script type="text/javascript">

            let sel = "No selection made";
            if (window.location.search == "?banana") {
                sel = "Selection: Banana";
            } else if (window.location.search == "?apple") {
                sel = "Selection: Apple";
            }<!-- w   w  w  .   d e  m   o  2s   .  c o    m-->
            document.getElementById("msg").innerHTML = sel;

            let buttons = document.getElementsByTagName("button");
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function(e) {
                    document.getElementById("msg").innerHTML =
                               e.target.innerHTML;
                    window.history.pushState("", "", "?" + e.target.id);
                };
            }
        </script>
    </body>
</html>


The script in this example uses the pushState() method to add an item to the browser history.

The URL that it added is the URL of the current document plus a query string indicating which button the
user clicked.

We also added some code that uses the  Location object to read the
query string and the selected value.

When the user clicks the Banana button, the browser navigation bar shows the URL we pushed into
the browsing history.

The document isn't reloaded; only the history and the displayed URL change.

Each time a button is clicked, a new URL is added to the history, creating a record of the user's path
through the navigation.

The benefit of these additional entries comes when the user navigates elsewhere
and then returns to the document.

When the user clicks the back button, the URL that we inserted into the history is loaded,
and the script uses the query string to preserve some simple application state.

Storing a State Object in the Browser History

The following code demonstrates how to use the first pushState() argument to store something more complex.

Storing a State Object in the Browser History.

if (window.history.state) {
    displayState(window.history.state);
    document.getElementById("state").innerHTML = "Yes";
} else {/* w   w w  .   d e   mo    2 s  . c   o   m*/
    document.getElementById("name").innerHTML = "No Selection";
}

window.onpopstate = function(e) {
    displayState(e.state);
    document.getElementById("event").innerHTML = "Yes";
}
let buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function(e) {
        let stateObj;
        if (e.target.id == "banana") {
            stateObj = {
                name: "banana",
                color: "yellow",
                size: "large"
            }
        } else {
            stateObj = {
                name: "apple",
                color: "red",
                size: "medium"
            }
        }
        window.history.pushState(stateObj, "");
        displayState(stateObj);
    };
}

function displayState(stateObj) {
    document.getElementById("name").innerHTML = stateObj.name;
    document.getElementById("color").innerHTML = stateObj.color;
    document.getElementById("size").innerHTML = stateObj.size;
}


Open in separate window
View full source code

<html>
    <head>
        <style>
            * { margin: 2px; padding: 4px; border-collapse: collapse;}
        </style>
    </head>
    <body>
        <table border="1">
            <tr><th>Name:</th><td id="name"></td></tr>
            <tr><th>Color:</th><td id="color"></td></tr>
            <tr><th>Size:</th><td id="size"></td></tr>
            <tr><th>State:</th><td id="state"></td></tr>
            <tr><th>Event:</th><td id="event"></td></tr>
        </table>
        <button id="banana">Banana</button>
        <button id="apple">Apple</button>

        <script type="text/javascript">

            if (window.history.state) {<!--   ww   w  . d   e  m  o  2   s  .c    o m -->
                displayState(window.history.state);
                document.getElementById("state").innerHTML = "Yes";
            } else {
                document.getElementById("name").innerHTML = "No Selection";
            }

            window.onpopstate = function(e) {
                displayState(e.state);
                document.getElementById("event").innerHTML = "Yes";
            }
            let buttons = document.getElementsByTagName("button");
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function(e) {
                    let stateObj;
                    if (e.target.id == "banana") {
                        stateObj = {
                            name: "banana",
                            color: "yellow",
                            size: "large"
                        }
                    } else {
                        stateObj = {
                            name: "apple",
                            color: "red",
                            size: "medium"
                        }
                    }
                    window.history.pushState(stateObj, "");
                    displayState(stateObj);
                };
            }

            function displayState(stateObj) {
                document.getElementById("name").innerHTML = stateObj.name;
                document.getElementById("color").innerHTML = stateObj.color;
                document.getElementById("size").innerHTML = stateObj.size;
            }
        </script>
    </body>
</html>


In this example, we represent the user's selection using an object with three properties, containing the
name, color, and size of the your data that the user has picked, like this:

stateObj = { name: "apple", color: "red", size: "medium"}

When the user makes a selection, we use the History.pushState() method to create a new history entry
and associate the state object with it, like this:

window.history.pushState(stateObj, "");

We haven't specified a URL in this example, which means that the state object is associated with the
current document.

You can use two ways to retrieve the state object when the user returns to your document.

The first is through the history.state property, like this:

...
if (window.history.state) {
    displayState(window.history.state);
...

Not all browsers make the state object available through this property
Chrome doesn't, for example.

To deal with this, you must listen for the popstate event as well.

Here is the code that listens and responds to the popstate event:

window.onpopstate = function(e) {
    displayState(e.state);
    document.getElementById("event").innerHTML = "Yes";
}

Notice that we display the state information in a table element, along with details of how the state
 object was obtained: via the property or the event.

You must be careful not to rely on the state information being available.

The browser's history can be
 lost in a number of different situations, including the user explicitly deleting it.

Replacing an Item in the History

You can use the replaceState() method to replace the entry for the current document.

Replacing the Current Entry in the Browser History.

let sel = "No selection made";
if (window.location.search == "?banana") {
    sel = "Selection: Banana";
} else if (window.location.search == "?apple") {
    sel = "Selection: Apple";
}
document.getElementById("msg").innerHTML = sel;

let buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function(e) {
        document.getElementById("msg").innerHTML = e.target.innerHTML;
        window.history.replaceState("", "", "otherpage?" + e.target.id);
    };
}


Open in separate window
View full source code

<html>
    <body>
        <p id="msg"></p>
        <button id="banana">Banana</button>
        <button id="apple">Apple</button>

        <script type="text/javascript">

            let sel = "No selection made";
            if (window.location.search == "?banana") {
                sel = "Selection: Banana";
            } else if (window.location.search == "?apple") {
                sel = "Selection: Apple";
            }<!-- w  w    w  . d   e  m  o2   s  . c   o   m-->
            document.getElementById("msg").innerHTML = sel;

            let buttons = document.getElementsByTagName("button");
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function(e) {
                    document.getElementById("msg").innerHTML =
                                 e.target.innerHTML;
                    window.history.replaceState(
                          "", "", "otherpage?" + e.target.id);
                };
            }
        </script>
    </body>
</html>



Using Cross-Document Messaging via Window object

The Window object is a gateway to another new feature in HTML5 called  cross-document messaging.

Under normal circumstances, scripts from different sources (known as origins)
are not allowed to communicate.

Script Origins
Browsers use components of a URL to determine the origin of a resource such as a script.

Limitations are placed on interaction and communication between scripts from different origins.

If the protocol, hostname, and port are the same, then two scripts are considered to be from the same origin, even if other parts of
    the URL are different.

The following table gives some examples, each of which is compared to the URL
http://mysub.mydomain.com/example.html.


URL
   Result

http://mysub.mydomain.com/apps/other.html
   Same origin
https://mysub.mydomain.com/apps/other.html
   Different origin; protocol differs
https://yourServer::81.mydomain.com/apps/example.html
   Different origin; port differs
http://myserver.mydomain.com/doc.html
   Different origin; host differs

Scripts can use the document.domain property to change their origin,
although only to widen the focus of the current URL.

For example, scripts that originate from
http://server1.domain.com and http://server2.domain.com can both set the domain
property to domain.com in order to have the same origin.

HTML5 provides a specification for this kind of communication through the
Window method postMessage(<msg>, <origin>).

It can send the specified message to another document.

Example
The goal is for the main document, example.html, to be able to call the
displayMessage() function
defined in the script element of the embedded document, otherdomain.html.

We use the postMessage() method, but we need to call that method on the Window that contains the
document we want to target.

The Window object provides the support needed to find
embedded documents, as described in the following table.


Name
   Description
   Returns

defaultView
   Returns the Window for the active document
   Window
frames
   Returns an array of the Window objects for the nested  iframe elements
   in the document                                                       
   Window[]
opener
   Returns the Window that opened the current browsing context
   Window
parent
   Returns the parent of the current Window
   Window
self
   Returns the Window for the current document
   Window
top
   Returns the topmost Window
   Window
length
   Returns the number of nested iframe elements in the document
   number
[<index>]
   Returns the Window for the nested document at the specified index
   Window
[<name>]
   Returns the Window for the nested document with the specified name
   Window

For this example, we are going to use the array-style notation to locate the Window object we want, so that
we can call the postMessage() method.

The following code shows the example.html document.

Locating a Window Object and Invoking the postMessage() Method.

<!DOCTYPE HTML>//  w  w    w.  d    e m  o  2   s  .  c o   m
<html>
    <body>
        <p id="status">Ready</p>
        <button id="send">Send Message</button>
        <p>
            <iframe name="nested"
                    src="https://yourServer::81/otherdomain.html"
                    width="90%"
                    height="75px"></iframe>
        </p>
        <script>
            document.getElementById("send").onclick = function() {
                window["nested"].postMessage("we like LEGO",
                                 "https://yourServer::81");
                document.getElementById("status").innerHTML = "Message Sent";
            }
        </script>
    </body>
</html>

We find the Window object that contains the script that we want to send the message to
(window["nested"]), and then call the postMessage() method.

The two arguments are the message that we
want to send and the origin of the target script, which in this case is
https://yourServer::81.

As a security measure, the browser will discard the message if the postMessage() method is called with
the wrong target origin.

To receive the message, we need to listen for the message event in the other script.

The browser passes a MessageEvent object, which defines the properties
shown in the following table.


Name
   Description
   Returns

data
   Returns the message sent by the other script
   object
origin
   Returns the origin of the sending script
   string
source
   Returns the window associated with the sending script
   Window

The following code shows how to use the message event to receive a cross-document message.

Listening for the Message Event.

<!DOCTYPE HTML>//  w    w  w . d   e m   o   2 s  .   c  o m 
<html>
    <head>
        <title>Other Page</title>
    </head>
    <body>
        <h1 id="banner">This is the nested document</h1>
        <script>
            window.addEventListener("message", receiveMessage, false);

            function receiveMessage(e) {
                if (e.origin == "http://yourServer") {
                    displayMessage(e.data);
                } else {
                    displayMessage("Message Discarded");
                }
            }

            function displayMessage(msg) {
                document.getElementById("banner").innerHTML = msg;
            }
        </script>
    </body>
</html>

Note that when a message event is
received, we check the origin property of the MessageEvent object to make sure we recognize and trust the
other script.

This is an important precaution that prevents messages from unknown and untrusted
scripts being acted on.

We now have a simple mechanism for sending a message from one script to
another, even though they have different origins.

DOM Get Elements by ID

Via DOM we can retrieve references to a specific element or sets of
elements to perform certain operations.

The Document type provides two methods to this end: getElementById() and
getElementsByTagName().

By ID
The getElementById() method accepts a single argument-the ID of an element to retrieve-and
returns the element if found, or null if an element with that ID doesn't exist.

The ID must be an exact match, including character case, 
to the id attribute of an element on the page.

Consider the following element:

<div id="myDiv">Some text</div>

This element can be retrieved using the following code:

// retrieve reference to the <div>
let div = document.getElementById("myDiv");  

The following code, however, would return null:

let div = document.getElementById("mydiv");  // null

If more than one element with the same ID are in a page, 
getElementById() returns the element that appears first in the document.

DOM Get Elements by Tag Name

The getElementsByTagName() accepts a single argument-the tag name of 
the elements to retrieve-and returns a
NodeList containing zero or more elements.

In HTML documents, this method returns an 
HTMLCollection object, which is very similar to a NodeList in that it 
is considered a live collection.

For example, the following code retrieves all <img> elements in the page 
and returns an HTMLCollection:

let images = document.getElementsByTagName("img");

This code stores an HTMLCollection object in the images variable.

As with NodeList objects, items
in HTMLCollection objects can be accessed using bracket notation or the item() method.

The number of elements in the object can be retrieved via the length property, 
as this example demonstrates:

output the number of images

console.log(images.length);       

output the src attribute of the first image

output the src attribute of the first image

console.log(images.item(0).src);  

The HTMLCollection object has an additional method, namedItem(), 
that lets you reference an item in the collection via its name attribute.

For example, suppose you had the following <img> element
in a page:

<img src="myimage.gif" name="myImage">

A reference to this <img> element can be retrieved from the images variable like this:

let myImage = images.namedItem("myImage");

In this way, an HTMLCollection gives you access to named items in addition to indexed items, 
making it easier to get exactly the elements.

You can also access named items by using bracket
notation, as shown in the following example:

let myImage = images["myImage"];

For HTMLCollection objects, bracket notation can be used with either numeric or string indices.

Behind the scenes, a numeric index calls item() and a string index calls namedItem().

Get All
To retrieve all elements in the document, pass in * to getElementsByTagName().

The asterisk is generally understood to mean "all" in JavaScript and Cascading Style Sheets (CSS).

Here's an example:

let allElements = document.getElementsByTagName("*");

This single line of code returns an HTMLCollection containing all of the elements in the order
in which they appear.

So the first item is the <html> element, the second is the <head> element,
and so on.

getElementsByTagName() method is case-insensitive for maximum compatibility
with existing HTML pages. 

When used in XML pages, including XHTML,
getElementsByTagName() switches to case-sensitive mode.