Question

This is a very specific question that relates to a broader question asked here:

grab/copy/convert to variable: google translated text (write to other page) client side

I’ve read DOM (wiki):

To render a document such as an HTML page, most web browsers use an
internal model similar to the DOM. The nodes of every document are
organized in a tree structure, called the DOM tree, with topmost node
named “Document object”. When an HTML page is rendered in browsers,
the browser downloads the HTML into local memory and automatically
parses it to display the page on screen. The DOM is also the way
JavaScript transmits the state of the browser in HTML pages.

It’s interesting, but it doesn’t state what the output is ‘as an object’.

Yet we can highlight the output, or displayed text, and copy it, and paste it.
Therefore the highlight and copy commands must know how to access the output – ergo it must be an object (yes/no?).

If these commands can access the output…… it begs the question:

Can Javascript also access the output?
If so…. what is it called, and what is the script path to it.

E.g. typical example:

var x = document.getElementById("textarea_id").value;

I probably need:

var x = path_to_parsed_output.value;

The answer to this question must be out there…. but I’ve looked at a good few reference sites, and none seem to address this issue head on.

I’m hoping for some knowledgeable people to simply state, what is perhaps an obvious answer (obvious if you have the knowledge).

🙂

Answer 1

Yes and no.
Yes, you can access practically anything you want, in the DOM, through JavaScript.

But there are no universal references to nodes further down the list than the root node (again, with a couple of exceptions).

You either have to traverse the DOM, using a tree-navigating algorithm, until you find what you’re looking for, or you have to give your HTML node a defining characteristic and use a DOM accessing method which will either give you the single element with that attribute (id), or a list of nodes which have that attribute (class), which you have to iterate through to find what you want.

…so the trick is to find the defining characteristics of the node you want, to make accessing it as painless as possible.

DOM nodes aren’t 1:1 with objects, though.
Meaning that changes you make to it as an object might not be reflected in the HTML, and vice versa (unless you’re using DOM-specific methods).

In terms of what DOM objects support, read the tutorials on Mozilla Developer Network.
That’s a HUGE topic, and different browsers support different things.