Prototype type safe query selector

src/DOMAPI/Document.res

@@ -86,6 +86,17 @@ Returns the first element that is a descendant of node that matches selectors.
 @send
 external querySelector: (document, string) => Null.t<element> = "querySelector"
 
+/**
+Invoke querySelector and checks if the element is an HTMLHeadingElement.
+[Read more on MDN](https://developer.mozilla.org/docs/Web/API/Document/querySelector)
+*/
+let querySelectorAsHeading = (document, selector): option<htmlHeadingElement> => {
+  switch querySelector(document, selector) {
+  | Value(element) if HTMLHeadingElement.isInstanceOf(element) => Some(element->Obj.magic)
+  | _ => None
+  }
+}
+
 /**
 Returns all element descendants of node that match selectors.
 [Read more on MDN](https://developer.mozilla.org/docs/Web/API/Document/querySelectorAll)

src/DOMAPI/HTMLHeadingElement.res

@@ -3,3 +3,12 @@ open DOMAPI
 include HTMLElement.Impl({
   type t = htmlHeadingElement
 })
+
+let isInstanceOf = (_: 't): bool => %raw(`param instanceof HTMLHeadingElement`)
+
+let tryParse = (element: 't): option<htmlHeadingElement> =>
+  if isInstanceOf(element) {
+    Some(element->Obj.magic)
+  } else {
+    None
+  }

tests/DOMAPI/QuerySelector__test.res

@@ -0,0 +1,14 @@
+// Option 1
+Global.document
+->Document.querySelectorAsHeading("h2")
+->Option.forEach(heading => {
+  heading.style.color = "red"
+})
+
+// Option 2
+Global.document
+->Document.querySelectorAsHeading("h2")
+->Option.flatMap(HTMLHeadingElement.tryParse)
+->Option.forEach(heading => {
+  heading.style.color = "red"
+})