su37josephxia / frontend-interview Goto Github PK

• B栈视频
• 掘金文章

（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入、复制
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //在已有的子节点前插入一个新的子节点
cloneNode() //复制
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName()//通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于 name值的)
getElementById() //通过元素Id，唯一性

https://juejin.cn/post/6844903569087266823

• 需要对元素进行复杂擦欧洲哦时,可以先隐藏(display:"none"),操作完成后再显示.

• 需要创建多个DOM节点时,使用DocumentFragment创建完之后一次性的加入documnet

• 缓存Layout属性值,如:var left =elem.offsetLeft;

这样,多次使用left产生一次回流

• 尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其他元素回流)

• 避免使用css表达式(expression),因为每次调用都会重新计算值(包括加载页面)

• 尽量使用css属性简写,如:用border代替border-width,border-style,border-color

• 批量修改元素样式:elem.style.xxx

1、 使用超级链接，代码如：

2、 表单提交，代码如：

3、 JS代码，代码如：

location. href=”url”;
location.assign(‘url’) ; location.replace( ) ;
location.reload( ) ;
window.open(‘url’) ;
history.go( ) ;

对于元素节点，获取其某属性的值有多种方式，如下所示：1、 element.attributes[下标].value
2、 element.attributes['属性名'].value
3、 element.getAttributeNode('属性名').value
4、 element.getAttribute('属性名')

①property只是一个JS对象的属性的修改
②Attribute是对html标签属性的修改

使用 js代码为页面动态添加5个按钮，每个按钮上的文本为“button1”、“button2”…“button5”。单击每个按钮时，分别弹出数字1、2…5。

for (var i= 1; i< 6; i++) {
var input = document.createElement( 'input' ) ;
input.setAttribute("type", "button") ;
input.setAttribute("value", "button" + i);
(function (n) {
input.onclick= function () { alert(n); }; })(i);
document.body. appendChild(input) ;

• B栈视频
• 掘金文章

• B栈视频
• 掘金文章

• B栈视频
• 掘金文章

• B栈视频
• 掘金文章

页面有文本框，需要限制该文本框中只能录入数字，即：如果用户按下数字以外的其他键，文本框中无法录入；如果用户粘贴进非数字字符，也需要进行过滤。

首先，需要为文本框定义 onkeypress事件，用于在录入文本时做出判断；并为文本框定义 onkyeup事件，用于过滤粘贴进来的文本。 HTML代码如下所示：

输入框中只能输入数字 请输入您的年龄：

JS代码如下所示：

//当按键按下时，阻止非数字字符的输入
function digitOnly(event) {
var code= event.keyCode | | event.which; //ie| |firefox if( (code<48) | | (code>57) ) {
if(event.preventDefault) { //firefox
event.preventDefault( ) ;

}
/ /当按键弹起时 ， 剔除输入中的非中文字符——解决复制粘贴进来的非数字function filterChar(input){
input.value= input.value.replace(/ [^0-9] /g, ' ' ) ;
}

将频繁的操作改为一次性操作，通过创建文档碎片，最后一次性加入文档碎片。

1、 通过 HTML中的信息选取元素，比如：

a) getElementById()方法：根据元素的 id属性值查询单个节点；

b) getElementsByTagName()方法：根据元素标签的名称查询节点；

c) getElementsByName()方法：根据元素 name属性的值查询节点。

2、 通过 CSS类选取元素

a) getElementsByClassName('className')方法：根据class名称选取元素；

b) querySelector('selector')和 querySelectorAll('selector')方法：根据 CSS选择器
选取元素。

3、 通过 document对象选取，如 document.all、 document.body等；

4、 通过节点遍历选取节点，如 parentNode、 firstChild等。

• B栈视频
• 掘金文章

• B栈视频
• 掘金文章

e.getAttribute(),是标准DOM操作文档元素属性的方法,具有通用性可在任意

文档上使用,返回元素在源文件中设置的属性

e.propName通常是在HTML文档中访问特定元素的特性,浏览器解析元素后生成

对应对象(如 a标签生成HTMLAnchorElement),这些对象的特性会根据特定规则

结合属性设置得到,对于对应特性的属性,只能使用getAtrribute进行访问

• e.getAttribute()返回值是源文件中设置的值，类型是字符串或者 null（有的实现返回""）

• e.propName 返回值可能是字符串、布尔值、对象、undefined 等

• 大部分 attribute 与 property 是一一对应关系，修改其中一个会影响另一个，如 id，title 等属性

• 一些布尔属性<input hidden/>的检测设置需要 hasAttribute 和 removeAttribute 来完成，或者设置对应 property

• 像<a href="../index.html">link</a>中 href 属性，转换成 property 的时候需要通过转换得到完整 URL

• 一些 attribute 和 property 不是一一对应如：form 控件中<input value="hello"/>对应的是 defaultValue，修改或设置 value property 修改的是控件当前值，setAttribute 修改 value 属性不会改变 value property

• B栈视频
• 掘金文章

1、 直接在 HTML代码中添加，如：

其中， funcA()为一个有效函数。

2、 在 js代码中添加，如：

btn.onclick= funcA;

或者

btn.onclick= function() {};

其中， btn表示按钮对象。

3、 定义监听函数，代码如：

btn.addEventListener( 'click' , function( ) { }) ;

1.查找时,如果只用一个条件就可查询出结果时,优先选择易用的按选择器查找.

2.添加时,尽量减少操作DOM树的次数,减少重排重绘。如果同时添加父元素和子元素,

应先将子元素添加到父元素,最后再将父元素添加到DOM树。如果添加多个平级子元素,

则应先将子元素添加到文档片段,最后,再将文档片段添加到DOM树.

3.修改时,尽量减少重排重绘。如果同时修改多个元素的内容和样式。应使用class批量修改样式.

4.事件绑定时,应尽量利用冒泡减少事件监听的个数.

树结构

1.绑定位置不同:不利用冒泡绑定在目标元素上,利用冒泡绑定在父元素上.

2.监听对象的个数不同:不利用冒泡会反复创建多个监听,利用冒泡始终只有

一个监听.

3.动态生成元素:不利用冒泡无法自动获得事件处理函数,必须反复绑定

利用冒泡可让动态添加的子元素自动获得父元素的处理函数,无需反复绑定.

1.返回值不同:按HTML查找返回动态集合,按选择器查找返回非动态集合

2.效率不同:按HTML查找效率高,按选择器查找效率低

3.易用性不同:当条件复杂时,按HTML查找繁琐,而按选择器查找简单

document.ready和onload的区别——JavaScript文档加载完成事件。页面加载完成有两种事件:
一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）
二是onload，指示页面包含图片等文件在内的所有元素都加载完成。
jQuery中$(function(){/* do something*/});他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。

• B栈视频
• 掘金文章

• B栈视频
• 掘金文章

1

1

捕获、目标触发、冒泡

捕获阶段：由外向内,依次记录各级父元素上的事件处理函数。

只记录,暂不触发。

目标触发:优先触发目标元素上的事件处理函数。

冒泡:由内向外，依次触发各级父元素上的事件处理函数.

https://juejin.cn/post/6844904165672484871#heading-10

• 私有作用域
• IIFE
• 循环赋值
• 单例
• 科里化
• 惰性函数、柯里化函数、compose函数。
• 计算缓存

var square = (function () {
    var cache = {};
    return function(n) {
        if (!cache[n]) {
            cache[n] = n * n;
        }
        return cache[n];
    }
})();

对象：Window、 document、 location、 screen、 history、 navigator 、data
方法：Alert()、 confirm() 、prompt()、 open() 、close()

占坑

• B栈视频
• 掘金文章

arguments不是真正的数组，是一个类数组对象，有length和下标，但是没有数组的方法

类数组转数组方式：

1、Array.from(arguments)
2、es6扩展运算符[...arguments]
3、Array.prototype.slice.call(arguments)

直接在DOM里绑定事件：
在JS里通过onclick绑定：xxx.onclick = test
通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)

①获取DOM节点，以及节点的property和Attribute
②获取父节点，获取子节点 childNodes
③新增节点，删除节点

• B栈视频
• 掘金文章

占坑