Select item by data-id in pure javascript - javascript

I have an applescript program that executes javascript in Google Chrome's front browser tab.
Whenever my script is run, I need to select the element with data-id play-pause and .click it. I cannot use jQuery as it's not included with the document.
Is there a way in pure javascript that I can do this?
(I'm sure there's probably a way to import it so I could use it but I'm not going down that path for a simple program.)

From IE8 and up you can use querySelector, or querySelectorAll if there's more than one element
document.querySelector('[data-id="play-pause"]').click();

Related

Python Selenium edit text content of specific javascript element in specific iframe

I am trying to use python selenium to change the text in a specific JS element.
I started out by attempting to simply execute the script using the following:
driver.execute_script("document.querySelector('#cssSelector').textContent='{}'".format(text))
However, unfortunately, this returns null
When looking into the JS the selector is in a specific iframe so I have tried to select the iframe but this has not yet worked:
driver.execute_script('''var element=window.frames['iframe'].document.querySelector("[id='cssselector']"); element.textContent='{}'".format(text))
This code also returns undefined as it cannot find the element.
Is there a better way to do this? thanks

Which JS added inline styles?

is there any way to check which JS script added inline style to particular DOM element? I've been trying to find it manually, but I suppose there is a better way...
If you are using chrome, you can right-click the DOM element you want to watch (in the element inspector of the dev tools), and select Break On - Attributes Modifications.
That's about the closest solution I know of.
I don't think there is a "signature" for a javascript outcome on DOM so i guess you have much choice but disabling one by one your scripts.
Other choice: make a global search with parts of the style in your text editor, it must be stocked somewhere in your code.

When using CasperJS, is it possible to interact with the DOM of a loaded page before any inline or external Javascript is executed?

The situation I have is that I'm opening a page using CasperJS.
The page in question has some Javascript (a combination of both inline and external) that removes several HTML elements from the document.
However, I want to be able to retrieve those elements using something like getElementsByXPath() within CasperJS before they are removed. Is this possible?
When I dump out the value of getPageContent(), the elements are not in there. However, if I set casper.page.settings.javascriptEnabled = false; before calling the page, getPageContent() now shows the raw HTML before any Javascript is executed, and the missing HTML tags are there. The problem now, though, is that disabling Javascript prevents any usage of evaluate(), so I still can't retrieve the elements. I could probably do it using a regex of some sort on the raw content, but I was hoping there could be a cleaner method of doing it.
Any suggestions welcome!
I've never heard of anyone doing this. I wouldn't say using regex is a bad idea. I usually scrape with a combination of casperjs xpath and python regex it works extremely well and I personally don't think it's any messier than trying to intercept JavaScript before the page is loaded.
That being said, casperjs allows you to inject JavaScript which you could use jquery if it's available on the page you're requesting. The below code fires before anything is loaded. You actually have to go out of your way to add code to prevent this from firing before the page loads.
<script type='text/javascript'>
alert("Stop that parsing!");
</script>

JQuery selector of script tag calling from

i have the following html output of a tool thats i'm developing:
<button>a</button>
<script>$('what to wrtie here to select the previous button element?').click(function(){alert ('a clicked !');});</script>
<button>b</button>
<script>$('same here').click(function(){alert ('b clicked !');});</script>
i need the selector in each script tag to select the previous element.
using id selector cant be applied since the tool don't generate ids for elements.
thanks.
ANSWER:
$('script').last().prev().click(...
as Niklas said the current executed script is the last one in the list
This is not possible without an id or some other kind of reference to either the button object or the script tag itself.
It's not possible to do because the script is not executed from where its element is located in the DOM. Instead it's executed with reference to the whole window.
Actually, there's a pretty good answer here: How may I reference the script tag that loaded the currently-executing script?
In short, the currently running script is the last element in the list.
well , i really don't recommend what you are doing first lets talk about your approach,
this kind of code should be wrapped in a ready event and when the DOM is ready all the registered code associated with that event will run , so no way to understand what script tag the code were in
what should happen is moving all the script tags to its own file and using selectors to select what elements you want or selecting them dynamicly using prev,next, parents, etc
Edit
i am wrong about not being able to get the script tag #Niklas answer is the right one, but i am still thinking very wrong to do so
There is no way of doing this (referring to the script tag that contains the script) that I know of. The best approach here would be to generate an ID for each element and aggregate your script into a single script tag.
That up there is the correct solution. The secret, naughty solution is this (spoiler):
<button>a</button><script>
//script#0001
$('script:contains("#0001")').prev().click(function(){
alert('foo');
});</script><button>b</button><script>
//script#0002
$('script:contains("#0002")').prev().click(function(){
alert('bar'); });</script>
DON'T USE IT

Jquery fails in chrome extension if a page or website have already a version of jquery. I want Jquery Selector script

i want jquery selector script. but i don't want to use jquery library.
i am building a chrome extension. when i use jquery in extension so when it called in a page or website which is using already jquery then it fails. Don't tell me for jquery.conflict().
i want a library or script which performs like:
$("#some").val()
$("some").val()
$(".some").val()
Atleast all possible functions, or minimum setAttributeValue()
I think you got it what i want...
Just use the native .querySelector() or .querySelectorAll() methods to select the elements, then use the native .value property or getAttribute() method to retrieve what you need. Loading a library for this is like cracking a nut with a sledgehammer.

Categories

Resources