01、描述事件冒泡的流程
基于 DOM 樹結構，事件會順著觸發元素向上冒泡
點擊一個div，會一級一級向父級、爺級元素上冒泡，這個點擊事件不僅能被這個div捕捉到，也能被他的父級、爺爺級…元素捕捉到
例如：
<style>
div{
width:200px;
height: 200px;
background-color: red;
}
</style>
<div id="idv1">
<button id="btn">點擊</button>
</div>
let aBtn = document.getElementById("btn")
let oDiv = document.getElementById("div1")
aBtn.onclick = function (){
console.log(0)
}
oDiv.onclick = function (){
console.log(1)
}event.stopPropagation() ; 阻止時間冒泡--->在子級
aBtn.onclick = function (event){
event.stopPropagation()
console.log(0)
}02、?限下拉的圖?串列，如何監聽每個圖?的點擊？
<ul id="uli">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
let uli = document.getElementById("uli")
uli.onclick = function (event){
if(event.target.nodeName === "LI"){ // tagName
console.log(event.target) // 獲取觸發的元素
}
}
</script>03、你常?哪些BOM API？
navigator物件包含了所有瀏覽器的配置資訊
// navigator.platform：作業系統型別；
// navigator.userAgent：瀏覽器設定的User-Agent字串，
// navigator.appName：瀏覽器名稱；
// navigator.appVersion： 瀏覽器版本；
// navigator.language：瀏覽器設定的語言；
// navigator.cookieEnabled: 判斷cookie是否啟用(true是啟用了)
// navigator.plugins — 是個集合 判斷是否安裝了指定插件(plugin)location保存的是瀏覽器地址欄相關資訊：獲取當前視窗地址，可以改變當前視窗的地址
// location.protocal: 協議名 （http）
// location.host: 主機名+埠號 （aa.cn:8080）
// location.hostname: 主機名 （aa.cn）
// location.port: 埠號 （8080）
// location.pathname: 相對路徑 （ test/index.html）
// location.search: ?及其之后的查詢字串 （?username=shuai&kw=帥）
// location.hash: #錨點名history物件保存當前視窗打開后，成功訪問過的url的歷史記錄堆疊，內容不對開發人員開放，無法修改，只能進行三個操作：
前進：history.go(1); //前進一次
后退：history.go(-1);
重繪：history.go(0);screen 物件包含有關用戶螢屏的資訊，
// window.innerHeight - 瀏覽器視窗的內部高度 // window.innerWidth - 瀏覽器視窗的內部寬度 包含滾動條可視區寬高： document.documentElement.clientWidth 可視區 寬度 不包含滾動條 document.documentElement.clientHeight 可視區 高度 不包含滾動條滾動距離：document.documentElement.scrollTop IE其他瀏覽器 document.documentElement.scrollLeft //橫向
04、DOM有哪些常?的API？
獲取元素:
// const oUl = document.querySelector("ul");
// const oUl = document.querySelector("body #ul1");
// const oUl = document.getElementsByTagName("ul")[0];
// const oUl = document.getElementById("ul1");
// const oUl = document.getElementsByClassName("ul1")[0];
// const oUl = document.querySelectorAll("ul")[0];
// const oDiv = document.getElementById("div1");
// const oUl = oDiv.querySelectorAll("ul1");創建節點:
createElement
獲取元素:
childNodes
offsetParent
parentNode
插?元素（剪切）
appendChild
insertBefore
洗掉元素
removeChild
05、?次性插?多個DOM節點，考慮性能
const oF = document.createDocumentFragment(); function tinajia() {
for (let i = 0; i < 100; i++) {
let lis = document.createElement('li')
oF.appendChild(lis)
}
uli.appendChild(oF)
}
tinajia();06、attr和property的區別？
property 操作不體現到HTML結構中
attribute 會改變HTML結構
兩者都有可能引起DOM重新渲染
let div1 = document.getElementById('div1')
// property
div1.index = 1;
console.log(div1.index);
// attr
div1.setAttribute("index", "1");
console.log(div1.getAttribute("index"));07、cookie、localStorage、sessionStorage區別？
cookie
最?存4k
http請求會攜帶cookie，增加請求資料??
document.cookie
localStorage
sessionStorage
最?存盤5M
http請求不攜帶 localStorage
localStorage
本地永久存盤，除?代碼洗掉或?動洗掉
sessionStorage
資料只存在當前會話，瀏覽器關閉則清空08、跨域常?實作?式有哪些？
所有的跨域都必須經過server端允許與配合
【JSONP】
$.ajax({
url:"http://localhost:20002/MyService.ashx?
callback=?",
dataType:"jsonp",
jsonpCallback:"person",
success:function(data){
alert(data.name + " is a a" + data.sex);
}
});
【CORS】
response.setHeader('Access-Control-Allow-Origin',
'http://baidu.com')
response.setHeader('Access-Control-Allow-Headers', 'XRequested-With')
response.setHeader('Access-Control-Allow-Methods',
'PUT,POST,GET,DELETE,OPTIONS')
response.setHEader('Access-Control-Allow-Credentials',
'true')
同源策略：
協議、域名、端?三者必須?致
加載圖?、css、js?視 "同源策略"09、?寫?個簡易的 ajax
const url = "./data2.json"; function ajax(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.responseText));
} else if (xhr.status === 404) {
reject(new Error("404，，，，"));
}
}
};
});
} const oBtn = document.getElementById("btn1");
oBtn.onclick = fn;
async function fn() {
try {
let data = https://www.cnblogs.com/LiuSan/p/await ajax(url);
console.log(data);
} catch (err) {
console.error(err);
}
} function ajax(url, fn) {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true); // true 異步 false 同步
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// if (fn) {
// fn(JSON.parse(xhr.responseText));
// }
fn && fn(JSON.parse(xhr.responseText));
}
}
};
xhr.send(null);
}轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/520681.html
標籤：JavaScript
上一篇：yarn和npm的區別