---

در دنیای توسعه وب، تعامل با عناصر HTML و استخراج مقادیر آنها یک کار اساسی است. چه در حال ساختن یک فرم، واکشی داده یا دستکاری محتوا هستید، دانستن چگونگی بدست آوردن مقادیر عناصر با استفاده از جاوا اسکریپت ضروری است. در این پست وبلاگ، روش‌های مختلفی را برای رسیدن به این هدف بررسی خواهیم کرد که هر کدام موارد استفاده و مزایای خاص خود را دارند.

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.