document.getElementsByTagName: Невозможно прочитать свойство 'style' of undefined

Question

Я хочу сделать ярлык с переменной длиной $$(), чтобы я мог использовать ярлык, например $() [jquery], чтобы сохранить код в моем проекте (ВСЕ МОЙ КОД ИЗОБРАЖЕНИЯ JAVASCRIPT). , когда я помещаю строку id или class, все работает правильно, но когда я помещаю tagName, он показывает, что не может прочитать свойство 'style' undefined, кажется, что код прав, помогите, спасибо

One более того, это способ определить переменную быстрого доступа $$() для правильного использования в чистой javascript-среде? или существует ли какая-либо передовая практика для определения такой глобальной переменной?

window.onload = function(){ 
 
\t function $$(ele){ 
 
    \t \t var pattern1 = /#/g; 
 
    \t \t var pattern2 = /\./g; 
 
    \t \t var pattern3 = /!/g; 
 
     var matches = ele.match(/[^#\.!]/g);//array 
 
     var elementS = matches.join(""); 
 

 
     //alert(matches+elementS); 
 
     // console.log(document.getElementsByTagName(elementS)); 
 
     
 
     var spaceExist = /\s/.test(elementS) 
 
    \t \t if(pattern1.test(ele)){ 
 
    \t \t \t return document.getElementById(elementS); 
 
       
 
    \t \t }else if(pattern2.test(ele)){ 
 
    \t \t \t //console.log(elementS); 
 
    \t \t \t return document.getElementsByClassName(elementS); 
 

 
    \t \t }else if(pattern3.test(ele)){ 
 
    \t \t \t alert('hi'); 
 
    \t \t \t console.log(elementS); 
 
    \t \t \t return document.getElementsByTagName(elementS); 
 
    \t \t }else if(spaceExist){ 
 
    \t \t \t return document.querySelectorAll(elementS); 
 
    \t \t } 
 
    \t } 
 
    \t $$('#hme').style.backgroundColor = 'red'; 
 
    \t $$('.myp')[0].style.backgroundColor = 'green'; 
 
    \t $$('!h2')[0].style.display = 'none';//this not work,shows Cannot read property 'setAttribute' of undefined 
 
}

\t <h1 id="hme">hi,friend</h1> 
 
\t <p class="myp">mmdfdfd</p> 
 
\t <h2>hhhhhh</h2>

Answer 1

Вы прошли через свой код? Посмотрите на рисунок № 2:

var pattern2 = /./g;

Этот шаблон будет соответствовать любому персонажу при условии, что это то, что представляет период в регулярных выражениях - ref: http://www.regular-expressions.info/dot.html.

Поэтому этот условный выполняется и возвращает результат:

else if(pattern2.test(ele)){ 
    return document.getElementsByClassName(elementS); 
} 

Учитывая, как представляется, нет элемента с именем класса h2 (который является значением elementS), возвращаемое значение undefined.

Учитывая, что undefined не имеет свойств, опрос на style будет вызывать ошибку, которую вы видите.

Answer 2

Мой совет является использование одного ярлыка, так как вы уже используете querySelectorAll:

window.$ = document.querySelectorAll.bind(document) 

или, если вы предпочитаете нужен первый элемент

window.$ = document.querySelector.bind(document) 

Таким образом, вы» я смогу сделать все, что ты делаешь нг с нормальным CSS селекторов и не запутывается !tag для всего tag

Если скорость действительно имеет значение, вы сэкономите несколько тиков, только с двумя псевдонимами:

window.$ = document.querySelector.bind(document) 
window.$el = document.getElementById.bind(document) 

и призывающих $el, когда вам это нужно конкретно, вместо пытаясь сделать полиморфизм метода.

Answer 3

Ответ Мистера Эпика указывает на главную проблему. Ваш вызов h2 попадает в этот оператор if, и поэтому ваша ошибка происходит. Вам нужно убедиться, что он не попадает туда, создавая другой шаблон или указывая в своем втором утверждении, что ваш «ele» не содержит «!».

После этого в вашем третьих, если заявлении:

else if(pattern3.test(ele)){ 
     alert(hi); <--- 
     console.log(elementS); 
     return document.getElementsByTagName(elementS); 

Проблема с этим вы собираетесь предупредить (привет), но привет не определен. Убедитесь, что вы заключили его в кавычки. Должно быть хорошо выглядеть после этого.