اولین تابع برای دسترسی به عنصرها، استفاده از اسم تگ هاست. این تابع اسم تگ را به عنوان ورودی می گیرد. برای مثلا برای انتخاب تگ های p از کد:
document.getElementsByTagName("p")
استفاده می کنیم. توجه کنید که این تابع آرایه ای از تگ های مورد نظر را برمی گرداند.
مثال:
<p id="text">Click the button to change me.</p>
<button onclick="changeText()">click me</button>
<script>
function changeText() {
document.getElementsByTagName("p")[0].innerHTML = "I am changed";
}
</script>
اگر بخواهیم عناصر را با استفاده از اسم آی دی آن ها انتخاب کنیم از این تابع استفاده می کنیم. این تابع (اسم) آی دی را به عنوان ورودی می گیرد و یک عنصر را برمی گرداند.
مثال:
<p id="text">Please READ ME.</p>
<button onclick="read()">click me</button>
<script>
function read() {
document.getElementById("text").style.fontSize = "40px";
}
</script>
اگر بخواهیم عناصر را با استفاده از اسم کلاس آن ها انتخاب کنیم از این تابع استفاده می کنیم. این متد اسم کلاس را به عنوان ورودی می گیرد و آرایه ای از عنصرها را برمی گرداند.
مثال:
<p>This is an <span class="important">important</span> announcement.</p>
<p>Please <span class="important">pay attention</span>.</p>
<p>Please read this <span class="important">carefully</span>.</p>
<button onclick="attention()">pay attention</button>
<script>
function attention() {
let x = document.getElementsByClassName("important");
for(let i = 0; i < x.length; i++) {
x[i].style.color = "red";
}
}
</script>
برای این که عناصر را با کمک سلکتورهای CSS انتخاب کنیم از این متد استفاده می کنیم. این متد سلکتور انتخابی را به عنوان ورودی می گیرد و آرایه ای از عناصر را به عنوان خروجی برمی گرداند.
مثال:
<div class="row">
<div class="col-1">col-1</div>
<div class="col-2">col-2</div>
<div class="col-1">col-1</div>
<div class="col-1">col-1</div>
<div class="col-3">col-3</div>
</div>
<button onclick="oneline()">Line the DIVs</button>
<script>
function oneline() {
var elms = document.querySelectorAll('[class^="col-"]');
for(let i = 0; i < elms.length; i++) {
elms[i].style.float = "left";
}
}
</script>
درباره این سایت