Dropbox 前端店面

Job Hunting Interview
, , , ,
1
  1. Implement getElementsByClassName() 
// element.children => HTMLCollection
// element.className => string

/**

@function getByClassName
@param {Element} root – The root of the DOM tree
@param {string} className
@return {Array} nodes – All the nodes in the tree which include the target className in their classes.
*/
//document.getElementsByClassName();

function getByClassName(root, className) {
//
}
const { JSDOM } = require("jsdom");
const { document } = new JSDOM(`

`).window; const getIds = (elements=[]) => Array.from(elements).map(x => x.id); const root = document.getElementById('root'); console.log('actual: ', getIds(getByClassName(root, 'a'))); console.log('expected:' , `[ 'root', 'a-2', 'a-3' ]`);
  1. Implement getByClassnameHierarchy() 
 const { document: document2 } = new JSDOM(`

`).window;

Implement

function getByClassnameHierarchy(root, classNames) {
//
}

const root2 = document2.getElementById('root2');

console.log('actual: ', getIds(getByClassnameHierarchy(root2, 'a>b')));
console.log( `a>b expected:`  ,  `['b-1']` , '\n');

// order matters!:
console.log('actual: ', getIds(getByClassnameHierarchy(root2, 'b>a')));
console.log( `b>a expected:`  ,  `[]` , '\n');

// must be direct descendants:
console.log('actual: ', getIds(getByClassnameHierarchy(root2, 'a>c')));
console.log( `a>c expected:`  ,  `[c-3]` , '\n');

// the number of classes in the string doesn't matter:
console.log('actual: ', getIds(getByClassnameHierarchy(root2, 'a>b>c')));
console.log( `a>b>c expected:`  ,  `['c-1', 'c-2']` , '\n');

console.log('actual: ', getIds(getByClassnameHierarchy(root2, 'b>c')));
console.log( `b>c expected:`  ,  `['c-1', 'c-2']` , '\n');

console.log('actual: ', getIds(getByClassnameHierarchy(root2, 'c')));
console.log( `c expected:`  ,  `['c-1', 'c-2', 'c-3']` , '\n');