строки, начинающиеся с подстроки

Question

Я пытаюсь найти все строки с id, которые начинаются с символа '.' и некоторые буквы. Когда я вызываю getElementsByIdStartsWith с этой строкой, я не получаю возвращенных строк, хотя я могу видеть (и проверять) их.

Где моя ошибка?

getElementsByIdStartsWith: function (optionSymbolRoot) { 
     var idArr = []; 

     var trs = document.getElementById("tr"); 

     for(var i=0; i<trs.length; i++) 
     { 
      var s = trs[i].id; 
      if(true == s.startsWith(optionSymbolRoot)) 
       idArr.push(trs[i]); 
     } 

     return idArr; 
    },  
ToggleRow : function(rootId) { 

     var s = "."; 
     var dottedSymbol = s.concat(rootId); 
     //process.stdout.write(dottedSymbol);   

     var rows = this.getElementsByIdStartsWith(dottedSymbol); 
     rows.forEach(function(row) 
     { 

     if (row.style.display == "") { 
      row.style.display = "none"; 
     } 
     else { 
      row.style.display = ""; 
     } 
     }); 
    }, 

Answer 1

Функция getDocumentById будет дать только один элемент, как ids должен быть уникальным. Если вы хотите получить такое поведение, я рекомендую использовать классы вместо идентификаторов или как указано в комментариях выше getElementByTagName.

Answer 2

Вы также можете использовать функцию querySelectorAll

document.querySelectorAll('#id'); 
// This will return a NodeList with all elements that match the criteria. 

function (optionSymbolRoot) { 
    var idArr = []; 

    var trs = document.querySelectorAll("tr"); 

    for(var i=0; i<trs.length; i++) 
    { 
     var s = trs[i].className; 
     if(true == s.startsWith(optionSymbolRoot)) 
      idArr.push(trs[i]); 
    } 

    return idArr; 
} 

Answer 3

document.getElementById получает один элемент с указанным идентификатором атрибута. Чтобы получить все теги <tr> на странице, вы можете использовать getElementsByTagName или querySelectorAll.

var rows = document.getElementsByTagName('tr'); 

//OR 

var rows = document.querySelectorAll('tr'); 

Второй метод является более гибким, поскольку он принимает любой действительный селектор CSS, включая имена тегов, .classes и #ids, но немного медленнее.

Answer 4

Вы можете сделать выбор с querySelectorAll и "начинается с" CSS3 attribute selector:attr^="str"

document.querySelectorAll('tr[id^="str"]') 

NodeList должны быть преобразованы в Array

function rowsIdStartsWith(optionSymbolRoot){ 
    var selector = 'tr[id^="' + optionSymbolRoot + '"]' 
    var selected = document.querySelectorAll(selector) 
    return [].slice.call(selected) 
} 

https://jsfiddle.net/ak3jxrLg/