<body>
<div class="content">
<h2 class="title-1">Cat-1</h2>
<ul class="list-1">
<li>Ragdoll</li>
<li>British Shorthair</li>
<li>Scottish Fold</li>
<li>Bengal</li>
<li>Siamese</li>
<li>Maine Coon</li>
<li>American Shorthair</li>
<li>Russian Blue</li>
</ul>
<h2 class="title-2">Cat-2</h2>
<ul class="list-2">
<li>Ragdoll</li>
<li>British Shorthair</li>
<li>Scottish Fold</li>
<li>Bengal</li>
<li>Siamese</li>
<li>Maine Coon</li>
<li>American Shorthair</li>
<li>Russian Blue</li>
</ul>
</div>
<script src="/script.js"></script>
</body>
const myTag = document.querySelector('.content');
const catList = document.querySelector('.list-1');
console.log(myTag);
console.log(myTag.parentElement);
console.log(myTag.children[1]);
console.log(myTag.firstElementChild);
console.log(myTag.lastElementChild);
console.log(myTag.previousElementSilbling);
console.log(myTag.nextElementSibling);
console.log(catList.parentElement.nextElementSibling);
<div class="content">...</div>
<body>...</body>
<h2 class="title-1">Cat-1</h2>
<ul class="list-1">...</ul>
undefined
null
<script src="/script.js"></script>
<script src="/script.js"></script>