ÖRNEK1:
[javascript]
function init(){
var imgCollection =document.images; //Resim yükleme
console.log(“imgCollection:”);
for(var i=0;i<imgCollection.length;i++)
console.log(imgCollection[i]);
var imgEl=document.createElement(“img”); //img tagı ile element olusturmusduk
imgEl.id=”r5″; //id si r5 olan
imgEl.src=”r5.png”; //src si 5 olan
document.body.appendChild(imgEl); //imgEL nesnesini body ekle
console.log(“imgCollection:”);
for(var i=0;i<imgCollection.length;i++) //Burada imagesleri yazdırdık.
console.log(imgCollection[i]); //
}
[/javascript]
ÖRNEK2:
[javascript]
function init(){
var elP=document.getElementById(“first”); //İd si first olanın tüm özelliklerini alır.
console.log(elP.id); //firt un id sini yazdık
var nameCollection=document.getElementsByName(“ct”); //Name i ct olanların tümünü aldı.
for(var i=0;i<nameCollection.length;i++) //alınan nameCollection leri for döngüsü ile yazdırdı.
console.log(nameCollection[i]);
var tagCollection=document.getElementsByTagName(“p”);//Tagı p olanların tümünü alıyor.
for(var i=0;i<tagCollection.length;i++) //alınan p tagından olusan tagCollection dizisini yazdırıyor.
console.log(tagCollection[i]);
var pEl=document.createElement(“p”); //yeni bir p tagı oluşturturduk.
pEl.id=”4″; //id sini 4 verdik.
document.body.appendChild(pEl);//body tagı içerisine yeni oluşturlan html elementini ekliyoruz.
console.log(tagCollection);
}
[/javascript]
ÖRNEK3:
[javascript]
function init(){
var isaretle=function(plistx,color)
{
for(var i=0;i<plistx.length;i++)
{
var element=plistx.item(i);//2 dizimiz var //Burada plistx.item(i) yada plistx[i] yazabiliriz ikiside aynı
element.style.backgroundColor=color;//elementin style lerininin backgroundlarını degiştirmiş
}
}
var plist1=document.getElementsByClassName(“ctx”);
isaretle(plist1,’gray’);
var plist2=document.getElementsByClassName(“p1 p2”);
isaretle(plist2,’khaki’);
}
[/javascript]
[html]
<body onload=”init();”>
<div>
<p class=”2d”>2d</p>
<p class=”3d ctx”>3d ctx</p>
<p class=”webgl”>webgl<span class=”ctx”>webgl ctx</span></p>
<p class=”p1 p2″>class özellik p1 p2</p>
<p class=”p2 p1″>class özellik p2 p1</p>
<p class=”p1″>p1 secicisi</p>
</div>
</body>
[/html]
ÖRNEK4:
[javascript]
function init(){
var snodelist=document.querySelectorAll(‘.div’); //Statik tüm div elementlerini alır.
var dnodelist=document.getElementsByClassName(‘div’);//Dinamik class nameleri div olanların tümünü alır.
console.log(“statik list sayisi:”+snodelist.length);//adetlerini yazdırır. çıktısı 3
console.log(“dinamik list sayisi:”+dnodelist.length);//adetlerini yazdırır. çıktısı3
var div=document.createElement(‘div’);//Yeni bir div elementi oluştururz.
div.textContent=’Div4′; //içerigini Div4 yaptık.
div.className=’div’; //className i div oldu
document.body.appendChild(div);//body içine ekledik.
console.log(“statik list sayisi:”+snodelist.length);//çıktısı 3 degişmez.
console.log(“dinamik list sayisi:”+dnodelist.length);//çıktısı 4 olur.
}
[/javascript]
[html]
<body onload=”init();”>
<div class=”div”>Div1</div>
<div class=”div”>Div2</div>
<div class=”div”>Div3</div>
</body>
[/html]
ÖRNEK5:
[javascirpt]
var init= function()
{
var el=document.getElementById(“one”);//id si one olanları aldık.
var attr=el.attributes; //attributes=tag nitelikleri alır.Id’si one olanların niteliklerini tümünü alır.
console.log(“attr:”);
console.log(attr);
console.log(“attr.length”); //çıktı 2 dir.
console.log(attr.length);
console.log(“attr.item(0)”); //style=”background-color:aliceblue;
console.log(attr.item(0));
console.log(“attr[1]”); //id=”one”
console.log(attr[1]);
console.log(“attr.getNamedItem(‘style’)”);
console.log(attr.getNamedItem(‘style’)); // style=”background-color:aliceblue;”
//var oznitelik=document.createAttribute(“title”); //oznitelik adında yeni bir title özellik olurturulur.
el.setAttribute(“title”,”msg”);
//oznitelik.nodeValue=”msg”;//
//attr.setNamedItem(oznitelik);
console.log(“attr:”);
console.log(attr); //Çıktısı id=”one” style=”background-color:aliceblue; title:”msg”;
}
[/javascript]
[html]
<body onload=”init();”>
<p id=”one” style=”background-color:aliceblue;”>merbaha</p>
</body>
[/html]
ÖRNEK6:
[javascript]
function exc()
{
var div1=document.querySelector(‘div’); //Bir yada birden fazla olsada ilk divi alır.
var domTokenL=div1.classList;// Burda (classList=div içindeki class içeriklerini listeler )
console.log(domTokenL);
domTokenL.add(‘d4’); //div elementine d4 class’ı ekledik.
console.log(domTokenL);
domTokenL.remove(‘d1’); //d1 i kaldırdık
console.log(domTokenL);
domTokenL.toggle(‘d5’);// d5 Yoksa ekler varsa eklemez
console.log(domTokenL);//tümünü yazdırdık.
}
[/javascript]
<body onload=”exc();”>
<div class=”d1 d2 d3″>
classlist
</div>
</body>
ÖRNEK7:
[javascript]
var style=function exc()
{
var eldiv=document.querySelector(‘div’); //ilk divi alırız.
var cssdes=eldiv.style; //Elementin style’i üzerinde
console.log(cssdes.length); //Çıktısı 4 olacak
console.log(cssdes.cssText); //içerigini yazdırdık.
console.log(cssdes.item(0)); //css degerinin ilk degerini yazdırdık.
console.log(cssdes.getPropertyValue(‘color’)); //Css te color özelliğinin degerini verir.
console.log(cssdes.removeProperty(‘font-size’)); //font-size özelliğini kaldırır.
console.log(“cssText :”);
console.log(cssdes.cssText); //
console.log(cssdes.setProperty(‘border’,’1px solid gray’));
console.log(cssdes.cssText);
}
[/javascript]
<body onload=”style();”>
<div style=”background-color:#F59599;color:white;font-family:Calibri;font-size:x-large”>
Css Declaration
</div>
</body>
ÖRNEK8:
[javascript]
function start()
{
var eleman=document.getElementById(“con”); //id si con olanlarını alır.
console.log(eleman.innerHTML); //elementin html olarak çıktısını verir.
console.log(eleman.textContent); //içerigini verir.
console.log(“—–“);
eleman.innerHTML=”<p> innerHTML ile içerik <span> değiştirildi </span> </p>”; //eleman elementinin içerigini degiştirir.
console.log(eleman.innerHTML); //içerigi degişmiş olan elementi yazdırdık.
console.log(eleman.textContent); //innerHTML ile içerik <span> değiştirildi şeklinde çıktı verir.
}
[/javascript]
<body onload=”start();”>
<div id=”con”>
<h2>Element</h2>
<span>innerHTML</span>
<br/>
</div>
</body>
ÖRNEK9:
[javascript]
function start()
{
var clone=document.getElementById(“el”).cloneNode(true); //el elemmentini clonelar yani bu elementi tekrardan ekler.
document.body.appendChild(clone); //body ye yeni clonelanan elementi ekler.
var yenidiv=document.createElement(“div”); //yeni bir element oluşturduk.
yenidiv.id=”yeni”; //id sini yeni belirledik.
yenidiv.textContent=”insertbefore komutu ile oluşturuldu”; //İçeriğini belirledik insertbefore komutu ile oluşturuldu
var el=document.getElementById(“el”); //id si el olanları alır.
document.body.insertBefore(yenidiv,el); //yenidiv elementin önüne eklenir.
document.body.removeChild(el);
}
[/javascript]
<body onload=”start();”>
<div id=”el”>
isteğe bağlı deep parametresine true değeri aktarılırsa düğüm alt düğümleri
<p>
ile beraber kopyalanır . Diğer durumlarda sadece düğümün kendisinin <span> kopyası oluştururlur</span>
</p>
</div>
<h1>MERHABA</h1>
</body>