Merge pull request #303 from thomome/htmlElement-matches

feat: add matches method to HTMLElement

Author: taoqf

README.md

@@ -115,6 +115,7 @@ class HTMLElement{
 	this removeWhitespace()
 	Node[] querySelectorAll(string selector)
 	Node querySelector(string selector)
+	boolean matches(string selector)
 	HTMLElement[] getElementsByTagName(string tagName)
 	Node closest(string selector)
 	Node appendChild(Node node)
@@ -209,6 +210,10 @@ Note: Full range of CSS3 selectors supported since v3.0.0.
 
 Query CSS Selector to find matching node. `null` if not found.
 
+### matches(selector)
+
+Tests whether the node matches a given CSS selector.
+
 ### getElementsByTagName(tagName)
 
 Get all elements with the specified tagName.

src/nodes/html.ts

@@ -1,4 +1,4 @@
-import { selectAll, selectOne } from 'css-select';
+import { is, selectAll, selectOne } from 'css-select';
 import he from 'he';
 import arr_back from '../back';
 import Matcher from '../matcher';
@@ -498,6 +498,18 @@ export default class HTMLElement extends Node {
 		});
 	}
 
+	/**
+	 * Tests whether the node matches a given CSS selector.
+	 * @param  {string}   selector Simplified CSS selector
+	 * @return {boolean}
+	 */
+	public matches(selector: string): boolean {
+		return is(this as HTMLElement, selector, {
+			xmlMode: true,
+			adapter: Matcher,
+		});
+	}
+
 	/**
 	 * find elements by their tagName
 	 * @param {string} tagName the tagName of the elements to select

test/tests/html.js

@@ -789,6 +789,23 @@ describe('HTML Parser', function () {
 				root.children.length.should.eql(3);
 			});
 		});
+
+		describe('#matches', () => {
+			it('`HTMLElement` should match CSS selector', () => {
+				const html = parseHTML(`<div class="example-class" data-test="example-data" id="example-id"></div>`);
+				html.firstChild.matches('.example-class').should.be.true();
+				html.firstChild.matches('#example-id').should.be.true();
+				html.firstChild.matches('div').should.be.true();
+				html.firstChild.matches('[data-test="example-data"]').should.be.true();
+			});
+			it('`HTMLElement` should not match CSS selector ', () => {
+				const html = parseHTML(`<div></div>`);
+				html.firstChild.matches('.no-match').should.be.false();
+				html.firstChild.matches('#no-match').should.be.false();
+				html.firstChild.matches('span').should.be.false();
+				html.firstChild.matches('[data-test="no-match"]').should.be.false();
+			});
+		});
 	});
 
 	describe('stringify', function () {