2022web前端全栈完整整理——（四）js篇

原创已于 2022-11-30 21:45:18 修改 · 693 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #js和es6 #防抖节流 #闭包作用域

于 2022-05-08 12:24:58 首次发布

前端同时被 2 个专栏收录

37 篇文章

订阅专栏

javascript

19 篇文章

订阅专栏

这篇博客汇总了前端开发的关键知识点，包括js基础、ES6特性、DOM操作方法如getElementById和querySelector，以及Vue中使用ref获取DOM元素的技巧。同时介绍了事件处理、元素与文本节点的创建、原型链和闭包等JavaScript核心概念。还涉及防抖和节流函数的实现，以及前端面试题和实用前端资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

更多前端资料，《前端Tool》小程序。

1. js基础：https://alex-ss.blog.csdn.net/article/details/83014082

2. es6篇：https://alex-ss.blog.csdn.net/article/details/87071089

3. DOM节点=元素节点+文本节点+属性节点，node.nodeType返回节点类型【元素节点1，属性节点2，文本节点3【此时node.nodeValue返回/修改文本节点的值】】。

4. js获取dom元素：getElementById、getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll。

5. vue中通过ref获取dom元素的几种方式：https://blog.csdn.net/qq_42231156/article/details/124460377

6. js获取/设置属性：getAttribute、 setAttribute

7. vue的ref属性获取/设置标签的样式：https://blog.csdn.net/qq_42231156/article/details/88547360

8. 获取dom的所有子元素组成的数组：node.childNodes、node.firstChild等价于node.childNodes[0]。

9. dom下的键盘按下事件：onkeypress。

10. 创建元素节点：document.createElement(nodeName)

11. 创建文本节点：document.createTextNode(text)

12. 在指定元素前插入新元素：parent.insertBefore(newNode,targetNode)

13. 在指定元素后插入新元素：parent.insertAfter(newNode,targetNode)

14. dom尾部追加元素节点/文本节点：parent/appendChild(child)

15. 原型和原型链：函数独有的原型prototype，所有类型都有_proto__，构造函数（new），console.dir()打印完整信息。

16. 防抖：将多次触发修改为一次触发，如输入框动态输入远程搜索。

function antiShake(fn,wait){
    let timer =null;
    return args=>{
        if(timer) clearTimeout(timer);
        timer=setTimeout(fn,wait)
    }
}

17. 节流：在一定时间内，只允许触发第一次，如表单提交，按钮点击....

function throttle(fn,wait){
    let timer=null;
    return function(){
        if(!timer){
            timer=setTimeout(()=>{
                fn();
                clearTimeout(timer)
            },wait)
        }
    }
}

18. 闭包：函数内返回函数，作用域链，私有作用域，闭包会造成内存泄漏。

19. 2022年前端面试题整理：https://blog.csdn.net/z1832729975/article/details/123431083

https://blog.csdn.net/qq_54753561/article/details/122149197

https://blog.csdn.net/m0_52789121/article/details/123120125

20.git小乌龟TorToiseGit：https://blog.csdn.net/m0_60150025/article/details/123554878

21.Q-dir：分屏管理文件工具。

22.chromedirver.exe不同版本下载路径：https://registry.npmmirror.com/binary.html?path=chromedriver/

23. Node.js 实用包和资源列表：https://zhuanlan.zhihu.com/p/385852664

24. vue2/3的函数式组件：https://blog.csdn.net/qq_42231156/article/details/124720740