diff --git a/README.md b/README.md index fce5833..0e30f56 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud). -_926 TILs and counting..._ +_927 TILs and counting..._ --- @@ -296,6 +296,7 @@ _926 TILs and counting..._ - [Accessing Arguments To A Function](javascript/accessing-arguments-to-a-function.md) - [Basic Date Formatting Without A Library](javascript/basic-date-formatting-without-a-library.md) - [Character Codes from Keyboard Listeners](javascript/character-codes-from-keyboard-listeners.md) +- [Check Classes On A DOM Element](javascript/check-classes-on-a-dom-element.md) - [Check If Something Is An Array](javascript/check-if-something-is-an-array.md) - [Check The Password Confirmation With Yup](javascript/check-the-password-confirmation-with-yup.md) - [Computed Property Names In ES6](javascript/computed-property-names-in-es6.md) diff --git a/javascript/check-classes-on-a-dom-element.md b/javascript/check-classes-on-a-dom-element.md new file mode 100644 index 0000000..92471d3 --- /dev/null +++ b/javascript/check-classes-on-a-dom-element.md @@ -0,0 +1,29 @@ +# Check Classes On A DOM Element + +You can use the [`classList` +property](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) +to check what classes have been assigned to a DOM element. + +Assuming the following DOM element: + +```html +
+``` + +Once you get a handle on that element, using your preferred method (e.g. +[`Document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)), +you can start inspecting the class list: + +```javascript +> element.classList.contains("modal") +true + +> element.classList.contains("hidden") +true + +> element.classList.contains("taco") +false + +> element.classList.toString() +"modal hidden" +```