dom经典面试题 · web前端

一：类名操作完成几个 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 } ~~~