javascript - 为什么 return 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添加方法的原型(prototype)。

在这种情况下，方法链的工作方式如下:

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>