Develop Reference

Combe Multiple JS Selectors with jQuery Selector

I am selecting a group of table rows by using the following line of JS:
document.getElementById('tab1_content').contentDocument.documentElement.getElementsByClassName("data1_smaller")
These represent entries in a table of contents. I want to return only those above which also contain the word 'CHAPTER', so I was attempting to use the jQuery :contains() selector to accomplish this and attempted to convert the entire thing into a single jQuery selector; so, to begin with, I tried converting the following invalid line:
document.getElementById('tab1_content').contentDocument.documentElement.getElementsByClassName("data1_smaller").$(":contains('CHAPTER')")
to this:
$("#tab1_content > contentDocument > documentElement > .data1_smaller:contains('CHAPTER')")
The selector above doesn't give an error but it fails to find anything. Does anybody know the correct way to do this?

You can achieve what you want with pure vanilla js just like you tried in the beginning. You just need to do some small adjustments to your code. You can use querySelectorAll() to query all elements matching a selector inside your ID. Something like this should work just by looking at your example, but might need some small adjustments.
[...document.getElementById('tab1_content').querySelectorAll(".data1_smaller")].filter((node) => node.textContent.includes('CHAPTER'))
// Edit, saw in the comments that you're accessing content in an iframe
[...document.getElementById('tab1_content').contentWindow.document.querySelectorAll(".data1_smaller")].filter((node) => node.textContent.includes('CHAPTER'))

I found this solution based on Anurag Srivastava's comments:
$("#tab1_content").contents().find(".data1_smaller:contains('CHAPTER')")
The issue was that I was trying to select things that are inside of an iframe and the the .contentDocument.documentElement that I used to access the iframe in JS has to be changed to .contents() in jQuery in order for it to work.

Neither contentDocument or documentElement are valid HTML tags. Try to select by id or class name.

Puppeteer.js : get href attribute of link with given text

is there a way in puppeteer to get the href attribute of an anchor element with text "See more".
I want to grab the href attribute of an element like this:
See more
maybe it's possble to do with eval?

you could try looping through all links
document.querySelectorAll('a').forEach(link => link.innerText === "See more" )
This might not work with newer JavaScript versions since querySelectorAll as well as getElementsByTagName do not yield an Array but HTMLCollection which is not iterable using forEach. See the linked answers on SO on how to fix this.

maybe you should try native js
url=document.getElementById("Id_of_AnchorTag").href;
keep in mind that you must be able to uniquely identify the anchor by some method.

How to access elements from a certain form and certain type with jquery

so I have a page with multiple forms and I would like to be able to access input elements of type="datetime" within a particular form. I know I can do $('input[type="datetime"]') but that would give me all input tags on the page. I also cannot use the "form" attribute because not all browser use it (Sigh IE). Worse scenario for me is to do something like:
$(document.forms["..."].elements).each(function() {
if (this.type="datetime") {.....}
});
but I am sure this can be done in jQuery with one selector. Can someone tell me how do this with one selector?

Add id to your form and then select DOM inside of that form as below.
$('#form input[type="datetime"]')

Without seeing some HTML this is just a shot in the dark. But if you give your forms an id you can do:
$("#yourFormId input[type='datetime']");
If you do not have ids, but you know the number, then this might do it:
$("form:eq(4) input[type='datetime']");

There are multiple ways to do it
Solution 1.
use descendant selector
ex:
$('#yourform input[type="datetime"]') //or
$('.yourform input[type="datetime"]') //or
$('form:eq(3) input[type="datetime"]')
Solution 2:
Use context based look up
Ex:
$('input[type="datetime"]', yourform)

Replace part of innerHTML without reloading embedded videos

I have a div with id #test that contains lots of html, including some youtube-embeds etc.
Somewhere in this div there is this text: "[test]"
I need to replace that text with "(works!)".
The normal way of doing this would of course be:
document.getElementById("test").innerHTML = document.getElementById("test").replace("[test]","(works!)");
But the problem is that if i do that the youtube-embeds will reload, which is not acceptable.
Is there a way to do this?

You will have to target the specific elements rather than the parent block. Since the DOM is changing the videos are repainted to the DOM.

Maybe TextNode (textContent) will help you, MSDN documentation IE9, other browsers also should support it

Change your page so that
[test]
becomes
<span id="replace-me">[test]</span>
now use the following js to find and change it
document.getElementById('replace-me').text = '(works!)';
If you need to change more than one place, then use a class instead of an id and use document.getElementsByClassName and iterate over the returned elements and change them one by one.
Alternatively, you can use jQuery and do it even simpler like this:
$('#replace-me').text('(works!)');
Now for this single replacement using jQuery is probably overkill, but if you need to change multiple places (by class name), jQuery would definitely come in handy :)

How to select only links without `#`?

I want to select only links that do not contain anchors, like #. How do I do that?

This will select all anchors whose href attribute does not begin with #.
$('a:not([href^="#"]');
It could be a slow selector. Are you using it only once or multiple times? You can speed it up a little like:
$('a').not('[href^="#"]');
If you also do not want to select anchors which contain a #anywhere, rather than just the beginning you can change the ^ to a *. But this will also not select links that reload the browser (going to a different page and then to a named anchor on that page). I don't think that's want you want, but I'm not positive now.

I'm so surprised by all the fast answers, as most of them don't actually do what was asked for.
$('a:not([href*="#"])');
Should select links that don't contain "anchors" or as I assume OP meant: in-page anchor/id tags.

Try this:
$(':not(a[href*="#"]));
This will be faster (and will select only anchors as well):
$('a:not([href*="#"])');

Use this code:
If you want to filter href="#":
$('a[href!="#"]')
Otherwise:
$('a').filter(function(){
return !/#/.test(this.href);//you can filter what you do not want with the regex
})