Öğeyi sınıf ve kimliğe göre öğenin içine alma - JavaScript

Pekala, daha önce JavaScript ile uğraştım, ama yazdığım en faydalı şey bir CSS stil değiştirici. Bu yüzden biraz yeniyim. Diyelim ki böyle bir HTML kodum var:

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

"Merhaba dünya!" "Güle güle dünya!" ? Document.getElementByClass ve document.getElementById'in nasıl çalıştığını biliyorum, ancak daha spesifik olmak istiyorum. Daha önce sorulmuşsa özür dilerim.

İlk olarak, gibi bir işleve sahip öğeleri seçmeniz gerekir getElementById.

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];

getElementByIdyalnızca bir düğüm döndürür, ancak getElementsByClassNamebir düğüm listesi döndürür. Bu sınıf adına sahip tek bir öğe olduğu için (anlatabildiğim kadarıyla), ilkini alabilirsin (bunun için ne [0]var - tıpkı bir dizi gibi).

Ardından, html'yi ile değiştirebilirsiniz .textContent.

targetDiv.textContent = "Goodbye world!";

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
targetDiv.textContent = "Goodbye world!";

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

Bunu şu şekilde yapabilirsiniz:

var list = document.getElementById("foo").getElementsByClassName("bar");
if (list && list.length > 0) {
    list[0].innerHTML = "Goodbye world!";
}

veya daha az hata kontrolü ve daha fazla kısalık ile yapmak istiyorsanız, böyle bir satırda yapılabilir:

document.getElementById("foo").getElementsByClassName("bar")[0].innerHTML = "Goodbye world!";

Açıklama:

1. Elemanı alıyorsunuz id="foo".
2. Daha sonra, o nesnenin içinde bulunan nesneleri bulursunuz class="bar".
3. Bu, dizi benzeri bir nodeList döndürür, böylece bu nodeList içindeki ilk öğeye başvurursunuz
4. Daha sonra innerHTMLiçeriğini değiştirmek için o öğeyi ayarlayabilirsiniz .

Uyarılar: bazı eski tarayıcılar desteklemez getElementsByClassName(örneğin eski IE sürümleri). Bu işlev eksikse yerine yerleştirilebilir.

Burası, tarayıcı uyumluluğu hakkında endişelenmek yerine yerleşik CSS3 seçici desteğine sahip bir kütüphane kullanmanızı öneririm (bir başkasının tüm işi yapmasına izin verin). Bunu yapmak için sadece bir kütüphane istiyorsanız, Sizzle harika çalışır. Sizzle'de bu şu şekilde yapılır:

Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";

jQuery yerleşik Sizzle kütüphanesi vardır ve jQuery, bu olurdu:

$("#foo .bar").html("Goodbye world!");

Bunun IE 7 veya daha düşük sürümlerde çalışması gerekiyorsa, getElementsByClassName öğesinin tüm tarayıcılarda bulunmadığını hatırlamanız gerekir. Bu nedenle kendi getElementsByClassName'inizi oluşturabilir veya bunu deneyebilirsiniz.

var fooDiv = document.getElementById("foo");

for (var i = 0, childNode; i <= fooDiv.childNodes.length; i ++) {
    childNode = fooDiv.childNodes[i];
    if (/bar/.test(childNode.className)) {
        childNode.innerHTML = "Goodbye world!";
    }
}

Özyinelemeli işlev:

function getElementInsideElement(baseElement, wantedElementID) {
    var elementToReturn;
    for (var i = 0; i < baseElement.childNodes.length; i++) {
        elementToReturn = baseElement.childNodes[i];
        if (elementToReturn.id == wantedElementID) {
            return elementToReturn;
        } else {
            return getElementInsideElement(elementToReturn, wantedElementID);
        }
    }
}

Bunu yapmanın en kolay yolu:

function findChild(idOfElement, idOfChild){
  let element = document.getElementById(idOfElement);
  return element.querySelector('[id=' + idOfChild + ']');
}

veya daha iyi okunabilir:

findChild = (idOfElement, idOfChild) => {
    let element = document.getElementById(idOfElement);
    return element.querySelector(`[id=${idOfChild}]`);
}

Kullanılan olmamalıdır document.getElementById sadece istemci tarafı denetimleri için çalışma kimlikleri tespit edildiği çünkü. Aşağıdaki örnekte olduğu gibi jquery kullanmalısınız.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                                                                                                             
<div id="foo">
   <div class="bar"> 
          Hello world!
     </div>
</div>

bunu kullan :

$("[id^='foo']").find("[class^='bar']")

// do not forget to add script tags as above

Herhangi bir kaldırmak herhangi bir işlemi düzenlemek istiyorsanız sadece "." arkasında ve işlemleri yapmak