why does console.log(document.body) give different looking result? - javascript

I embedded console.log(document.body) at my local page for learning purpose and when I hit refresh it displayed properties of body element like baseURL, innerHTML, etc... rather than its
content. Why is this happening? (I am using Chrome43)

In JavaScript and the DOM, document.body is an object, and when you log it with console, Chrome is displaying displaying the object, which includes all of its properties. The content of document.body can be found in the innerHTML property and accessible via other properties as well.
Chrome may be displaying the object properties instead of the DOM tree if there's a race condition and console.log(document.body) is fired prior to the completion of the DOM tree.
If you need the DOM tree, then try logging document.body after the body loads.

document is the root of the DOM, not the same as window, the global browser scope. console.log(document.body); logs the DOM element, not the JavaScript object.

Related

What is the DOM and BOM in JavaScript and if BOM is an object how to access it?

There are many question i saw on these concept still i have some doubts that's why asking specifically
What is Browser object Model is this any object in javascript if it is how to access that object and what kind of properties it has
someone please clarify exact definition of each
For example window is a global object created by Javascript engine
We can access it by
window
when we say window we get following properties in console
window
Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}
When we say
window.document
#document<html>​<head>​
​</head>​<body>​…​</body>​<script src=​"app.js">​</script>​</body>​</html>​
Similar way what is BOM and DOM
The BOM consists of the objects navigator, history, screen, location and document which are children of window. In the document node is the DOM, the document object model, which represents the contents of the page. You can manipulate it using javascript.
Reference
What is the DOM and BOM in JavaScript?
All browsers are split into different parts (objects) that can be accessed using Javascript. Collectively, these parts are known as the Browser Object Model, or the BOM. At the very top of this browser hierarchy is the Window object. This represents the entire browser, with its toolbars, menus, status bar, the page itself, and a whole lot more besides. Effectively, the Window IS the browser.
Every web page resides inside a browser window which can be considered as an object.
A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content.
BOM stands for Browser Object Model
DOM stands for Document Object Model
Document is a document object constructor
window is a scripting handle for window object
With Browser Object Model(window Object), you can:
Manipulate the browser window with the window object and things like
scrolling, opening a new window, closing the current window, ..Etc.
Use the object document property to interact with the DOM.
Get the browser history with the history object.
Manipulate the screen with the screen object.
Get and do things with the location object.
With DOM you can:
Change an element text.
Change an HTML element color.
Hide and show elements
Make an HTML elements listen to an event

How to get the current document of an element with jQuery

I have a complex code that travels inside windows and iframes (yes, windows cause I open some windows with window.open sometimes and also travel inside iframes) and when some condition apply I get an element from inside of those iframes (they usually are DIVs and SPANs).
So, I have the element that I want in the object "$(this)" so from the parent window how can I know the "document" element that has this element? I need to get the "document" element that has "$(this)" and set some attributes to it.
I tried $(this).parents(document) but it does not work.
If this refers to an element (such that $(this) would give you a jQuery wrapper around it) or indeed any Node, then this.ownerDocument is a reference to the document the element is in (null if it's not in a document). Details in ownerDocument in the specification.

How to pass the jQuery object from parent document to a friendly iframe?

I am trying to develop an interactive widget that utilizes jQuery within an iframe, but relies on the jQuery object that already exists in the parent document rather than making an additional server request for its own jQuery instance. This is significant because the widget will be loaded into the parent document several times on a page - therefore requiring an http request each time it appears on the page is not desired. Instead, I would like to pass the parent's jQuery object instance (I am certain it will be available in the parent document) to be used within the iframe.
With the understanding that this is a "friendly" iframe (i.e. it is permitted to openly communicate with the parent document), I assumed it would be as simple as:
window.jQuery = window.parent.jQuery;
While this seems to provide the jQuery namespace to become available within the iframe (and logging this namespace shows the expected jQuery function string), it does not seem to be able to reference elements within the iframe. For example:
window.jQuery = window.parent.jQuery;
console.log(jQuery); // logs: function (e,t){return new w.fn.init(e,t,r)}
console.log(jQuery('#elem-in-iframe')); // logs: []
Therefore it seems like the jQuery object being passed into the iframe from the parent document is still limited by the scope of the parent.
Ultimately, I have had to settle for creating an independent instance of jQuery within each iframe that loads on the page - so instead of loading the jQuery library once on initial page load, it is loaded on initial page load as well as each time the widget is injected into the parent document. While this does not inhibit the parent window from loading, as the iframe loads independently, it is not the desired result. I would like to explore how it may be possible to inherit and use jQuery from the parent within the iframe.
I think you are wrong in your assumption
therefore requiring an http request each time it appears on the page is not desired
jQuery will be cached by the browser as long as it is getting it from the same URL. It is basically a free request.
Now, the reason you can't "share" the jQuery object as you want, is that selector's have a context.
A DOM Element, Document, or jQuery to use as context
The default is document (I believe), and as you are accessing the parents object, it's default is the already set document. You should be able to do:
window.jQuery = window.parent.jQuery;
jQuery('#elem-in-iframe', document)
In the iframe to pass in the iframes window as the context, and then it should theoretically work.
You may even be able to do this in the iframe:
window.jQuery = window.parent.jQuery;
$ = jQuery(document);
and then you can just do
$('#elem-in-iframe')

Add method to javascript's Window object before the page starts loading

Is it possible to add a method to a dynamically created iframe's Window object before the requested page starts loading? I would expect to do this though iframe.contentWindow.myMethod = function() { }, however iframe.contentWindow is NULL before the page loads.
I can add the method when the onload event fires, however some pages make an inline call to the method I'm adding. As the browser executes code when received 'method doesn't exist' errors are being raised.
I'm hoping there is a point I can get access to the window object as soon as it is created, before the content is downloaded and processed?
I'm hoping there is a point I can get access to the window object as soon as it is created, before the content is downloaded and processed?
I very much doubt there is. Perhaps you could modify the pages being loaded so that they call the method in the parent window instead, where you know you'll already have the method defined. E.g., instead of them doing:
someMethod("some arg");
they'd do
parent.someMethod("some arg");
...where someMethod is a global function within the opening window.
Live Example | Source | Source of iframe
You can't modify a page before it starts loading - there's nothing there to modify. You can modify it while it's loading - using a <script> tag at the top of <head> that executes directly, rather than waiting until onload. That's about the soonest you can do it, though.

Determine a DOM element's document?

I am getting a reference to a DOM element from a WYSIWYG Editor.
I don't understand JS nor the WYSIWYG Editor (CKEditor) that deeply yet, but it somehow seems to be a pointer or other direct reference to the actual element that resides in an IFRAME within the WYSIWYG editor. At least, when I console.log the element, I get a link that, when clicked, opens the actual element in Firebug.
Is there a way to get a reference to this element's document object within the IFRAME?
If you have the DOM element reference, you can use the ownerDocument property:
var ownerDoc = someElement.ownerDocument;
I don't know that specific editor, but if it has a reasonably normal implementation of the DOM, each node (including the DOM element to which you get a reference) has a parentNode read-only property that references its parent node. By following the chain of parentNode references, you're moving upwards in the DOM tree and should eventually reach the document you want.
(The ownerDocument property offers a more immediate solution, but it was not supported in some old browsers such as IE 5.5 -- if you don't have to worry about such "archaeology" issues, it's fine, but parentNode works even more broadly).

Categories