（九）JS-WEB-API（DOM、BOM、事件、Ajax、存储）【每个工程师必须熟练掌握的技能】

最新推荐文章于 2022-03-24 15:35:53 发布

lj1530562965

最新推荐文章于 2022-03-24 15:35:53 发布

阅读量851

点赞数

分类专栏：前端知识体系文章标签： javascript 前端面试

本文链接：https://blog.csdn.net/lj1530562965/article/details/106836672

版权

提问

DOM

DOM是哪种数据结构
树（DOM树）
DOM操作的常用API
DOM节点操作、DOM结构操作
attr和property的区别
一次性插入多个DOM节点，考虑性能

BOM

如何识别浏览器的类型
分析拆解url的各个部分

事件

编写一个通用的事件监听函数
描述事件冒泡的流程
无限下拉的图片列表，如何监听每个图片的点击

Ajax

手写一个简易的ajax
跨域的常用实现方式

存储

描述cookie localStorage sessionStorage的区别

从JS基础知识到JS-WEB-API

JS基础知识，规定语法（ECMA 262标准）
JS-WEB-API,网页操作的API（W3C标准）
前者是后者的基础，两者结合才能真正实际应用

JS基础知识

变量的类型和计算
原型和原型链
作用域和闭包
异步

JS-WEB-API

DOM
BOM
事件绑定
ajax
存储

DOM（Document Object Model）

Vue和React框架应用广泛，封装了DOM操作
但DOM操作一直都会是前端工程师的基础，必备知识
只会Vue不懂DOM操作的前端程序员，不会长久

DOM本质

html语言，html文件解析出来的一棵树
在这里插入图片描述

DOM节点操作

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>dom 演示</title>

        <style>
            .container {
   
                border: 1px solid #ccc;
            }
            .red {
   
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="div1" class="container">
            <p id="p1">一段文字 1</p>
            <p>一段文字 2</p>
            <p>一段文字 3</p>
        </div>
        <div id="div2">
            <img src="https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg"/>
        </div>
        <ul id="list">
        </ul>

        <script src="./dom-3.js"></script>
    </body>
</html>

获取DOM节点


const div1 = document.getElementById('div1') //元素
console.log('div1', div1)

const divList = document.getElementsByTagName('div') // 集合
console.log('divList.length', divList.length)
console.log('divList[1]', divList[1])

const containerList = document.getElementsByClassName('container') // 集合
console.log('containerList.length', containerList.length)
console.log('containerList[1]', containerList[1])

const pList = document.querySelectorAll('p') // 集合
console.log('pList', pList)

attribute
通过修改或者获取js的属性来改变页面样式、页面渲染结构的一种形式，Dom结构js变量的修改

const pList = document.querySelectorAll('p')
const p1 = pList[0]

// property 形式
p1.style.width = '100px'
console.log( p1.style.width )
p1.className = 'red'
console.log( p1.className )
console.log(p1.nodeName)
console.log(p1.nodeType) // 1

property
修改标签的属性，Dom结构节点属性修改

// attribute
const pList = document.querySelectorAll('p')
const p1 = pList[0]
p1.setAttribute('data-name', 'imooc')
console.log( p1.getAttribute('data-name') )
p1.setAttribute('style', 'font-size: 50px;')
console.log( p1.getAttribute('style') )

总结

property：修改对象属性，不会体现到html结构中
attribute：修改html属性，会改变html结构
两者都有可能引起DOM重新渲染
最好使用property

DOM结构操作

新增/插入节点

const div1 = document.getElementById(

最低0.47元/天解锁文章

lj1530562965

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
（九）JS-WEB-API（DOM、BOM、事件、Ajax、存储）【每个工程师必须熟练掌握的技能】

JS-WEB-API提问DOM从JS基础知识到JS-WEB-APIJS基础知识JS-WEB-APIDOMDOM本质DOM节点操作DOM结构操作DOM性能提问DOMDOM是哪种数据结构DOM操作的常用APIattr和property的区别一次性插入多个DOM节点，考虑性能从JS基础知识到JS-WEB-APIJS基础知识，规定语法（ECMA 262标准）JS-WEB-API,网页操作的API（W3C标准）前者是后者的基础，两者结合才能真正实际应用JS基础知识变量的类型和计算原
复制链接

扫一扫

专栏目录