object.method() vs object.method in Javascript

Question

Im fairly new to JavaScript and I'm having difficulty in understanding this syntax.

document.querySelector('dice').style.display='none';

My understanding is we are calling the querySelector method on the document object - this returns a selection. Now we call the style method on this selection - this returns a style object. Next we change its display property to 'none' to hide it.

If this is correct, shouldn't it be .style().display = 'none'?

If indeed style is a method, shouldn't brackets be required when invoking it?

style is not a function neither is it a factory function, style is an object, with properties that enables you to manipulate the looks of any DOM object — 0.sh
– 0.sh, Commented Mar 20, 2018 at 5:38

Libin C Jacob · Accepted Answer · 2018-03-20 05:48:27Z

1

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

Note: The querySelector() method only returns the first element that matches the specified selectors. To return all the matches, use the querySelectorAll() method instead.

If the selector matches an ID in document that is used several times (Note that an "id" should be unique within a page and should not be used more than once), it returns the first matching element.

Click here to know more about query selector.

The 'style' property is used to apply some inline style to a dom element through the script. According to the example which you have mentioned,document.querySelector('dice').style.display='none'; that simply hide a first dom element 'dice'.

edited Mar 20, 2018 at 5:48

answered Mar 20, 2018 at 5:43

Libin C Jacob

1,1381 gold badge13 silver badges38 bronze badges

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

2 Comments

Kaiido Over a year ago

"name" in this context is confusing at best. Could you try to clarify it, because it will match a <dice> element, not a <foo name="dice">

Kaiido Over a year ago

Also, when you copy paste from external resources, it's required to cite your sources and good to mark it as citation (> The text in answers editor)

user8158111 · Accepted Answer · 2018-03-20 05:35:59Z

0

style is used in css. You shouldn't usestyle(). When you are typingelement.style.dispaly, you are allowing the browser to know that you want to change the css property of the element.

answered Mar 20, 2018 at 5:35

user8158111

Comments

CertainPerformance · Accepted Answer · 2018-03-20 05:36:22Z

0

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

While getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element...

It just happens to be accessed as a plain property that references an object, rather than a function that returns an object.

Also note

document.querySelector('dice')

probably isn't valid unless dice is a special HTML tag. You might be looking for .querySelector('.dice') (class selection) or .querySelector('$dice') (id selection) instead.

answered Mar 20, 2018 at 5:36

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Comments

Sandip Nirmal · Accepted Answer · 2018-03-20 05:39:14Z

0

Style is the property of the DOM Object and not the method.

So it is as good as using following syntax:

const person = {
  name: {
   first: 'ABC'
  }
}

person.name.first = 'CDE';

Which is similar to

document.querySelector('dice').style.display='none';

answered Mar 20, 2018 at 5:39

Sandip Nirmal

2,48923 silver badges25 bronze badges

Comments

illiteratewriter · Accepted Answer · 2018-03-20 05:57:44Z

0

document.querySelector() is a method. Which means it is a function which is stored as an object property. When you call the method document.querySelector('div') it returns the first div element in your document. The returned value will be an object which contains attributes from the object. Link to a jsBin that displays document.querySelector output.

So document.querySelector('div').style will display its styles. And you can take a particular value from it and change its style.

answered Mar 20, 2018 at 5:57

illiteratewriter

4,3532 gold badges26 silver badges46 bronze badges

Collectives™ on Stack Overflow

object.method() vs object.method in Javascript

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related