前端面试宝典(4)—

DOM结构及操作 DOM-(document object model)文档对象模型文档-html页面文档对象-页面中元素文档对象模型-为了能够让程序(js)操作页面中的元素
DOM的作用及理解 (1)可理解为操作html的API接口。(2)html结构模型。(3)html模型中的对象。
DOM和BOM的区别 BOM(browser object model)浏览器对象模型。DOM操作的是html中的元素，BOM是浏览器的API，操作的是浏览器。

面试DOM的长问点

<!DOCTYPE html>
<html lang="zh">
<title>往空的ul中插入值为1,2,3的li</title>
<head>
</head>
<body><ul id = "js-list"></ul><script>(() => {var ndcontainer = document.getElementById("js-list");if(!ndcontainer) {return;}for (var i = 0; i < 3; i++) {var nditem = document.createElement("li");nditem.innerText = i + 1;ndcontainer.appendChild(nditem);}})();</script>
</body>
</html>/*1.id、class的命名区分是css用，还是js用。'js-list'.2.节点的变量命名最好前加nd.3.获取了节点，判断其是否存在.4.声明即运行的函数表达式(() => {})();
*/

如何绑定事件？点击每一个li，则弹出li中的内容。

<!DOCTYPE html>
<html lang="zh">
<title>往空的ul中插入值为1,2,3的li</title>
<head></head>
<body><ul id = "js-list"></ul><script>(() => {var ndcontainer = document.getElementById("js-list");if(!ndcontainer) {return;}for (var i = 0; i < 3; i++) {var nditem = document.createElement("li");nditem.innerText = i + 1;//绑定事件nditem.addEventListener('click',function(){alert(i);})ndcontainer.appendChild(nditem);}})();</script>
</body>
</html>

由于闭包和作用域的问题，i和nditem的作用域范围相同，则弹出来的都是3.可用ES6的块级作用域解决

<!DOCTYPE html>
<html lang="zh">
<title>往空的ul中插入值为1,2,3的li</title>
<head></head>
<body><ul id = "js-list"></ul><script>(() => {var ndcontainer = document.getElementById("js-list");if(!ndcontainer) {return;}for (let i = 0; i < 3; i++) {const nditem = document.createElement("li");nditem.innerText = i + 1;nditem.addEventListener('click',function(){alert(nditem.innerText);})ndcontainer.appendChild(nditem);}})();</script>
</body>
</html>

element.click()不支持动态元素或样式绑定事件。支持给动态元素绑定事件的是.live()和.on()。

数据量很大怎么办，事件委托。若要插入的li是300个，则DOM中注册的事件监听函数增加了100倍。
```
<!DOCTYPE html>
<html lang="zh">
<title>往空的ul中插入值为1,2,3的li</title>
<head></head>
<body><ul id = "js-list"></ul><script>(() => {var ndcontainer = document.getElementById("js-list");if(!ndcontainer) {return;}for (let i = 0; i < 300; i++) {const nditem = document.createElement("li");nditem.innerText = i + 1;ndcontainer.appendChild(nditem);}//事件代理ndcontainer.addEventListener('click',function(e){const target = e.target;if(target.tagName === 'LI') {alert(target.innerHTML);}});})();
</script>
</body>
</html>
```
具体事件代理看： 1.http://www.jianshu.com/p/2c68c8ceef1c 2.http://blog.csdn.net/majian_1987/article/details/8591385
如果是插入300000个的li呢？会有什么问题，该怎样改进，会出现明显的卡顿感，怎么解决？出现卡顿感的渲染帧率(FPS)过低。而实际上，包含300000个li，用户不会立即看到全部，大部分也不会看，那部分都没有渲染的必要，好在现代浏览器提供了requestAnimationFrameAPI来解决非常耗时的代码段对渲染的阻塞问题，不知道requestAnimationFrame用法和原理的请研究下这篇文章。所以，可以从减少DOM操作次数、缩短循环时间两个方面减少主线程阻塞的时间。减少DOM操作次数的良方是DocumentFragment；缩短循环时间则考虑用分治的思想把300000个li分批插入到页面中，每次插入的时机是在页面重新渲染之前。由于requestAniamtionFrame并不是所有的浏览器都支持，Paul lrish给出了对应的polyfill。
```
<!DOCTYPE html>
<html lang="zh">
<title>往空的ul中插入值为1,2,3的li</title>
<head></head>
<body><ul id = "js-list"></ul><script>(() => {const ndContainer = document.getElementById('js-list');if(!ndContainer) {return;}const total = 300000;const batchSize = 4; //每批插入的节点次数，越大越卡const batchCount = total / batchSize; //需要批量处理多少次let batchDone = 0;//已经完成的批处理个数function appendItems() {const fragment = document.createDocumentFragment();for(let i = 0;i < batchSize;i++) {const ndItem = document.createElement('li');ndItem.innerText = (batchDone * batchSize) + i + 1;fragment.appendChild(ndItem);}//每次批处理只修改1次DOMndContainer.appendChild(fragment);batchDone += 1;doBatchAppend();}function doBatchAppend() {if(batchDone < batchCount) {window.requestAnimationFrame(appendItems);}}//kickoffdoBatchAppend();ndContainer.addEventListener('click',function(e){const target = e.target;if(target.tagName === 'LI') {alert(target.innerHTML);}});})();
</script>
</body>
</html>
```

DOM树的遍历使用广度优先遍历BFS，

<!DOCTYPE html>
<html lang="zh">
<title>往空的ul中插入值为1,2,3的li</title>
<head></head>
<body><div class="root"><div class="container"><section class="sidebar"><ul class="menu"></ul></section><section class="main"><article class="post"></article><p class="copyright"></p></section></div>
</div>
<script>const traverse = (ndRoot) => {const stack = [ndRoot];while (stack.length) {const node = stack.shift();printInfo(node);if (!node.children.length) {continue;}Array.from(node.children).forEach(x => stack.push(x));}
};const printInfo = (node) => {console.log(node.tagName, `.${node.className}`);
};// kickoff
traverse(document.querySelector('.root'));</script>
</body>
</html>

DOM操作的函数或属性
事件-如何使用事件及IE和标准DOM事件模型之间存在的差别

转载于:https://my.oschina.net/xiaomu1994/blog/1528597

前端面试宝典(4)——必掌握相关推荐

＜ CSDN话题挑战赛第1期 - 前端面试宝典＞
CSDN话题挑战赛第1期活动详情地址:https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f 参赛话题:前端面试宝典话题描述:欢 ...
前端面试宝典。向未来开启计划
写在前面 CSDN话题挑战赛第1期活动详情地址:CSDN 参赛话题:前端面试宝典话题描述:欢迎各位加入话题创作得小伙伴,如果我没有猜错得话,我觉得你是应该同我一样是一位前端人.如今前端在IT事业中 ...
【前端面试宝典】超基础的vue知识
写在前面 CSDN话题挑战赛第1期活动详情地址:https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f 参赛话题:前端面试宝典话 ...
【前端面试宝典】计算机网络篇（1）
写在前面 CSDN话题挑战赛第1期活动详情地址:https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f 参赛话题:前端面试宝典话 ...
中高级前端面试宝典之浏览器篇
中高级前端面试宝典作为一名前端开发工程师,要掌握的知识点是多而杂的,在面试刷题阶段,经常没头没脑的,我将面试题系统化,分了好几个系列,祝愿大家(包括我)在这个疫情刚过去的互联网寒冬找到事儿少钱多
携手共筑前端面试宝典之JQUERY篇-王大师
写在前面本人详解作者:王文峰,参加过 CSDN 2020年度博客之星,<Java王大师王天师>作者公众号:山峯草堂,非技术多篇文章,专注于天道酬勤的 Java 开发问题.中国国学.传 ...
前端面试宝典 html css js ajax es6
面试宝典一.HTML和CSS 1 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 1 2. 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 1 3. ...
web前端面试宝典——带你直击面试重难点（40个经典题目，涵盖近90%的考点，码字2w，干货满满！）
系列文章目录 JavaScript 知识梳理,收录了web前端面试 95%以上的高频考点,满满的干货.给你做一个高效的知识梳理,为你的面试保驾护航! 内容参考链接 HTML & CSS 篇 ...
React 前端面试宝典
什么是React(谈一谈React) 从概念.用途.思路.优缺点入手: React 是一个网页 UI 框架,通过组件化的方式解决视图层开发复用的问题,本质是一个组件化框架. 它的核心设计思路有三点,分 ...
2022前端面试宝典（初级简洁版）
一.自我介绍一定要提前准备好逐字稿,重点是要把自己的经历和应聘的职业相关联.项目介绍注重你有哪些能力,主要熟练的技术栈,项目的类型和负责的部分模块等:职业经历简单说一下转换的理由,不能过分反应出自己 ...

前端面试宝典(4)——必掌握

前端面试宝典(4)——必掌握相关推荐

最新文章

热门文章