時間：2023-07-18 02:51:01 | 來源：網(wǎng)站運營
時間：2023-07-18 02:51:01 來源：網(wǎng)站運營
JavaScript - BOM DOM操作：微信公眾號搜索【程序媛小莊】，沒有白走的路，每一步都算數(shù)
在線咨詢
// 瀏覽器窗口的高度window.innerHeight?//瀏覽器窗口的寬度window.innerWidth?// 新建窗口打開頁面window.open('https://juejin.cn/user/298666235012894','','height=400px,width=400px,top=400px,left=400px')/*第一個參數(shù)：新建窗口打開的頁面的網(wǎng)址第二個參數(shù)：寫空即可第三個參數(shù)：新建窗口的位置和大小*/?// 關(guān)閉當前頁面window.close()// 瀏覽器的名稱(window對象可以省略)navigator.appName // "Netscape"?// 瀏覽器版本window.navigator.appVersion // "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"?// 表示當前是否是一個瀏覽器navigator.userAgent;// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"?// 查看當前瀏覽器運行在哪個平臺上navigator.platform;// "Win32"// 回退到上一頁history.back();?// 前進到下一頁window.history.forward();// 獲取當前頁面的urllocation.href;?// 跳轉(zhuǎn)到指定的urlwindow.location.href = '目標網(wǎng)址';?// 刷新頁面，作用相當于瀏覽器上的刷新功能window.location.reload();// 警告框: window.alter('彈出內(nèi)容')window.alert('warning!');?// 確認框： window.confirm('待確認的內(nèi)容')window.confirm('yes or no'); // 點擊確定返回true,點擊取消返回false?// 提示框： window.prompt('提示消息', '默認值')window.prompt('是否保存密碼', 'yes'); // 用戶輸入什么就返回什么?// 語法格式： setTimeout(js代碼, 毫秒)，表示多少毫秒之后自動執(zhí)行js代碼?function func() { alert('哈哈')}setTimeout(func,3000) // 單位為毫秒，3s后自動執(zhí)行func函數(shù)function func() { alert('哈哈')}let t = setTimeout(func,3000) // 單位為毫秒，3s后自動執(zhí)行func函數(shù)?clearTimeout(t) // 取消定時任務(wù)，需要用變量指代取消的定時任務(wù)function func() { alert('哈哈')}?function show() { let t = setInterval(func,3000); // 毫秒為單位 3秒之后自動執(zhí)行func函數(shù) function inner() { clearInterval(t) // 清除定時器 } setTimeout(inner,9000) // 9s后觸發(fā)inner函數(shù)}①先知道如何查找標簽
②使用DOM對標簽進行操作
③ DOM操作需要用關(guān)鍵字document開始
// 查找得到的對象命名通常是：標簽名ElepEles = document.getElementsByTagName('p'); // 根據(jù)標簽的標簽名查找，返回的是標簽合集pEle = pEles[0] // 獲取標簽集合中的第一個divEle = docunment.getElementByClassName('c1'); // 根據(jù)標簽屬性，獲取的是標簽集合divEle = document.getElementById('d1'); // 根據(jù)標簽的id查找，獲取的是標簽// 獲取p標簽的父節(jié)點pEle.parentElement;// 獲取第一個子標簽divEle.firstElementChild// 獲取最后一個子標簽divEle.lastElementChild// 同級別下面第一個標簽divEle.nextElementSibling // 上一個同級別的標簽divEle.previousElementSibling // 語法： let/var 名字 = document.createElement('標簽名');let aEle = document.createElement('a');var divEle = document.getElementById("d1");divEle.setAttribute("age","18")divEle.getAttribute("age")divEle.removeAttribute("age")// 自帶的屬性還可以直接.屬性名來獲取和設(shè)置imgEle.srcimgEle.src="..."// 指定節(jié)點插入位置：somenode.insertBefore(newnode, somenode的子節(jié)點);let divEle = document.getElementById('d1');let pEle = document.getElementByClassName('p1');divEle.insertBefore('aEle','pEle') // 指定標簽插入位置，將a標簽插入到div內(nèi)部的p標簽前面// 獲取標簽內(nèi)所有的文本divEle.innerText;// 內(nèi)部文本和標簽都拿到divEle.innerHTML;// 二者區(qū)別：divEle.innerText = 'heiheihei'"heiheihei"divEle.innerHTML = 'hahahaha'"hahahaha"divEle.innerText = '<h1>heiheihei</h1>' // 不識別html標簽"<h1>heiheihei</h1>"divEle.innerHTML = '<h1>hahahaha</h1>' // 識別html標簽"<h1>hahahaha</h1>"let seEle = document.getElementById('d2');// 獲取用戶數(shù)據(jù)標簽內(nèi)部的數(shù)據(jù)seEle.value;let fileEle = document.getElementById('d3');// 使用.value無法直接獲取文件數(shù)據(jù)fileEle.value; // 使用下述方式獲取用戶上傳的文件數(shù)據(jù)fileEle.files;fileEle.files[0] # 獲取文件數(shù)據(jù)let divEle = document.getElementById('d1');divEle.classList;// DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]divEle.classList.remove('bg_red');divEle.classList.add('bg_red')divEle.classList.contains('c1');// 會返回true 或者 falsedivEle.classList.toggle('bg_red')falsedivEle.classList.toggle('bg_red')truedivEle.classList.toggle('bg_red')falsedivEle.classList.toggle('bg_red')truelet pEle = document.getElementsByTagName('p')[0]undefinedpEle.style.color = 'red'"red"pEle.style.fontSize = '28px'"28px"pEle.style.backgroundColor = 'yellow'"yellow"pEle.style.border = '3px solid red'"3px solid red"<!--第一種-->// onclick就是鼠標點擊按鈕<button onclick="func1()">點我</button>;<script> function func1() { alert(111) } </script><!--第二種--><button id="d1">點我</button>;<script> let btnEle = document.getElementById('d1'); btnEle.onclick = function () { alert(222) } </script><head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { height: 200px; width: 200px; border: 3px solid black; border-radius: 50%; } .green { background: green; } .red { background: deeppink; } </style></head><body> <div id='d1' class=" green red"> </div> <button id="d2">變色</button> <script> let btnEle = document.getElementById('d2'); let divEle = document.getElementById('d1'); btnEle.onclick = function () { // 綁定點擊事件 // 動態(tài)修改div標簽的類屬性 divEle.classList.toggle('red') } </script></body><body> username:<input type="text" value="用戶名" id="i1"> <script> // 先獲得標簽對象 let iEle = document.getElementById('i1'); // 為標簽對象綁定事件 --- 獲取焦點 iEle.onfocus = function () { iEle.value = '' }; // 失去焦點 iEle.onblur = function () { iEle.value = '用戶名' } </script></body><head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { display: block; height: 30px; width:200px; } </style></head><body> time:<input type="text" id="d1"> <button id="d2">開始</button> <button id="d3">結(jié)束</button> <script> let t = null let inputEle = document.getElementById('d1'); let startEle = document.getElementById('d2'); let endEle = document.getElementById('d3'); // 定義展示時間函數(shù) function showTime() { let currentTime = new Date(); inputEle.value = currentTime.toLocaleString() } // 為開始按鈕綁定開始計時時間 startEle.onclick = function () { // if判斷限定計時器只能開設(shè)一個 if(!t){ t = setInterval(showTime,1000) } }; // 為停止按鈕綁定結(jié)束計時 endEle.onclick = function () { clearInterval(t); // 停掉計時器后，如果不將t設(shè)為空，將無法再次啟動計時器，因為計時器只有一個 t = null } </script></body><head><meta charset="UTF-8"></head><body> 省:<select name="" id="d1"> <option value="" selected disabled>--請選擇--</option> </select> 市:<select name="" id="d2"> <option value="" selected disabled>--請選擇--</option> </select> <script> // 獲得標簽對象 let proEle = document.getElementById('d1'); let cityEle = document.getElementById('d2'); // 模擬省市數(shù)據(jù) data = { "浙江": ["廊坊", "邯鄲",'唐山'], "杭州": ["朝陽區(qū)", "海淀區(qū)",'昌平區(qū)'], "浙江": ["威海市", "杭州市",'臨沂市'], '杭州':['浦東新區(qū)','靜安區(qū)','黃浦區(qū)'], '杭州':['南山區(qū)','寶安區(qū)','福田區(qū)'] }; // for循環(huán)獲取省 for (let key in data) { // 將省信息做成一個個option標簽，放入select標簽中 let optELe = document.createElement('option'); // 設(shè)置文本 optELe.innerText = key; // 設(shè)置value optELe.value = key; // 以上兩步相當于<option value=key>key</option> //將創(chuàng)建你好的option標簽放到省的select標簽中 proEle.appendChild(optELe) } // 模擬市數(shù)據(jù) // 文本域變化事件 change事件，實現(xiàn)的效果：選擇省就出現(xiàn)對應(yīng)的市信息 proEle.onchange = function () { // 獲取用戶選擇的省 let currentPro = proEle.value; // 獲取對應(yīng)的市 let currentCityList = data[currentPro]; // 清空select市中的所有option cityEle.innerHTML = ''; // for循環(huán)所有的市，放到第二個select標簽中 for (let i=0;i<currentCityList.length;i++){ let currentCity = currentCityList[i]; // 創(chuàng)建option標簽 let opEle = document.createElement('option'); // 設(shè)置文本 opEle.innerText = currentCity; // 設(shè)置value opEle.value = currentCity; // 將option標簽放入第二個select中 cityEle.appendChild(opEle) } } </script></body>文章首發(fā)于微信公眾號程序媛小莊，同步于掘金、本站。
碼字不易，轉(zhuǎn)載請說明出處，走過路過的小伙伴們伸出可愛的小指頭點個贊再走吧(?▽?)
關(guān)鍵詞：操作
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
