Làm thế nào để có được phần tử con theo tên lớp?

Tôi đang cố gắng để có được khoảng con có một lớp = 4. Đây là một yếu tố ví dụ:

<div id="test">
 <span class="one"></span>
 <span class="two"></span>
 <span class="three"></span>
 <span class="four"></span>
</div>

Các công cụ tôi có sẵn là JS và YUI2. Tôi có thể làm một cái gì đó như thế này:

doc = document.getElementById('test');
notes = doc.getElementsByClassName('four');

//or

doc = YAHOO.util.Dom.get('#test');
notes = doc.getElementsByClassName('four');

Chúng không hoạt động trong IE. Tôi gặp một lỗi mà đối tượng (doc) không hỗ trợ phương thức hoặc thuộc tính này (getElementsByClassName). Tôi đã thử một vài ví dụ về việc triển khai trình duyệt chéo của getElementsByClassName nhưng tôi không thể làm cho chúng hoạt động và vẫn gặp lỗi đó.

Tôi nghĩ cái tôi cần là một trình duyệt chéo getElementsByClassName hoặc tôi cần sử dụng doc.getElementsByTagName ('span') và lặp lại cho đến khi tôi tìm thấy lớp 4. Mặc dù vậy tôi không chắc chắn làm thế nào để làm điều đó.

Sử dụng doc.childNodesđể lặp qua từng cái span, và sau đó lọc cái có giá trị classNamebằng 4:

var doc = document.getElementById("test");
var notes = null;
for (var i = 0; i < doc.childNodes.length; i++) {
    if (doc.childNodes[i].className == "4") {
      notes = doc.childNodes[i];
      break;
    }        
}

Hay nói, là một tài tài của, qua, qua, qua một tài khác, qua giữ, qua một tài khác

Sử dụng querySelector và querySelector ALL

var testContainer = document.querySelector('#test');
var fourChildNode = testContainer.querySelector('.four');

IE9 trở lên

;)

Câu trả lời được chấp nhận chỉ kiểm tra trẻ em ngay lập tức. Thường thì chúng ta đang tìm kiếm bất kỳ hậu duệ nào có tên lớp đó.

Ngoài ra, đôi khi chúng tôi muốn bất kỳ đứa trẻ nào chứa className.

Ví dụ: <div class="img square"></div>nên khớp với tìm kiếm trên className "img", mặc dù tên chính xác của className không phải là "img".

Đây là một giải pháp cho cả hai vấn đề này:

Tìm ví dụ đầu tiên của một phần tử con cháu với lớp className

   function findFirstChildByClass(element, className) {
        var foundElement = null, found;
        function recurse(element, className, found) {
            for (var i = 0; i < element.childNodes.length && !found; i++) {
                var el = element.childNodes[i];
                var classes = el.className != undefined? el.className.split(" ") : [];
                for (var j = 0, jl = classes.length; j < jl; j++) {
                    if (classes[j] == className) {
                        found = true;
                        foundElement = element.childNodes[i];
                        break;
                    }
                }
                if(found)
                    break;
                recurse(element.childNodes[i], className, found);
            }
        }
        recurse(element, className, false);
        return foundElement;
    }

Sử dụng phần tử.querySelector (). Giả sử: 'myEuity' là phần tử cha bạn đã có. 'sonClassName' là lớp của đứa trẻ bạn đang tìm kiếm.

let child = myElement.querySelector('.sonClassName');

Để biết thêm thông tin, hãy truy cập: https://developer.mozilla.org/en-US/docs/Web/API/Euity/querySelector

Bạn có thể thử:

notes = doc.querySelectorAll('.4');

hoặc là

notes = doc.getElementsByTagName('*');
for (var i = 0; i < notes.length; i++) { 
    if (notes[i].getAttribute('class') == '4') {
    }
}

Đối với tôi có vẻ như bạn muốn nhịp thứ tư. Nếu vậy, bạn chỉ có thể làm điều này:

document.getElementById("test").childNodes[3]

hoặc là

document.getElementById("test").getElementsByTagName("span")[3]

Cái cuối cùng này đảm bảo rằng không có bất kỳ nút ẩn nào có thể làm hỏng nó.

Nhưng hãy lưu ý rằng các trình duyệt cũ không hỗ trợ getElementsByClassName.

Sau đó, bạn có thể làm

function getElementsByClassName(c,el){
    if(typeof el=='string'){el=document.getElementById(el);}
    if(!el){el=document;}
    if(el.getElementsByClassName){return el.getElementsByClassName(c);}
    var arr=[],
        allEls=el.getElementsByTagName('*');
    for(var i=0;i<allEls.length;i++){
        if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])}
    }
    return arr;
}
getElementsByClassName('4','test')[0];

Có vẻ như nó hoạt động, nhưng lưu ý rằng một lớp HTML

• Phải bắt đầu bằng một chữ cái: AZ hoặc az
• Có thể được theo sau bởi các chữ cái (A-Za-z), chữ số (0-9), dấu gạch nối ("-") và dấu gạch dưới ("_")

Sử dụng tên của id với getElementById, không có #dấu trước nó. Sau đó, bạn có thể lấy các spannút con bằng cách sử dụng getElementsByTagNamevà lặp qua chúng để tìm nút có lớp đúng:

var doc = document.getElementById('test');

var c = doc.getElementsByTagName('span');

var e = null;
for (var i = 0; i < c.length; i++) {
    if (c[i].className == '4') {
        e = c[i];
        break;
    }
}

if (e != null) {
    alert(e.innerHTML);
}

Bản trình diễn: http://jsfiddle.net/Guffa/xB62U/

Theo tôi, mỗi khi bạn có thể, bạn nên sử dụng Array và các phương thức của nó. Chúng nhanh hơn nhiều, sau đó lặp lại toàn bộ DOM / trình bao bọc hoặc đẩy công cụ vào mảng trống. Phần lớn các giải pháp được trình bày ở đây bạn có thể gọi Naive như được mô tả ở đây (bài viết tuyệt vời btw):

https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-fifts-1417d326d2bc

Giải pháp của tôi : (xem trước trực tiếp trên Codepen: https://codepen.io/Nikolaus91/pen/wEGEYe )

const wrapper = document.getElementById('test') // take a wrapper by ID -> fastest
const itemsArray = Array.from(wrapper.children) // make Array from his children

const pickOne = itemsArray.map(item => { // loop over his children using .map() --> see MDN for more
   if(item.classList.contains('four')) // we place a test where we determine our choice
     item.classList.add('the-chosen-one') // your code here
})

Cách tôi sẽ làm điều này bằng cách sử dụng jquery là một cái gì đó như thế này ..

var Targetchild = $ ("# test"). children (). find ("span.four");

Đây là một giải pháp đệ quy tương đối đơn giản. Tôi nghĩ rằng một tìm kiếm đầu tiên là thích hợp ở đây. Điều này sẽ trả về phần tử đầu tiên phù hợp với lớp được tìm thấy.

function getDescendantWithClass(element, clName) {
    var children = element.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].className &&
            children[i].className.split(' ').indexOf(clName) >= 0) {
            return children[i];
         }
     }
     for (var i = 0; i < children.length; i++) {
         var match = getDescendantWithClass(children[i], clName);
         if (match !== null) {
             return match;
         }
     }
     return null;
}

Bạn có thể tìm nạp lớp cha bằng cách thêm dòng bên dưới. Nếu bạn có một id, nó sẽ dễ dàng hơn với getElementById. Tuy nhiên,

var parentNode = document.getElementsByClassName("progress__container")[0];

Sau đó, bạn có thể sử dụng querySelectorAlltrên cha mẹ <div>để tìm nạp tất cả các kết quả khớp divvới lớp.progress__marker

var progressNodes = progressContainer.querySelectorAll('.progress__marker');

querySelectorAllsẽ tìm nạp mọi thứ divvới lớpprogress__marker

Giải pháp hiện đại

const context = document.getElementById('context');
const selected = context.querySelectorAll(':scope > div');

tài liệu

Cập nhật tháng 6 năm 2018 lên ES6

    const doc = document.getElementById('test');
    let notes = null;
    for (const value of doc) {
        if (value.className === '4') {
            notes = value;
            break;
        }    
    }

YUI2 có một triển khai đa trình duyệtgetElementsByClassName .

Đây là cách tôi đã làm nó bằng cách sử dụng các bộ chọn YUI. Cảm ơn đề nghị của Hank Gay.

notes = YAHOO.util.Dom.getElementsByClassName('four','span','test');

trong đó bốn = classname, span = loại phần tử / tên thẻ và test = id cha.

Sử dụng YAHOO.util.Dom.getElementsByClassName()từ đây .