【Node.js/React #1】querySelectorAll("*")

jQuery All Selector("*"), Native All Selector("*")의 React버전이다.

 

"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.8.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

---

1. Example

import React from 'react';
import './AllSelector.css'



export default function() {
  const allElements = React.useRef();

  const findAllElements = () => {
    const elements = document.querySelectorAll("*");
    let tagNames = "";

    for(let i = 0; i < elements.length; i++) {
      if(i > 0) tagNames += "<br/>";
      tagNames += elements[i].tagName;
    }

    allElements.current.innerHTML = tagNames;
  }
  
  return (
    <div id="jn-all-selector">
      <p>This is a box in yellow</p>
      <div className="box1">box1</div>
      <br/>
      <p>This is a box in green</p>
      <div className="box2">box2</div>
      <hr/>
			<h4>All Elements</h4>
			<div ref={allElements}>
			</div>	
			<br/>
			<br/>
			<button
        name="btn-find"
        style={{borderStyle:"solid"}}
        onClick={() => findAllElements()}
        >document.querySelectorAll("*")</button>
		  <hr/>
	  </div>
  );
}

---

2. Result

{To Do: I will upload in a few days}

---

3. Source

AllSelector.css

0.00MB

AllSelector.js

0.00MB

---

4. See also

【jQuery/Selector #1】 - All Selector (“*”)

【jQuery/Selector #1】 - All Selector (“*”)

【JavaScript/Native #1】querySelectorAll("*")

【JavaScript/Native #1】querySelectorAll("*")