时间：2023-07-18 02:51:01 | 来源：网站运营
时间：2023-07-18 02:51:01 来源：网站运营
JavaScript - BOM DOM操作：微信公众号搜索【程序媛小庄】，没有白走的路，每一步都算数
在线咨询
// 浏览器窗口的高度window.innerHeight//浏览器窗口的宽度window.innerWidth// 新建窗口打开页面window.open('https://juejin.cn/user/298666235012894','','height=400px,width=400px,top=400px,left=400px')/*第一个参数：新建窗口打开的页面的网址第二个参数：写空即可第三个参数：新建窗口的位置和大小*/// 关闭当前页面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;// 跳转到指定的urlwindow.location.href = '目标网址';// 刷新页面，作用相当于浏览器上的刷新功能window.location.reload();// 警告框: window.alter('弹出内容')window.alert('warning!');// 确认框： window.confirm('待确认的内容')window.confirm('yes or no'); // 点击确定返回true,点击取消返回false// 提示框： window.prompt('提示消息', '默认值')window.prompt('是否保存密码', 'yes'); // 用户输入什么就返回什么// 语法格式： setTimeout(js代码, 毫秒)，表示多少毫秒之后自动执行js代码function func() { alert('哈哈')}setTimeout(func,3000) // 单位为毫秒，3s后自动执行func函数function func() { alert('哈哈')}let t = setTimeout(func,3000) // 单位为毫秒，3s后自动执行func函数clearTimeout(t) // 取消定时任务，需要用变量指代取消的定时任务function func() { alert('哈哈')}function show() { let t = setInterval(func,3000); // 毫秒为单位 3秒之后自动执行func函数 function inner() { clearInterval(t) // 清除定时器 } setTimeout(inner,9000) // 9s后触发inner函数}①先知道如何查找标签
②使用DOM对标签进行操作
③ DOM操作需要用关键字document开始
// 查找得到的对象命名通常是：标签名ElepEles = document.getElementsByTagName('p'); // 根据标签的标签名查找，返回的是标签合集pEle = pEles[0] // 获取标签集合中的第一个divEle = docunment.getElementByClassName('c1'); // 根据标签属性，获取的是标签集合divEle = document.getElementById('d1'); // 根据标签的id查找，获取的是标签// 获取p标签的父节点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")// 自带的属性还可以直接.属性名来获取和设置imgEle.srcimgEle.src="..."// 指定节点插入位置：somenode.insertBefore(newnode, somenode的子节点);let divEle = document.getElementById('d1');let pEle = document.getElementByClassName('p1');divEle.insertBefore('aEle','pEle') // 指定标签插入位置，将a标签插入到div内部的p标签前面// 获取标签内所有的文本divEle.innerText;// 内部文本和标签都拿到divEle.innerHTML;// 二者区别：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');// 获取用户数据标签内部的数据seEle.value;let fileEle = document.getElementById('d3');// 使用.value无法直接获取文件数据fileEle.value; // 使用下述方式获取用户上传的文件数据fileEle.files;fileEle.files[0] # 获取文件数据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 () { // 绑定点击事件 // 动态修改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">结束</button> <script> let t = null let inputEle = document.getElementById('d1'); let startEle = document.getElementById('d2'); let endEle = document.getElementById('d3'); // 定义展示时间函数 function showTime() { let currentTime = new Date(); inputEle.value = currentTime.toLocaleString() } // 为开始按钮绑定开始计时时间 startEle.onclick = function () { // if判断限定计时器只能开设一个 if(!t){ t = setInterval(showTime,1000) } }; // 为停止按钮绑定结束计时 endEle.onclick = function () { clearInterval(t); // 停掉计时器后，如果不将t设为空，将无法再次启动计时器，因为计时器只有一个 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'); // 模拟省市数据 data = { "浙江": ["廊坊", "邯郸",'唐山'], "杭州": ["朝阳区", "海淀区",'昌平区'], "浙江": ["威海市", "杭州市",'临沂市'], '杭州':['浦东新区','静安区','黄浦区'], '杭州':['南山区','宝安区','福田区'] }; // for循环获取省 for (let key in data) { // 将省信息做成一个个option标签，放入select标签中 let optELe = document.createElement('option'); // 设置文本 optELe.innerText = key; // 设置value optELe.value = key; // 以上两步相当于<option value=key>key</option> //将创建你好的option标签放到省的select标签中 proEle.appendChild(optELe) } // 模拟市数据 // 文本域变化事件 change事件，实现的效果：选择省就出现对应的市信息 proEle.onchange = function () { // 获取用户选择的省 let currentPro = proEle.value; // 获取对应的市 let currentCityList = data[currentPro]; // 清空select市中的所有option cityEle.innerHTML = ''; // for循环所有的市，放到第二个select标签中 for (let i=0;i<currentCityList.length;i++){ let currentCity = currentCityList[i]; // 创建option标签 let opEle = document.createElement('option'); // 设置文本 opEle.innerText = currentCity; // 设置value opEle.value = currentCity; // 将option标签放入第二个select中 cityEle.appendChild(opEle) } } </script></body>文章首发于微信公众号程序媛小庄，同步于掘金、本站。
码字不易，转载请说明出处，走过路过的小伙伴们伸出可爱的小指头点个赞再走吧(╹▽╹)
关键词：操作
