How to search for a topic about web api's on mdn?

MDN Learn
,
#1

Hi. I’m lost at the mdn web api’s. It’s looks like a method or property can be belongs to different interfaces at the same time. I can’t explain clearly the problem. I searched for play() metod and found it on two different pages. I apoliciea any suggest.

#2

Hi @yasinkarax

It’s less than it “belongs” to different APIs, but that these APIs are developed independently and therefore can have methods (or properties) with the same name.

This is how I would approach such a search (shown with your example of play()):

  • Search on MDN and find out that there are multiple play() methods.
  • Look at the titles in the search result. We see Animation and HTMLMediaElement. Now I can look at the code where I saw the play() method initially. Was it called from an animation object or a media element?
  • Maybe it’s unclear what for example HTMLMediaElement really is. So I would click the " HTMLMediaElement: play() method" search result and read the first paragraph:

    The HTMLMediaElement play() method attempts to begin playback of the media. It returns a Promise which is resolved when playback has been successfully started.

  • If this doesn’t give enough information to decide if that’s the correct play() method, I would proceed by clicking the HTMLMediaElement link in the above paragraph to learn more about what an HTMLMediaElement really is.
  • After these deeper investigation I’ll have the necessary information to decide which of the available play() methods is the one I want to learn more about.

I hope this helps. If you have any further questions, feel free to ask. :slightly_smiling_face:

See you,
Michael

1 Like
#3

I mean that some interfaces are child interface the another one and some of uses same methods and properties.
like that
x
I get confused sometimes searching for what I have to use. For example, let’s say we’re creating the first to-do app in history, so there is no sample to inspect. How can I decide which interface or API I have to use? How can I search?

#4

Ohh, I think I understand now…

Since children inherit the props and methods from their parent and are able to overwrite them, you should always look at the most specific interface. If you’re unsure about which interface is the child and which is the parent, The inheritance image you showed above helps to decide.
The boxes in the image are also clickable to directly get to the parent interface page. So if the prop or method is not present on an element page, you know that it didn’t overwrite it’s parent’s functionality and you can navigate to its parent and look there for the prop or method and so on.

Side note: If you’re interested in all the props and methods of an element (inherited, overwritten and own), you can console.log() an element to get them.

1 Like