CODEWITHSUNDEEP
javascript
user7739271
user7739271

Reputation:

How to assign to an HTML element without knowing id/class/tag in javascript?

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!

Upvotes: 0

Views: 128

Answers (2)

Lars Peterson
Lars Peterson

Reputation: 1508

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);

Upvotes: 0

Quentin
Quentin

Reputation: 943207

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.

Upvotes: 1

Related Questions