<div id="box" class="card active">مرحباً</div>
<div class="card">بالعالم</div>
<p class="card">JS</p>

<script>
const byId = document.getElementById('box');
console.log('byId:', byId.textContent);

const byClass = document.getElementsByClassName('card');
console.log('عدد byClass:', byClass.length);

const byTag = document.getElementsByTagName('p');
console.log('byTag:', byTag[0].textContent);

const first = document.querySelector('.card');
console.log('querySelector:', first.textContent);

const all = document.querySelectorAll('.card');
console.log('عدد querySelectorAll:', all.length);
</script>

<div id="safe"></div>
<div id="danger"></div>

<script>
const safe = document.getElementById('safe');
safe.textContent = '<b>هذا لن يكون عريضاً</b>';

const danger = document.getElementById('danger');
danger.innerHTML = '<b>هذا سيكون عريضاً</b>';
</script>

<a id="link" href="https://example.com" target="_blank">رابط مثال</a>

<script>
const link = document.getElementById('link');

console.log('href:', link.getAttribute('href'));

link.setAttribute('href', 'https://mdn.io');
link.setAttribute('title', 'انقر للذهاب إلى MDN');

link.removeAttribute('target');

console.log('بعد التعديل:', link.getAttribute('href'));
</script>

<ul id="list">
  <li>عنصر موجود</li>
</ul>

<script>
const list = document.getElementById('list');

const li = document.createElement('li');
li.textContent = 'عنصر مضاف حديثاً';
list.appendChild(li);

const li2 = document.createElement('li');
li2.textContent = 'مدرج في البداية';
list.insertBefore(li2, list.firstChild);
</script>

<ul id="fruits">
  <li>تفاح</li>
  <li>موز</li>
  <li>برتقال</li>
</ul>

<script>
const fruits = document.getElementById('fruits');

const banana = fruits.children[1];
const removed = fruits.removeChild(banana);
console.log('تمت إزالة:', removed.textContent);

const clone = fruits.cloneNode(true);
document.body.appendChild(clone);
console.log('تم استنساخ القائمة');
</script>