[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content-map-for-the-dom-count":3,"$f31hwxkc8fz73w":21},{"id":4,"type":5,"slug":6,"title":7,"date":8,"category":9,"tags":10,"body_markdown":14,"permalink":15,"excerpt_src":15,"media_type":15,"media_title":15,"media_author":15,"media_url":15,"rating":15,"layout":15,"pv":16,"admin_only":16,"created_at":17,"updated_at":17,"deleted_at":15,"status":18,"html":19,"cover":20},154,"article","map-for-the-dom-count","（腾讯面试）js遍历页面输出dom数量","2010-04-26 07:55:19","web",[11,12,13],"javascript","dom","面试","\n昨天去参加了腾讯的面试，面试官现场出了一道题，要求用JS统计页面的DOM数量。\n\n现场写了一下，但是由于对JS原生DOM操作不基了了，具体的结点操作不会写，只好留了个大致思路。\n\n晚上回到宿舍，终于写出来了。\n\n```javascript\nvar domcount=0;\nfunction domsearch(domobj)\n{\nif(domobj.firstChild)\n\t{\n\t\tvar tempdom=domobj.firstChild;\n\t\tdo{\n\t\t\tdomsearch(tempdom);\n\t\t\ttempdom=tempdom.nextSibling;\n\t\t}while(tempdom);\n\t};\n\tif(domobj.nodeType==1)\n\t{\n\t\tdomcount++;\n\t}\n}\ndomsearch(document.getElementsByTagName('html')[0]);\nalert(domcount);\n```\n\n这个遍历过程实际上是用的树的孩子兄弟表示法，直接用孩子结点，得到以下代码：\n\n```\nvar domcount=0;\nfunction domsearch(domobj)\n{\n\tif(domobj.hasChildNodes)\n\t\tfor(var i=0;i\u003Cdomobj.childNodes.length;i++)\n\t\t{\n\t\t\tdomsearch(domobj.childNodes[i]);\n\t\t};\n\tif(domobj.nodeType==1)\n\t{\n\t\tdomcount++;\n\t}\n}\ndomsearch(document.getElementsByTagName('html')[0]);\nalert(domcount);\n```\n\n感想：基础知识还是要扎实才行，整个面试过程都没有问很虚无飘渺的东西，都是很基础很实在的知识。JS的具体函数可以记不住，但是一定要知道它能做些什么。回来查资料了才知道JS对DOM结点的原生操作是怎样的。另外，DOM编程的电子书在我电脑里好久了，很少去翻，罪过。\n",null,0,"2026-08-28 04:37:17","published","\u003Cp>昨天去参加了腾讯的面试，面试官现场出了一道题，要求用JS统计页面的DOM数量。\u003C\u002Fp>\n\u003Cp>现场写了一下，但是由于对JS原生DOM操作不基了了，具体的结点操作不会写，只好留了个大致思路。\u003C\u002Fp>\n\u003Cp>晚上回到宿舍，终于写出来了。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>var domcount=0;\nfunction domsearch(domobj)\n{\nif(domobj.firstChild)\n\t{\n\t\tvar tempdom=domobj.firstChild;\n\t\tdo{\n\t\t\tdomsearch(tempdom);\n\t\t\ttempdom=tempdom.nextSibling;\n\t\t}while(tempdom);\n\t};\n\tif(domobj.nodeType==1)\n\t{\n\t\tdomcount++;\n\t}\n}\ndomsearch(document.getElementsByTagName('html')[0]);\nalert(domcount);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>这个遍历过程实际上是用的树的孩子兄弟表示法，直接用孩子结点，得到以下代码：\u003C\u002Fp>\n\u003Cpre class=\"shiki\" style=\"background-color:#121212;color:#dbd7caee\" tabindex=\"0\">\u003Ccode>var domcount=0;\nfunction domsearch(domobj)\n{\n\tif(domobj.hasChildNodes)\n\t\tfor(var i=0;i<domobj.childNodes.length;i++)\n\t\t{\n\t\t\tdomsearch(domobj.childNodes[i]);\n\t\t};\n\tif(domobj.nodeType==1)\n\t{\n\t\tdomcount++;\n\t}\n}\ndomsearch(document.getElementsByTagName('html')[0]);\nalert(domcount);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>感想：基础知识还是要扎实才行，整个面试过程都没有问很虚无飘渺的东西，都是很基础很实在的知识。JS的具体函数可以记不住，但是一定要知道它能做些什么。回来查资料了才知道JS对DOM结点的原生操作是怎样的。另外，DOM编程的电子书在我电脑里好久了，很少去翻，罪过。\u003C\u002Fp>\n","",{"total":16,"totalRoots":16,"comments":22,"pv":16},[]]