0

I'm not talking about jquery at all, but with jquery, it's easy to work with object. Like this:

$(selector)

So, selector can be: a string (can contain id, class name, tag name, attribute...) or an object. I called it: wrap the selector by $().

Can I do same thing with javascript (document.get(selector))?

I've made a function which accepts an HTML object. I want to change the style of it.

Html:

<div></div>

Script:

var changeCSS = function (selector) {
    // I DON'T WANT TO USE jQuery HERE

    // these function doesn't work to target the object (I'd tried)
    // because I'm not sure the selector has an id, class name... or not

    // document.getElementById
    // document.getElementsByClassName
    // document.getElementsByName
    // document.getElementsByTagName
    // document.querySelector

    // my goal looks like: (wrap the selector by 'get' function)
    selector = document.get(selector);

    selector.style.width = '100px';
    selector.style.height = '100px';
};

let selector = $('div')[0]; // not contain id, class name...
changeCSS(selector);

In my project, changeCSS is a plugin, it doesn't require jquery before using. But I've used jquery in another place.

Totally, I want to know how can I convert (an HTML object, not a string)

<div></div>

to a selector?

Thank you!

Improve this question
7
  • 2
    The only reason you would want to do this is because you have a bad design. Or what is the reason that this element has no class or id? Commented Jul 18, 2017 at 12:58
  • 1
    @HerrDerb So, why must an HTML element have an id or a class name? Commented Jul 18, 2017 at 12:59
  • So you can address it. Why do we have names? Commented Jul 18, 2017 at 13:00
  • @clone is it possible to recognize you without your name??? Commented Jul 18, 2017 at 13:00
  • I want to select every paragraph inside a given article. Why should I have to make them members of a class in order to describe them? "p descendants of an article with the id foo" is quite sufficient. Commented Jul 18, 2017 at 13:01

2 Answers 2

Reset to default
1

The querySelector and querySelectorAll methods accept a string containing a selector and return an Element or non-live NodeList respectively.

You can call them on document or an element object.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I'd tried to use querySelector with $('div')[0]. It logged: Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '[object HTMLBodyElement]' is not a valid selector.
@clone — The argument you pass must, as I said, be a string containing a selector. You seem to be passing your <body> element. That isn't a string.
So, must have an id or a class name, you mean. Thanks!
@clone — No. You can use any selector (including ones which include combinators).
If you already have an element … then you don't need to get the element. You already have it.
|
0

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

If you are trying to replicate the selector functionality of jQuery:

document.querySelector(.class or tag or #id);
Improve this answer

3 Comments

querySelector has nothing to do with ES5
but with jquery, I can target $($('div')[0]). $('div')[0] is an HTML element, not a string.
@Quentin my mistake

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.