🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
一:类名操作 完成几个 DOM 元素类名操作的工具方法: addClass(dom, name):给 dom 元素添加类名 name removeClass(dom, name):把 dom 元素的类名 name 删除 hasClass(dom, name):判断 dom 元素是否有类名 name ~~~ const addClass = (dom, name) => { dom.classList.add(name); } const removeClass = (dom, name) => { dom.classList.remove(name); } const hasClass = (dom, name) => { return dom.classList.contains(name) } ~~~ 二:循环调节列表 页面上有这么一个列表: <ul id='adjustable-list'> <li> <span>1</span> <button class='up'>UP</button> <button class='down'>DOWN</button> </li> <li> <span>2</span> <button class='up'>UP</button> <button class='down'>DOWN</button> </li> <li> <span>3</span> <button class='up'>UP</button> <button class='down'>DOWN</button> </li> ... </ul> 点击 UP 按钮会使得该 li 元素在列表中上升一个位置,点击 DOWN 按钮会使得该 li 元素下降一个位置。点击最后的元素的 DOWN 按钮会使得元素回到第一个位置,点击第一个元素的 UP 按钮会使其回到最后的位置。 页面上已经存在该列表,你只需要完成 initAdjustableList() 函数,给元素添加事件。 答案: ~~~ const initAdjustableList = () => { const $ul = $('#adjustable-list') $ul.on('click', 'li .up', null, function () { const $li = $(this).parent('li') const index = $li.index() move(index, -1) }) $ul.on('click', 'li .down', null, function () { const $li = $(this).parent('li') const index = $li.index() move(index, 1) }) const move = (index, move) => { const newIndex = index + move const $moveItem = $ul.find('li').eq(index) // throw {message: $ul.find('li').get().length} if (newIndex < 0) { $ul.append($moveItem) } else if (newIndex >= $ul.find('li').get().length) { $ul.prepend($moveItem) } else { const $targetItem = $ul.find('li').eq(newIndex) // throw {message: 'fuck' + newIndex + index + move} // $moveItem.detach() if (move === 1) { $targetItem.after($moveItem) } else { $targetItem.before($moveItem) } } } } ~~~ 三: DOM标签统计 完成 getPageTags 函数,判断你的代码所执行的页面用到了哪些标签。 例如,如果页面中: <html> <head></head> <body></body> <script>...</script> </html> 那么 getPageTags() 则返回数组 ['html', 'head' 'body', 'script'](顺序不重要)。 答案: ~~~ const getPageTags = () => [...new Set([...document.getElementsByTagName('*')].map((value) => {return value.nodeName;}))] ~~~ 四:获取子元素属性 完成 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 的编写。 答案: ~~~ const getChildAttributes = (el, attr) => { const attrs = [] const children = el.children for (let i = 0, len = children.length; i < len; i++) { const node = children[i] attrs.push(node.getAttribute(attr)) } return attrs } ~~~