#22 获取子元素属性


  • 1
    administrators

    完成 getChildAttributes 函数,它接受一个 DOM 元素作为参数和一个属性名作为参数,你需要返回这个 DOM 的 直接 子元素的特定属性列表。例如:

    <ul id='list'>
      <li data-name="Jerry" class="item"><span>1</span></li>
      <li data-name="Lucy" class="item"><span>2</span></li>
      <li data-name="Tomy"><span>3</span></li>
    </ul>
    
    getChildAttributes(el, 'data-name') // => ['Jerry', 'Lucy', 'Tomy']
    getChildAttributes(el, 'class') // => ['item', 'item', null]
    

    只需要完成 getChildAttributes 的编写。


  • 0

    el的传入是什么


  • 0
    administrators

    @Junior2Ran 题目写的:DOM 元素


  • 0

    const getChildAttributes = (el, attrStr) => {
        let childNodes = el.childNodes,
            childNodesAttrs = [];
    
        for(var i=0,len=childNodes.length; i<len; i++) {
            var attr = childNodes[i].getAttribute(attrStr);
            childNodesAttrs.push(attr);
        }
    
        return childNodesAttrs;
    }
    

    提示childNodes[i].getAttribute is not a function


  • 0
    administrators

    @an-l

    <div>
     Hello <span> World </span>
    </div>
    

    你试试这种情况


  • 0

    @胡子大哈 回复好快!赞一个,应该使用children获取子元素列表,不然会包含文本节点,谢谢胡子大哈啦


  • 0
    管理员

    dom.children是一个对象,用for of 遍历

    const getChildAttributes = (dom, attrStr) => {
      lists = [];
      for(let item of dom.children) {
      	lists.push(item.getAttribute(attrStr))
      }
      return lists;
    }
    

  • 0

    const getChildAttributes = (dom, attrStr) => [...dom.children].map(x => x.getAttribute(attrStr))
    

    转数组map就行,楼上方法多用了一个私有变量


  • 0

    const getChildAttributes = (el, attr) => {
      let ret = [];
      for(let item of el.children) {
        item.getAttribute(attr) ? ret.push(item.getAttribute(attr)) : ret.push(null)
      }
      return ret
    }
    

  • 0

    使用childern获取子元素的时候报错了:
    Runtime Error
    Cannot read property 'children' of null;

    const getChildAttributes = (el,name)=>{
          let dom = document.getElementById(el);
          var arr = [];
          dom.children.map((item,index)=>{
            app.push(item.getAttribute(name))
          })
          return arr;
        };
    

  • 0

    const getChildAttributes = (el, propname) => [...el.children].map(d => d.getAttribute(propname))
    
    

登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待