HTML DOM Nodes

In the HTML DOM (Document Object Model), everything is a node:

  • The document itself is a document node
  • All HTML elements are element nodes
  • All HTML attributes are attribute nodes
  • Text inside HTML elements are text nodes
  • Comments are comment nodes

The Document Object

When an HTML document is loaded into a web browser, it becomes a document object.

The document object is the root node of the HTML document and the "owner" of all other nodes:
(element nodes, text nodes, attribute nodes, and comment nodes).

The document object provides properties and methods to access all node objects, from within JavaScript.

Tip: The document is a part of the Window object and can be accessed as window.document.


Browser Support

The Document Object is supported in all major browsers.


Document Object Properties and Methods

The following properties and methods can be used on HTML documents:

Property / MethodDescription
document.activeElementReturns the currently focused element in the document
document.addEventListener()Attaches an event handler to the document
document.adoptNode()Adopts a node from another document
document.anchorsReturns a collection of all <a> elements in the document that have a name attribute
document.appletsReturns a collection of all <applet> elements in the document
document.baseURIReturns the absolute base URI of a document
document.bodySets or returns the document's body (the <body> element)
document.close()Closes the output stream previously opened with document.open()
document.cookieReturns all name/value pairs of cookies in the document
document.createAttribute()Creates an attribute node
document.createComment()Creates a Comment node with the specified text
document.createDocumentFragment()Creates an empty DocumentFragment node
document.createElement()Creates an Element node
document.createTextNode()Creates a Text node
document.doctypeReturns the Document Type Declaration associated with the document
document.documentElementReturns the Document Element of the document (the <html> element)
document.documentModeReturns the mode used by the browser to render the document
document.documentURISets or returns the location of the document
document.domainReturns the domain name of the server that loaded the document
document.domConfigObsolete. Returns the DOM configuration of the document
document.embedsReturns a collection of all <embed> elements the document
document.formsReturns a collection of all <form> elements in the document
document.getElementById()Returns the element that has the ID attribute with the specified value
document.getElementsByClassName()Returns a NodeList containing all elements with the specified class name
document.getElementsByName()Returns a NodeList containing all elements with a specified name
document.getElementsByTagName()Returns a NodeList containing all elements with the specified tag name
document.hasFocus()Returns a Boolean value indicating whether the document has focus
document.headReturns the <head> element of the document
document.imagesReturns a collection of all <img> elements in the document
document.implementationReturns the DOMImplementation object that handles this document
document.importNode()Imports a node from another document
document.inputEncodingReturns the encoding, character set, used for the document
document.lastModifiedReturns the date and time the document was last modified
document.linksReturns a collection of all <a> and <area> elements in the document that have a href attribute
document.normalize()Removes empty Text nodes, and joins adjacent nodes
document.normalizeDocument()Removes empty Text nodes, and joins adjacent nodes
document.open()Opens an HTML output stream to collect output from document.write()
document.querySelector()Returns the first element that matches a specified CSS selector(s) in the document
document.querySelectorAll()Returns a static NodeList containing all elements that matches a specified CSS selector(s) in the document
document.readyStateReturns the (loading) status of the document
document.referrerReturns the URL of the document that loaded the current document
document.removeEventListener()Removes an event handler from the document (that has been attached with the addEventListener()method)
document.renameNode()Renames the specified node
document.scriptsReturns a collection of <script> elements in the document
document.strictErrorCheckingSets or returns whether error-checking is enforced or not
document.titleSets or returns the title of the document
document.URLReturns the full URL of the HTML document
document.write()Writes HTML expressions or JavaScript code to a document
document.writeln()Same as write(), but adds a newline character after each statement

Warning !!!

In the W3C DOM Core, the Document object inherits all properties and methods from the Node object.

Many of these properties and methods make no sense used on documents.

Avoid using these node object properties and methods on HTML document objects:

 Property / MethodReason for avoiding
document.attributesDocuments don't have attributes
document.hasAttributes()Documents don't have attributes
document.nextSiblingDocuments don't have siblings
document.nodeNameThis is always #document
document.nodeTypeThis is always 9 (DOCUMENT_NODE)
document.nodeValueDocuments don't have an node value
document.ownerDocumentDocuments don't have an owner document
document.ownerElementDocuments don't have an owner element
document.parentNodeDocuments don't have a parent node
document.previousSiblingDocuments don't have siblings
document.textContentDocuments don't have a text content



source - http://www.w3schools.com/jsref/dom_obj_document.asp 


Posted by linuxism
,


The window property of a window object points to the window object itself. Thus the following expressions all return the same window object:

window.window
window.window.window
window.window.window.window
  ...

In web pages, the window object is also a global object. This means that:

  1. global variables of your script are in fact properties of window:
    var global = {data: 0};
    alert(global === window.global); // displays "true"
  2. you can access built-in properties of the window object without having to type window. prefix:
    setTimeout("alert('Hi!')", 50); // equivalent to using window.setTimeout.
    alert(window === window.window); // displays "true"

The point of having the window property refer to the object itself was (probably) to make it easy to refer to the global object (otherwise you'd have to do a manual var window = this; assignment at the top of your script).

Another reason is that without this property you wouldn't be able to write, for example, "window.open('http://google.com/')" - you'd have to just use "open('http://google.com/')" instead.

Yet another reason to use this property is for libraries which wish to offer OOP-versions and non-OOP versions (especially JavaScript modules). If, for example, we refer to "this.window.location.href", a JavaScript module could define a property called "window" inside of a class it defined (since no global "window" variable exists for it by default) which, could be created, for example, after passing in a window object to the module class' constructor.  Thus, "this.window" inside of its functions would refer to that window object. In the non-namespaced version, "this.window" would simply refer back to "window", and also be able to get the document location without trouble. Another advantage is that the objects of such a class (even if the class were defined outside of a module) could change their reference to the window at will, as they would not be able to do if they had hard-coded a reference to "window" (yet the default in the class could still be set as the current window object).

Specification



source - https://developer.mozilla.org/ko/docs/Web/API/Window/window










JavaScript Window - The Browser Object Model



The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.


The Browser Object Model (BOM)

There are no official standards for the Browser Object Model (BOM).

Since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity, it is often referred to, as methods and properties of the BOM.


The Window Object

The window object is supported by all browsers. It represents the browser's window.

All global JavaScript objects, functions, and variables automatically become members of the window object.

Global variables are properties of the window object.

Global functions are methods of the window object.

Even the document object (of the HTML DOM) is a property of the window object:

window.document.getElementById("header");

is the same as:

document.getElementById("header");

Window Size

Three different properties can be used to determine the size of the browser window (the browser viewport, NOT including toolbars and scrollbars).

For Internet Explorer, Chrome, Firefox, Opera, and Safari:

  • window.innerHeight - the inner height of the browser window
  • window.innerWidth - the inner width of the browser window

For Internet Explorer 8, 7, 6, 5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth
  • or
  • document.body.clientHeight
  • document.body.clientWidth

A practical JavaScript solution (covering all browsers):

Example

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

Try it Yourself »

The example displays the browser window's height and width: (NOT including toolbars/scrollbars)


Other Window Methods

Some other methods:

  • window.open() - open a new window
  • window.close() - close the current window
  • window.moveTo() -move the current window
  • window.resizeTo() -resize the current window




source - http://www.w3schools.com/js/js_window.asp






Window Object

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.


Window Object Properties

PropertyDescription
closedReturns a Boolean value indicating whether a window has been closed or not
defaultStatusSets or returns the default text in the statusbar of a window
documentReturns the Document object for the window (See Document object)
frameElementReturns the <iframe> element in which the current window is inserted
framesReturns all <iframe> elements in the current window
historyReturns the History object for the window (See History object)
innerHeightReturns the inner height of a window's content area
innerWidthReturns the inner width of a window's content area
lengthReturns the number of <iframe> elements in the current window
locationReturns the Location object for the window (See Location object)
nameSets or returns the name of a window
navigatorReturns the Navigator object for the window (See Navigator object)
openerReturns a reference to the window that created the window
outerHeightReturns the outer height of a window, including toolbars/scrollbars
outerWidthReturns the outer width of a window, including toolbars/scrollbars
pageXOffsetReturns the pixels the current document has been scrolled (horizontally) from the upper left corner of the window
pageYOffsetReturns the pixels the current document has been scrolled (vertically) from the upper left corner of the window
parentReturns the parent window of the current window
screenReturns the Screen object for the window (See Screen object)
screenLeftReturns the horizontal coordinate of the window relative to the screen
screenTopReturns the vertical coordinate of the window relative to the screen
screenXReturns the horizontal coordinate of the window relative to the screen
screenYReturns the vertical coordinate of the window relative to the screen
scrollXAn alias of pageXOffset
scrollYAn alias of pageYOffset
selfReturns the current window
statusSets or returns the text in the statusbar of a window
topReturns the topmost browser window

Window Object Methods

MethodDescription
alert()Displays an alert box with a 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 setInterval()
clearTimeout()Clears a timer set with setTimeout()
close()Closes the current window
confirm()Displays a dialog box with a message and an OK and a Cancel button
createPopup()Creates a pop-up window
focus()Sets focus to the current window
moveBy()Moves a window relative to its current position
moveTo()Moves a window to the specified position
open()Opens a new browser window
print()Prints the content of the current window
prompt()Displays a dialog box that prompts the visitor for input
resizeBy()Resizes the window by the specified pixels
resizeTo()Resizes the window to the specified width and height
scroll()Deprecated. This method has been replaced by the scrollTo() method.
scrollBy()Scrolls the document by the specified number of pixels
scrollTo()Scrolls the document to the specified coordinates
setInterval()Calls a function or evaluates an expression at specified intervals (in milliseconds)
setTimeout()Calls a function or evaluates an expression after a specified number of milliseconds
stop()Stops the window from loading




source - http://www.w3schools.com/jsref/obj_window.asp













'Development > JavaScript' 카테고리의 다른 글

javascript - objects  (0) 2015.07.11
javascript - document object  (0) 2015.07.11
javascript - variable rules  (0) 2015.07.07
javaScript - Performance  (0) 2015.07.06
javaScript - hoisting  (0) 2015.07.06
Posted by linuxism
,


RDD Operations

RDDs support two types of operations: transformations, which create a new dataset from an existing one, and actions, which return a value to the driver program after running a computation on the dataset. For example, map is a transformation that passes each dataset element through a function and returns a new RDD representing the results. On the other hand, reduce is an action that aggregates all the elements of the RDD using some function and returns the final result to the driver program (although there is also a parallel reduceByKey that returns a distributed dataset).

All transformations in Spark are lazy, in that they do not compute their results right away. Instead, they just remember the transformations applied to some base dataset (e.g. a file). The transformations are only computed when an action requires a result to be returned to the driver program. This design enables Spark to run more efficiently – for example, we can realize that a dataset created through map will be used in a reduce and return only the result of the reduce to the driver, rather than the larger mapped dataset.

By default, each transformed RDD may be recomputed each time you run an action on it. However, you may also persist an RDD in memory using the persist (or cache) method, in which case Spark will keep the elements around on the cluster for much faster access the next time you query it. There is also support for persisting RDDs on disk, or replicated across multiple nodes.




source - https://spark.apache.org/docs/latest/programming-guide.html



Posted by linuxism
,