Зачем возвращать getElementsBy ** не работает?

Question

HTML:

<ul id="ul-id"> 
<li>Text Content</li> 
<li>Text Content</li> 
<li>Text Content</li> 
<li>Text Content</li> 
</ul> 

Javascript:

function getId(idname) {return document.getElementById(idname);} // with document at first

function getTag(tagname) {return getElementsByTagName(tagname);} // witout document at first

Результаты:
Когда я называю его:

getId("ul-id").innerHTML // this code is working fine

getId("ul-id").getTag("li").length // not working

document.getElementById("ul-id").getTag("li").length // this also not working

Можете ли вы сказать мне причину и как это исправить?^_^

Answer 1

Если вы действительно хотите добавить пользовательский метод на элементы в DOM, вам необходимо расширить Element прототип, чтобы добавить метод.

В этом случае метод цепочек работают следующим образом:

function getId(idname) { 
 
    return document.getElementById(idname); 
 
} 
 

 
Element.prototype.getTags = function getNestedElements(tagName) { 
 
    return this.getElementsByTagName(tagName); 
 
}; 
 

 

 
Element.prototype.getTag = function getNestedElements(tagName) { 
 
    return this.getTag(tagName)[0]; 
 
}; 
 

 

 
document.write(
 
    getId('ul-id').getTags('li').length 
 
);

<ul id="ul-id"> 
 
    <li>Text Content</li> 
 
    <li>Text Content</li> 
 
    <li>Text Content</li> 
 
    <li>Text Content</li> 
 
</ul>

Answer 2

Попробуйте это:

var a = document.getElementById('ul-id'); 
var b = a.getElementsByTagName('li').length; 
console.log(b); 

Answer 3

Вы не можете вызвать getTag на getId. Вы можете решить эту проблему, делая этот вид обходного:

function getTag(context, tagname) { 
    return context.getElementsByTagName(tagname); 
} 

Вот fiddle.

Answer 4

getId и getTag - это просто функции. Вы не можете просто связать это. Попробуйте использовать DOM apis напрямую.

document.getElementById("ul-id").getElementsByTagName("li").length