當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時間：2023/12/31 javascript 34 豆豆

生活随笔收集整理的這篇文章主要介紹了（九）JS-WEB-API（DOM、BOM、事件、Ajax、存储）【每个工程师必须熟练掌握的技能】小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

JS-WEB-API

提問
- DOM
- BOM
- 事件
- Ajax
- 存儲
從JS基礎(chǔ)知識到JS-WEB-API
- JS基礎(chǔ)知識
- JS-WEB-API
- - DOM（Document Object Model）
  - - DOM本質(zhì)
    - DOM節(jié)點操作
    - DOM結(jié)構(gòu)操作
    - DOM性能
  - BOM（Browser Object Model）
  - 事件
  - Ajax
  - - XMLHttpRequest
    - 狀態(tài)碼
    - - xhr.readyState
      - xhr.status
    - 跨域：同源策略，跨域解決方案
    - 手寫一個簡易的Ajax
    - 實際項目中ajax的常用插件
  - 存儲
  - - 描述cookie localStorage sessionStorage的區(qū)別

提問

DOM

DOM是哪種數(shù)據(jù)結(jié)構(gòu)
樹（DOM樹）
DOM操作的常用API
DOM節(jié)點操作、DOM結(jié)構(gòu)操作
attr和property的區(qū)別
一次性插入多個DOM節(jié)點，考慮性能

BOM

如何識別瀏覽器的類型
分析拆解url的各個部分

事件

編寫一個通用的事件監(jiān)聽函數(shù)
描述事件冒泡的流程
無限下拉的圖片列表，如何監(jiān)聽每個圖片的點擊

Ajax

手寫一個簡易的ajax
跨域的常用實現(xiàn)方式

存儲

描述cookie localStorage sessionStorage的區(qū)別

從JS基礎(chǔ)知識到JS-WEB-API

JS基礎(chǔ)知識，規(guī)定語法（ECMA 262標準）
JS-WEB-API,網(wǎng)頁操作的API（W3C標準）
前者是后者的基礎(chǔ)，兩者結(jié)合才能真正實際應(yīng)用

JS基礎(chǔ)知識

變量的類型和計算
原型和原型鏈
作用域和閉包
異步

JS-WEB-API

DOM
BOM
事件綁定
ajax
存儲

DOM（Document Object Model）

Vue和React框架應(yīng)用廣泛，封裝了DOM操作
但DOM操作一直都會是前端工程師的基礎(chǔ)，必備知識
只會Vue不懂DOM操作的前端程序員，不會長久

DOM本質(zhì)

html語言，html文件解析出來的一棵樹

DOM節(jié)點操作

<!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節(jié)點

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的屬性來改變頁面樣式、頁面渲染結(jié)構(gòu)的一種形式，Dom結(jié)構(gòu)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結(jié)構(gòu)節(jié)點屬性修改

// 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') )

總結(jié)

property：修改對象屬性，不會體現(xiàn)到html結(jié)構(gòu)中 attribute：修改html屬性，會改變html結(jié)構(gòu) 兩者都有可能引起DOM重新渲染最好使用property

DOM結(jié)構(gòu)操作

新增/插入節(jié)點

const div1 = document.getElementById('div1') const div2 = document.getElementById('div2')// 新建節(jié)點 const newP = document.createElement('p') newP.innerHTML = 'this is newP' // 插入節(jié)點 div1.appendChild(newP)// 移動節(jié)點 const p1 = document.getElementById('p1') div2.appendChild(p1)

獲取子元素列表，獲取父元素

// 獲取父元素 console.log( p1.parentNode )// 獲取子元素列表 const div1ChildNodes = div1.childNodes console.log( div1.childNodes )//還會含有text文本標簽，nodeType 等于3 const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child => {if (child.nodeType === 1) {return true}return false }) console.log('div1ChildNodesP', div1ChildNodesP)

刪除子元素

div1.removeChild( div1ChildNodesP[0] )

DOM性能

DOM操作非常“昂貴”，避免頻繁的DOM操作
對DOM查詢做緩存

//不緩存 DOM 查詢結(jié)果 for (let i = 0; i < document.getElementsByTagName('p').length; i++){//每次循環(huán)，都會計算length，頻繁進行DOM查詢 } //緩存 DOM 查詢結(jié)果 const pList = document.getElementsByTagName('p') const length = pList.length for (let i = 0; i < length ; i++){//緩存length，只進行一次DOM查詢 }

將頻繁操作改為一次性操作，一次性插入多個節(jié)點，考慮性能

const list = document.getElementById('list')// 創(chuàng)建一個文檔片段，此時還沒有插入到 DOM 結(jié)構(gòu)中 const frag = document.createDocumentFragment()for (let i = 0; i < 20; i++) {const li = document.createElement('li')li.innerHTML = `List item ${i}`// 先插入文檔片段中frag.appendChild(li) }// 都完成之后，再統(tǒng)一插入到 DOM 結(jié)構(gòu)中 list.appendChild(frag)console.log(list)

BOM（Browser Object Model）

navigator（瀏覽器信息）

const ua = navigator.userAgent const isChrome = ua.indexOf('Chrome') console.log(isChrome)

screen（屏幕信息，例如寬度高度等）

console.log(screen.width) console.log(screen.height)

location（地址信息）

console.log(location.href) console.log(location.protocol) //http:或https: console.log(location.pathname) console.log(location.search) console.log(location.hash)

history（前進后退信息）

history.back() history.forward()

事件

事件綁定

const btn = document.getElementById('btn1') btn.addEventListener('click', event => {console.log('clicked') }) //通用的綁定函數(shù) function bindEvent(elem,type,fn){elem.addEventListener(type,fn) } const a= document.getElementById('link1') bindEvent(a, 'click', (e)=> {// console.log(event.target) // 獲取觸發(fā)的元素event.preventDefault() // 阻止默認行為alert('clicked') })

事件冒泡
從下向上進行冒泡

<body><div id="div1"><p id="p1">激活</p><p id="p2">取消</p><p id="p3">取消</p><p id="p4">取消</p></div><div id="div2"><p id="p5">取消</p><p id="p6">取消</p></div> </body>const p1 = document.getElementById('p1') const body = document.body bindEvent(p1,'click',e => {e.stopPropagation() //阻止冒泡，可以注釋這一行，來體會事件冒泡，沒有這一行的話會先彈激活，再彈取消，有這一行只彈激活alert('激活') }) bindEvent(body,'click',e => {alert('取消') })

事件代理
代碼簡潔、減少瀏覽器內(nèi)存占用、但是不要濫用

<div id="div1"><a href="#">a1</a><a href="#">a2</a><a href="#">a3</a><a href="#">a4</a> </div> <button>點擊增加一個a標簽</button>const div1 = document.getElementById('div1') bindEvent(div1,'click',event => {event.preventDefault() // 阻止默認行為const target = event.targetif(target.nodeName === 'A'){alert(target.innerHTML)} }) <body><button id="btn1">一個按鈕</button><div id="div3"><a href="#">a1</a><br><a href="#">a2</a><br><a href="#">a3</a><br><a href="#">a4</a><br><button>加載更多...</button></div> </body> //通用的事件綁定函數(shù)，兼容事件綁定和事件代理 function bindEvent(elem, type, selector, fn) {if (fn == null) {fn = selectorselector = null}elem.addEventListener(type, event => {const target = event.targetif (selector) {// 代理綁定if (target.matches(selector)) {fn.call(target, event)}} else {// 普通綁定fn.call(target, event)}}) }// 普通綁定 const btn1 = document.getElementById('btn1') bindEvent(btn1, 'click', function (event) {// console.log(event.target) // 獲取觸發(fā)的元素event.preventDefault() // 阻止默認行為alert(this.innerHTML) })// 代理綁定 const div3 = document.getElementById('div3') bindEvent(div3, 'click', 'a', function (event) {event.preventDefault()alert(this.innerHTML) }) //描述事件冒泡的流程基于DOM樹形結(jié)構(gòu) 事件會順著觸發(fā)元素往上冒泡應(yīng)用場景：代理 //無限下拉的圖片列表，如何監(jiān)聽每個圖片的點擊事件代理用e.target獲取觸發(fā)元素用matches來判斷是否是觸發(fā)元素

Ajax

XMLHttpRequest

//get請求 const xhr = new XMLHttpRequest() xhr.open('GET', '/data/test.json', true) //true為異步，false為同步 xhr.onreadystatechange = function () {//這里的函數(shù)異步執(zhí)行if (xhr.readyState === 4) {if (xhr.status === 200) {// console.log(// JSON.parse(xhr.responseText)// )alert(xhr.responseText)} else if (xhr.status === 404) {console.log('404 not found')}} } xhr.send(null)//post請求 const xhr = new XMLHttpRequest() xhr.open('POST', '/login', true) //true為異步，false為同步 xhr.onreadystatechange = function () {//這里的函數(shù)異步執(zhí)行if (xhr.readyState === 4) {if (xhr.status === 200) {// console.log(// JSON.parse(xhr.responseText)// )alert(xhr.responseText)} else if (xhr.status === 404) {console.log('404 not found')}} } const postData = {name:"zhangsan",passsword:"xxx" ] xhr.send(JSON.stringify(postData))

狀態(tài)碼

xhr.readyState

0-（未初始化）還沒有調(diào)用send()方法
1-（載入）已調(diào)用send()方法，正在發(fā)送請求
2-（載入完成）send()方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容
3-（交互）正在解析響應(yīng)內(nèi)容
4-（完成）響應(yīng)內(nèi)容解析完成，可以再客戶端調(diào)用

xhr.status

2xx-表示成功處理請求，如200
3xx-需要重定向，瀏覽器直接跳轉(zhuǎn)，如301,302,304
4xx-客戶端請求錯誤，如404,403
5xx-服務(wù)器端錯誤

跨域：同源策略，跨域解決方案

什么是跨域（同源策略）

//同源策略//1.ajax請求時，瀏覽器要求當前網(wǎng)頁和server必須同源（安全）//2.同源：協(xié)議、域名、端口，三者必須一致//3.前端：http://a.com:8080/;server:https://b.com/api/xxx(線上默認80端口) //加載圖片 css js 可無視同源策略//1.<img src=跨域的圖片地址 />//2.<link href=跨域的css地址 />//3.<script src=跨域的js地址></script> //加載圖片 css js 可無視同源策略//1.<img />可用于統(tǒng)計打點，可使用第三方統(tǒng)計服務(wù)//2.<link /><script />可使用CDN，CDN一般都是外域//3.<script>可實現(xiàn)JSONP //跨域//1.所有的跨域，都必須經(jīng)過server端允許和配合//2.未經(jīng)server端允許就實現(xiàn)跨域，說明瀏覽器有漏洞，危險信號

JSONP

//訪問https://imooc.com/，服務(wù)端一定返回一個html文件嗎？ //服務(wù)器可以任意動態(tài)拼接數(shù)據(jù)返回，只要符合html格式要求 //同理于<script src="https://imooc.com/getData.js"> //<script>可繞過跨域限制 //服務(wù)器可以任意動態(tài)拼接數(shù)據(jù)返回 //所以，<script>就可以獲得跨域的數(shù)據(jù)，只要服務(wù)端愿意返回

jsonp.html

<!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>jsonp 演示</title></head><body><p>一段文字 1</p><script>window.abc = function (data) {//這是我們跨域得到的信息console.log(data)//{ name: 'xxx' }}</script><script src="http://localhost:8002/jsonp.js?username=xxx&callback=abc"></script></body> </html>

jsonp.js

abc({ name: 'xxx' } ) //jQuery實現(xiàn)jsonp $.ajax({url:'http://localhost:8882/x-origin.json',dataType:"jsonp",jsonpCallback:"callback",success:function(data){console.log(data);} });

CORS（服務(wù)端支持）- 服務(wù)器設(shè)置http header

//第二個參數(shù)填寫允許跨域的域名稱，不建議直接寫“*” response.setHeader("Access-Control-Allow-Origin","http://locaohost:8011") response.setHeader("Access-Control-Allow-Headers","X-Requested-With") response.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS") //接受跨域的cookie response.setHeader("Access-Control-Allow-Credentials","true")

手寫一個簡易的Ajax

function ajax(url,successFn) {const xhr = new XMLHttpRequest()xhr.open('GET', url, true)xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {successFn(xhr.responseText)}}}xhr.send(null) } function ajax(url) {const p = new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()xhr.open('GET', url, true)xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {resolve(JSON.parse(xhr.responseText))} else if (xhr.status === 404 || xhr.status === 500) {reject(new Error('404 not found'))}}}xhr.send(null)})return p }const url = '/data/test.json' ajax(url) .then(res => console.log(res)) .catch(err => console.error(err))

實際項目中ajax的常用插件

$.ajax
fetch
axios

存儲

本身用于瀏覽器和server通訊被“借用”到本地存儲來可用document.cookie = '...'來修改 document.cookie = 'a=100;b=200;' document.cookie //a=100 document.cookie = 'b=200;' document.cookie //a=100; b=200 document.cookie = 'a=300;' document.cookie //b=200; a=300 document.cookie = 'd=400;' document.cookie //b=200; a=300;d=400; //cookie缺點存儲大小，最大4KB http請求時需要發(fā)送到服務(wù)端，增加請求數(shù)據(jù)量只能用document.cookie = '...'來修改，太過簡陋

localStorage和sessionStorage

HTML5專門為存儲而設(shè)計，最大可存5M API簡單易用setItem，getItem 不會隨著http請求被發(fā)送出去 localStorage數(shù)據(jù)會永久存儲，除非代碼或手動刪除 sessionStorage數(shù)據(jù)只存在于當前會話，瀏覽器關(guān)閉則清空一般用localStorage會更多一些

描述cookie localStorage sessionStorage的區(qū)別

容量
API易用性
是否跟隨http請求發(fā)送出去

總結(jié)

以上是生活随笔為你收集整理的（九）JS-WEB-API（DOM、BOM、事件、Ajax、存储）【每个工程师必须熟练掌握的技能】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ai表格怎么做3d扭曲效果? AI矩形网
下一篇： c4d费马螺旋曲线怎么做? c4d柱体排