We Keep Coding

Select all elements that don't start with a certain id

Is there a way to get all the elements that don't start with the id foo in JavaScript?
I tried the following:
var elements = document.querySelectorAll('[id!=foo]');
That doesn't work.
Basically I want the opposite of:
var elements = document.querySelectorAll('[id^=foo]');

Use the :not() selector:
document.querySelectorAll(":not([id^='foo'])");

You can use the :not pseudo selector to match everything except [id^="foo"]:
var elements = document.querySelectorAll(':not([id^=foo])');

Just select all and then filter out the one with the id
document.querySelectorAll("*").filter(...)

Select the child[ren] of an element as one would select the descendant[s]

Say I have an HTMLElement:
var hoop = otherLibrary.getHoop()
I can select its descentant[s] that are .stripey:
var stripedOnes = hoop.querySelectorAll('.stripey')
This is like the CSS rule:
#hoop .stripey {
However, how do I do the same for child[ren], without using jQuery?
var stripedChildren = hoop.querySelectorAll('> .stripey')
Doesn't work, although in jQuery/Sizzle it does. What would be the JS equivalent of this CSS rule?
#hoop > .stripey {

Well, the most straightforward way would be to use the full selector inside querySelectorAll()
document.querySelectorAll("#hoop > .stripey");
But, if answering your specific question...
I believe the fanciest way to select an element's children based on a selector is:
turn the .children collection into an array
Filter each element testing it against a selector using .matches()
So:
var hoop = document.getElementById("hoop");
var stripedChildren = [].slice.call(hoop.children).filter(function(element) {
return element.matches(".stripey");
});

You can use following -
document.querySelectorAll("#hoop > .stripey");

How can I combine these jQuery statements?

I have a jQuery statement like this;
var current = $(this);
current.hide();
current.siblings('.ab').hide();
current.siblings('.cd').hide();
I want to change this into a single statement and I wrote;
$(current,current.siblings('.ab'),current.siblings('.cd')).hide();
But ab is not hiding. How can I combine the 3 hide() statements into one?

You can use a multiple selector and addBack():
$(this).siblings(".ab, .cd").addBack().hide();
addBack() will add the original element back into the set, so you can get both the element and its relevant siblings in the same jQuery object.

You can use a multiple selector (comma separated) for the siblings function and than use addBack to include the first element.
Add the previous set of elements on the stack to the current set,
optionally filtered by a selector.
Code:
current.siblings(".ab, .cd").addBack().hide();

Try to use .end(),
current.siblings(".ab, .cd").hide().end().hide();
or use .add() like below,
current.add(current.siblings(".ab, .cd")).hide();

try this:
var current = $(this);
current.hide().siblings('.ab').hide().end().siblings('.cd').hide();

You can use comma separated multiple selectors in .siblings()
current.siblings('.cd,.ab').addBack().hide();
Working Demo

Selector ignoring elements contained in a specific element

I am currently working on a software plugin which scans a page for links in order to edit them. But there is a problem: I dont want to edit links that are contained in a specific element (in this case: an edit box). The elements contained in this edit box can also be nested, so parent might not be appropriate.
Is there any way to exclude elements via selector that are contained in a specific element?

You can run this plain JavaScript, it returns all elements with the matching pattern not in the container you specify.
var anchors = document.querySelectorAll('*:not(.editBox)>a.link');
Assuming your not wanted container has a class of "editBox" and you can change the matching "link" class to be any query selector you want, can be a plain 'a' for all anchor elements. I created a JSFiddle as a demo.

This doesn't all have to be on one selector. You could very simply use your regular selector to catch all the elements, and then execute a not() function to trim down the elements to only those you need.
var elems = $( "a" ); // all anchor links
elems = elems.not( ".ignore_me" ); // remove all links with the "ignore_me" class.
You could even combine these two into one command using function chaining:
var elems = $( "a" ).not( ".ignore_me" );
A third option that I feel is a little less readable would be something like this:
var elems = $( "a:not( .ignore_me )" );
References:
:not()
not()

can't get correct results from this jquery object

I have the following bit of javascript and have tried a number of different ways to get the text from the div with the class dvservicestitle, and any li tags in the div with the dvservicescontent class. Neither work and I'm not sure why. Anyone have an idea what's wrong with this code?
if (html == "") html = "<div class='dvservicestitle'>Our Services</div><div class='dvservicescontent'><ul></ul></div>";
var title = $(html).find(".dvservicestitle");
var elements = $("dvservicescontent li", $(html));

The reason is because the find() method finds children nodes on the current node. Your HTML variable IS the div that you are looking for so the find() method doesn't find it. You need to wrap it in another container.
html = "<div class='dvservicestitle'>Our Services</div><div class='dvservicescontent'><ul></ul></div>";
$(html).find(".dvservicestitle")
>> []
$(html).hasClass("dvservicestitle")
>> true
html = "<div><div class='dvservicestitle'>Our Services</div><div class='dvservicescontent'><ul></ul></div></div>"
$(html).find(".dvservicestitle")
>> [<div class=​"dvservicestitle">​Our Services​</div>​]

you can use:
var title = $(".dvservicestitle").text();
var elements = $(".dvservicescontent li").text();

.find searches descendants which you don't have. The div to search exists at top level, so it is one of the elements in the jQuery object.
Use .filter to filter the correct element:
$(html).filter(".dvservicestile").text();

var title = $(html).find(".dvservicestitle").html();
var elements = $(html).find('.dvservicescontent ul').children();