prof3ssorSt3v3/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>textContent vs innerText</title>
    <link rel="stylesheet" href="main.css" />
    <style>
      p:nth-of-type(2) {
        opacity: 0.5;
        /* display: none; */
        visibility: hidden;
      }
    </style>
    <script>
      console.log('hello from the document.head');
      console.log('Nodes have a textContent property');
    </script>
  </head>
  <body>
    <script>
      console.log('hello from the document.body');
      console.log('Elements have an innerText property');
    </script>
    <style>
      main {
        border-top: 1px solid orangered;
      }
    </style>
    <header>
      <h1>textContent vs innerText</h1>
    </header>
    <main>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea placeat porro delectus quisquam aliquam nulla laboriosam blanditiis deleniti, architecto, cumque consequatur maxime, exercitationem
        <!-- this is a comment inside the first paragraph -->
        at excepturi.
        <span>Accusantium cupiditate atque reiciendis nobis!</span>
      </p>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
        <li>item 7</li>
        <li>item 8</li>
        <li>item 9</li>
        <li>item 10</li>
      </ul>
      <p>
        Maiores quia earum beatae facere. Vero fugiat modi reprehenderit dolore cupiditate porro aliquid at unde ea laborum perspiciatis cum non est similique voluptatem, iste tempore nobis molestias
        <![CDATA[ this is CDATA inside the second paragraph. ]]> ex, libero dicta?
      </p>
      <p>
        Adipisci corporis fugit possimus cumque tempora blanditiis asperiores amet quae illo, soluta perspiciatis reiciendis deserunt a nulla doloribus mollitia minus numquam? Quos non iste rem
        excepturi error sit ea esse?
      </p>
      <p>
        Tempore dignissimos praesentium exercitationem quas quisquam magnam velit dolore. Impedit cumque corporis autem aliquam? Impedit saepe modi non recusandae sit odio laboriosam ut dolores sequi
        incidunt neque, nisi deleniti placeat?
      </p>
    </main>
    <script src="main.js" type="module"></script>
  </body>
</html>

## main.css
* {
  box-sizing: border-box;
  margin: 0;
  font-weight: 300;
}
html {
  font-size: 30px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color-scheme: dark light;
}
body {
  padding: 0;
  min-height: 100vh;
}
header,
main {
  padding: 1rem 4rem;
  max-width: 1200px;
  margin-inline: auto;
}
p {
  margin-block: 1rem;
  line-height: 1.6;
}
li {
  line-height: 1.6;
}

## main.js
const log = console.log;
const p1 = document.querySelector('main > p');
const ul = document.querySelector('main > ul');
const p2 = document.querySelector('main > p:nth-of-type(2)');
const script = document.head.querySelector('script');
const style = document.head.querySelector('style');

// log(document.head.textContent);
// log(document.head.innerText);

// log(p1.textContent);
// log(p1.innerText);

// log(ul.textContent);
// log(ul.innerText);

log(p2.textContent);
log(p2.innerText);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>textContent vs innerText</title>
	<link rel="stylesheet" href="main.css" />
	<style>
	p:nth-of-type(2) {
	opacity: 0.5;
	/* display: none; */
	visibility: hidden;
	}
	</style>
	<script>
	console.log('hello from the document.head');
	console.log('Nodes have a textContent property');
	</script>
	</head>
	<body>
	<script>
	console.log('hello from the document.body');
	console.log('Elements have an innerText property');
	</script>
	<style>
	main {
	border-top: 1px solid orangered;
	}
	</style>
	<header>
	<h1>textContent vs innerText</h1>
	</header>
	<main>
	<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea placeat porro delectus quisquam aliquam nulla laboriosam blanditiis deleniti, architecto, cumque consequatur maxime, exercitationem
	<!-- this is a comment inside the first paragraph -->
	at excepturi.
	<span>Accusantium cupiditate atque reiciendis nobis!</span>
	</p>
	<ul>
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	<li>item 4</li>
	<li>item 5</li>
	<li>item 6</li>
	<li>item 7</li>
	<li>item 8</li>
	<li>item 9</li>
	<li>item 10</li>
	</ul>
	<p>
	Maiores quia earum beatae facere. Vero fugiat modi reprehenderit dolore cupiditate porro aliquid at unde ea laborum perspiciatis cum non est similique voluptatem, iste tempore nobis molestias
	<![CDATA[ this is CDATA inside the second paragraph. ]]> ex, libero dicta?
	</p>
	<p>
	Adipisci corporis fugit possimus cumque tempora blanditiis asperiores amet quae illo, soluta perspiciatis reiciendis deserunt a nulla doloribus mollitia minus numquam? Quos non iste rem
	excepturi error sit ea esse?
	</p>
	<p>
	Tempore dignissimos praesentium exercitationem quas quisquam magnam velit dolore. Impedit cumque corporis autem aliquam? Impedit saepe modi non recusandae sit odio laboriosam ut dolores sequi
	incidunt neque, nisi deleniti placeat?
	</p>
	</main>
	<script src="main.js" type="module"></script>
	</body>
	</html>
	* {
	box-sizing: border-box;
	margin: 0;
	font-weight: 300;
	}
	html {
	font-size: 30px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color-scheme: dark light;
	}
	body {
	padding: 0;
	min-height: 100vh;
	}
	header,
	main {
	padding: 1rem 4rem;
	max-width: 1200px;
	margin-inline: auto;
	}
	p {
	margin-block: 1rem;
	line-height: 1.6;
	}
	li {
	line-height: 1.6;
	}
	const log = console.log;
	const p1 = document.querySelector('main > p');
	const ul = document.querySelector('main > ul');
	const p2 = document.querySelector('main > p:nth-of-type(2)');
	const script = document.head.querySelector('script');
	const style = document.head.querySelector('style');

	// log(document.head.textContent);
	// log(document.head.innerText);

	// log(p1.textContent);
	// log(p1.innerText);

	// log(ul.textContent);
	// log(ul.innerText);

	log(p2.textContent);
	log(p2.innerText);