---

في عالم تطوير الويب، يعد التفاعل مع عناصر HTML واستخراج قيمها مهمة أساسية. سواء كنت تقوم بإنشاء نموذج، أو جلب البيانات، أو التعامل مع المحتوى، فإن معرفة كيفية الحصول على قيم العناصر باستخدام JavaScript أمر ضروري. في منشور المدونة هذا، سنستكشف طرقًا مختلفة لتحقيق ذلك، ولكل منها حالات الاستخدام والمزايا الخاصة بها.

1. استخدام getElementById

تعد الطريقة getElementById واحدة من أسهل الطرق للحصول على قيمة العنصر. إنه يستهدف عنصرًا من خلال السمة الفريدة id.

مثال:

<input type="text" id="username" value="useotools">
<button onclick="getUsername()">Get Username</button>

<script>
function getUsername() {
    const usernameElement = document.getElementById('username');
    const usernameValue = usernameElement.value;
    alert(usernameValue);
}
</script>

توضيح:

• تسترد الطريقة getElementById العنصر بالرمز id المحدد.
• يتم بعد ذلك استخدام الخاصية value للحصول على قيمة عنصر الإدخال.

2. استخدام querySelector

تتيح لك الطريقة querySelector تحديد العناصر باستخدام محددات CSS. تقوم بإرجاع العنصر الأول الذي يطابق المحدد.

مثال:

<input type="text" class="user-input" value="welcome to usetoools">
<button onclick="getUserInput()">Get Input</button>

<script>
function getUserInput() {
    const inputElement = document.querySelector('.user-input');
    const inputValue = inputElement.value;
    alert(inputValue);
}
</script>

توضيح:

• يستخدم querySelector محدد CSS للعثور على العنصر المطابق الأول.
• تقوم الخاصية value باسترداد قيمة عنصر الإدخال.

3. استخدام getElementsByClassName

تقوم الطريقة getElementsByClassName بإرجاع مجموعة من العناصر باسم الفئة المحدد. يمكنك بعد ذلك الوصول إلى قيمة عنصر معين ضمن هذه المجموعة.

مثال:

<input type="text" class="user-input" value="Hello">
<input type="text" class="user-input" value="World">
<button onclick="getUserInputs()">Get Inputs</button>

<script>
function getUserInputs() {
    const inputElements = document.getElementsByClassName('user-input');
    for (let i = 0; i < inputElements.length; i++) {
        alert(inputElements[i].value);
    }
}
</script>

توضيح:

• getElementsByClassName يُرجع مجموعة من العناصر باسم الفئة المحدد.
• يتم استخدام حلقة للتكرار خلال المجموعة واسترداد قيمة كل عنصر.

4. استخدام getElementsByTagName

تقوم الطريقة getElementsByTagName بإرجاع مجموعة من العناصر باسم العلامة المحدد. تكون هذه الطريقة مفيدة عندما تحتاج إلى الحصول على قيم من عناصر متعددة من نفس النوع.

مثال:

<input type="text" name="user" value="Useo">
<input type="text" name="user" value="Tools">
<button onclick="getUserNames()">Get Names</button>

<script>
function getUserNames() {
    const inputElements = document.getElementsByTagName('input');
    for (let i = 0; i < inputElements.length; i++) {
        alert(inputElements[i].value);
    }
}
</script>

توضيح:

• getElementsByTagName يُرجع مجموعة من جميع عناصر input.
• يتم استخدام حلقة للتكرار خلال المجموعة واسترداد قيمة كل عنصر إدخال.

5. استخدام getAttribute

تتيح لك الطريقة getAttribute استرداد قيمة سمة معينة لعنصر ما. يكون هذا مفيدًا عندما تحتاج إلى الحصول على سمات غير قياسية أو سمات بيانات مخصصة.

مثال:

<div id="user-info" data-name="Useotools.com"></div>
<button onclick="getUserInfo()">Get Info</button>

<script>
function getUserInfo() {
    const userInfoElement = document.getElementById('user-info');
    const userName = userInfoElement.getAttribute('data-name');
    alert(userName);
}
</script>

توضيح:

• getAttribute يسترد قيمة السمة data-name.
• هذه الطريقة مفيدة بشكل خاص للسمات المخصصة.

6. استخدام innerHTML وtextContent

بالنسبة للعناصر التي تحتوي على محتوى نصي، يمكنك استخدام innerHTML أو textContent للحصول على المحتوى.

مثال:

<p id="message">Welcome to Useotools!</p>
<button onclick="getMessage()">Get Message</button>

<script>
function getMessage() {
    const messageElement = document.getElementById('message');
    const messageText = messageElement.textContent;
    alert(messageText);
}
</script>

توضيح:

• textContent يسترد المحتوى النصي للعنصر.
• هذه الطريقة مفيدة للعناصر التي تحتوي على نص بسيط.

خاتمة

Mastering the various methods to get element values in JavaScript is crucial for effective web development. Whether you're working with form inputs, custom attributes, or text content, these methods provide the flexibility and power you need to interact with your HTML elements dynamically. By understanding and applying these techniques, you can enhance your web applications and create more interactive user experiences.