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 } ~~~