I have a web page with the element:
<div id='myid'></div>
In chrome dev tools, when I type in the console
document.getElementById('myid')
returns a html element,
<div id='myid'></div>
is there an alternative method I can use to view it and it's properties as a JavaScript object instead rather than a html element?
convert html to javascript
I have seen this post, but all I want to do is get the element, not do any parsing and build something new and ideally in dev tools.
is there an alternative method I can use to view it and it's properties as a JavaScript object instead rather than a html element?
all I want to do is get the element, not do any parsing and build something new and ideally in dev tools
Yes if you are only interested in the dev tools (console), you can always use console.dir() method, it's made for this:
console.dir(document.getElementById('myid'));
console.dir() method:
Displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects.
Would do something like using the Document Element interface to access the array of attributes / properties.
Related
Is document.InnerText a variable?
If not then why it has assignment operator like this code below:
document.InnerText=count
I tried to reverse the count and document part it doesnt work the other way.
Look at this diagram of the HTML Document Object Model. You'll see document is the top of the tree. It contains a root element, which is the html, which contains every html element in your web page.
Only the html elements can have innerText. Here is a list of the built-in methods and properties of the document object; innerText isn't in there. But JavaScript objects are built on the fly (unlike in most object oriented languages like Java, where they must be defined in advance). Try saying document.potato = 7. The JavaScript interpreter will happily create a potato property within the document and assign the value 7 to it.
What does this do to the web page? Nothing at all, because the potato property means nothing to the engine in the browser that draws the page. But if later on in the program you say console.log(document.potato) it will print 7 in the console for you.
So when you say document.InnerText=count it will create the property. But like potato it doesn't do anything, because the browser engine doesn't recognize that property. That's why it's not doing anything.
I am making a Chrome extension,
In Chrome's Inspect Elements panel, at the bottom will show all elements of the HTML page.
How can I get all those elements in JavaScript?
The page's original source code not include all of the elements.
How can I get all elements shown in Inspect Elements in my Chrome extension?
See these pictures: this one is the elements I want, and this one is the original source code.
I just use the JavaScript document.getElementsByTagName("html")[0] and I get all I want.
I don't know why I didn't get the right result yesterday.
Any elements that you see in the JavaScript inspector, but not in the HTML source code, are either (a) automatically added by the browser to normalize the any missing elements (i.e. no <body> tag) or correcting invalid structure (i.e. unclosed <p> tag) to make the document valid, or (b) added by JavaScript.
Any technique you use to inspect the document from your Chrome extension will automatically see the document as you see it in the document inspector. You don't need to do anything specific. All of the elements that have been created by the browser or by JavaScript will be there. For example, you could use document.querySelectorAll('*') to get an array-like object containing all of them, or document.body.outerHTML to get the HTML code.
The harder task would actually be if you wanted to get the original, uncorrected source code.
I have 2 iframes on a page and I am trying to pass DOM element from one iframe to another using postMessage. But chrome keep giving me error:
"DataCloneError: An object could not be cloned. "
Is there a way around this issue ?
According to the spec, you can't send DOM nodes and it will throw an error.
Messages can be structured objects, e.g. nested objects and arrays, can contain JavaScript values (strings, numbers, Date objects, etc), and can contain certain data objects such as File Blob, FileList, and ArrayBuffer objects.
You might try with innerHTML, which "gets or sets the HTML or XML markup contained within the element." (https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
With innerHTML you can pass element's content as a string, and then, in the other iframe, insert that content, again with innerHTML.
In this answer there is a simple way to get the innerHTML content of a node:
https://stackoverflow.com/a/1750860/1401341
You won't get events attached to the element, but in some cases this method could be enough.
In Chrome, when debugging in JavaScript, it is interesting to get the interface of an element.
Typing the variable name that holds the element in the console usually gives me the element tag. How can I get the interface matching the element. Sometimes Chrome outputs it, but sometimes gives the tag. I am unsure how Chrome returns the value.
Browsers try to be smart when displaying things via console.log to make the output more readable. If you want to consistently get a tree of properties that you can navigate through, you can use console.dir.
interface has no meaning in JS and a very specific meaning in other languages. You can potentially see the WebIDL interface of a DOM Element by viewing the prototype of an element using console.log(element.__proto__); but that is entirely browser dependent and non-standard.
If you want a standard way (i.e. not using __proto__):
console.log(el.constructor.name);
It looks like you can force one view or the other by specifying which you want:
console.dir(el)
gives you the "interface" for that el, while
console.dirxml(el)
prints the element as it would appear in the Elements panel.
The windows forms web browser control supports Javascript; this Javascript can make changes to the DOM. However, when I call the DocumentText property, I always get the unmodified HTML. Is there any way to get the HTML after modification?
You should be able to just do: webBrowser1.Document.Body.InnerHtml
when you modifiy the html doc, is it form elements, or other types of element.
one thing i noticed during debugging is that when i use the setAttribute for input form and then use webbrowser1.document.innerText, i get the modified doc returned.
my suggestion is that you either set the html doc propert you are modifying throug code first, and or use webbrowser1.document.body.innerText