const element = document.getElementById('myId');
console.log(element);

const elements = document.getElementsByClassName('myClass');
console.log(elements); // HTMLCollection

const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs);

// انتخاب اولین عنصر
const firstElement = document.querySelector('.myClass');

// انتخاب همه عناصر
const allElements = document.querySelectorAll('.myClass');

// تغییر متن
element.textContent = "متن جدید";

// تغییر HTML
element.innerHTML = "<strong>متن ضخیم</strong>";

// دریافت محتوا
const content = element.textContent;

// تنظیم ویژگی
element.setAttribute('class', 'new-class');
element.setAttribute('data-id', '123');

// دریافت ویژگی
const className = element.getAttribute('class');

// حذف ویژگی
element.removeAttribute('data-id');

// بررسی وجود ویژگی
if (element.hasAttribute('class')) {
    console.log('کلاس دارد');
}

// اضافه کردن کلاس
element.classList.add('new-class');

// حذف کلاس
element.classList.remove('old-class');

// تغییر وضعیت کلاس
element.classList.toggle('active');

// بررسی وجود کلاس
if (element.classList.contains('active')) {
    console.log('کلاس active دارد');
}

// تغییر رنگ
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';

// تغییر اندازه
element.style.width = '200px';
element.style.height = '100px';

// تغییر موقعیت
element.style.position = 'absolute';
element.style.top = '50px';
element.style.left = '100px';

// چندین استایل همزمان
Object.assign(element.style, {
    color: 'blue',
    fontSize: '18px',
    fontWeight: 'bold'
});

const computedStyle = window.getComputedStyle(element);
const color = computedStyle.color;
const fontSize = computedStyle.fontSize;

console.log('رنگ فعلی:', color);
console.log('اندازه فونت:', fontSize);

// ایجاد عنصر جدید
const newDiv = document.createElement('div');
newDiv.textContent = 'عنصر جدید';
newDiv.className = 'new-element';

// ایجاد عنصر با HTML
const container = document.createElement('div');
container.innerHTML = `
    <h3>عنوان</h3>
    <p>این یک پاراگراف است</p>
`;

// اضافه کردن به صفحه
document.body.appendChild(newDiv);

// اضافه کردن به عنصر خاص
const parent = document.getElementById('container');
parent.appendChild(container);

const parent = document.getElementById('parent');
const newElement = document.createElement('p');
newElement.textContent = 'پاراگراف جدید';

// اضافه کردن در انتها
parent.appendChild(newElement);

// اضافه کردن در ابتدا
parent.insertBefore(newElement, parent.firstChild);

// اضافه کردن قبل از عنصر خاص
const referenceElement = document.getElementById('reference');
parent.insertBefore(newElement, referenceElement);

// اضافه کردن با insertAdjacentHTML
parent.insertAdjacentHTML('beforeend', '<p>HTML جدید</p>');

// حذف عنصر
element.remove();

// حذف از والد
parent.removeChild(element);

// حذف همه فرزندان
parent.innerHTML = '';

// حذف با شرط
const items = document.querySelectorAll('.item');
items.forEach(item => {
    if (item.textContent.includes('حذف')) {
        item.remove();
    }
});

const element = document.getElementById('myElement');

// والد
const parent = element.parentElement;
const parentNode = element.parentNode;

// فرزندان
const children = element.children; // HTMLCollection
const childNodes = element.childNodes; // NodeList (شامل text nodes)
const firstChild = element.firstElementChild;
const lastChild = element.lastElementChild;

// خواهر و برادر
const nextSibling = element.nextElementSibling;
const prevSibling = element.previousElementSibling;

// جستجو در فرزندان
const childElement = parent.querySelector('.child-class');
const allChildren = parent.querySelectorAll('.child-class');

// جستجو در والدین
function findParentWithClass(element, className) {
    let current = element.parentElement;
    while (current && !current.classList.contains(className)) {
        current = current.parentElement;
    }
    return current;
}

// استفاده
const parentWithClass = findParentWithClass(element, 'container');

// دریافت مقدار input
const nameInput = document.getElementById('name');
const name = nameInput.value;

// تنظیم مقدار
nameInput.value = 'نام جدید';

// کار با checkbox
const checkbox = document.getElementById('agree');
const isChecked = checkbox.checked;
checkbox.checked = true;

// کار با select
const select = document.getElementById('country');
const selectedValue = select.value;
const selectedText = select.options[select.selectedIndex].text;

function validateForm() {
    const form = document.getElementById('myForm');
    const inputs = form.querySelectorAll('input[required]');
    let isValid = true;
    
    inputs.forEach(input => {
        if (input.value.trim() === '') {
            input.style.borderColor = 'red';
            isValid = false;
        } else {
            input.style.borderColor = '';
        }
    });
    
    return isValid;
}

// استفاده
if (validateForm()) {
    console.log('فرم معتبر است');
} else {
    console.log('لطفا فیلدهای ضروری را پر کنید');
}

// کش کردن عناصر
const elements = {
    container: document.getElementById('container'),
    button: document.querySelector('.submit-btn'),
    inputs: document.querySelectorAll('input')
};

// تابع امن برای دستکاری DOM
function safeUpdateElement(selector, content) {
    const element = document.querySelector(selector);
    if (element) {
        element.textContent = content;
        return true;
    }
    console.warn(`عنصر با selector "${selector}" پیدا نشد`);
    return false;
}

// استفاده
safeUpdateElement('#status', 'بروزرسانی شد');

// تابع برای ایجاد عنصر با ویژگی‌ها
function createElement(tag, attributes = {}, content = '') {
    const element = document.createElement(tag);
    
    Object.entries(attributes).forEach(([key, value]) => {
        if (key === 'className') {
            element.className = value;
        } else {
            element.setAttribute(key, value);
        }
    });
    
    if (content) {
        element.textContent = content;
    }
    
    return element;
}

// استفاده
const newButton = createElement('button', {
    className: 'btn btn-primary',
    'data-action': 'submit',
    id: 'submitBtn'
}, 'ارسال');