建站宝盒全能版,怎么在微信上做网站,平面设计实习报告,专业性行业网站有哪些DOM操作
DOM#xff0c;全称(Document Object Model)#xff0c;文档对象模型。
提供操作HTML的方法#xff08;操作页面元素#xff09;
获取节点 --- 操作元素标签
bodydiv idbox我是盒子标签/divp classtext全称(Document Object Model)文档对象模型。
提供操作HTML的方法操作页面元素
获取节点 --- 操作元素标签
bodydiv idbox我是盒子标签/divp classtextp标签/pulli第一个/lili第二个/lili第三个/li/uldiv classbox用类名的盒子1/divdiv classbox用类名的盒子2/divscript// 打印document 全局对象console.log(document);// 通过元素id,定义变量来获取对应标签let box document.getElementById(box);console.log(box);// 通过类名,定义变量来获取对应标签let text document.getElementsByClassName(text);console.log(text);// 通过标签名定义变量来获取对应let list document.getElementsByTagName(li); //获取页面中所有的li标签 得到的数据是一个集合console.log(list);console.log(list[0]); //打印第一个li标签// 如果想看到每一项可以通过循环遍历出来for (let i 0; i list.length; i) {// i对应获取到的元素数组的下标console.log(list[i]);}// 通过css选择器来获取元素// 通过选择接收let wrap document.querySelector(.box);console.log(wrap); //控制台中只打印了第一个// 获取多个相同的元素 集合 let wrap1 document.querySelectorAll(.box);console.log(wrap1);/script
/body
操作html元素内容
bodydiv idboxspan不开心/span/divp classtext好多内容/pscript// innerHTML 获取元素的内容包括标签let Box document.getElementById(box);console.log(Box.innerHTML); //span不开心/spanlet Span document.getElementsByTagName(span);console.log(Span[0].innerHTML);// 标签[0]被替换Span[0].innerHTMLGO;// 通过赋值方法在标签后面添加Span[0].innerHTML come on;let text document.querySelector(.text);console.log(text);text.innerHTML123;// 插入标签 innerHTML会解析标签text.innerHTMLa hrefhttps://www.baidu.com/点我/a// innertext 不解析标签text.innertexta hrefhttps://www.baidu.com/点我/a/script
/body
操作标签属性
bodydiv idbox classtext title你好加油/divimg src../11.jpg alt classpicscriptlet Box document.querySelector(#box);// 截取id名console.log(Box.id);// 获取标题描述console.log(Box.title);// 获取类名 class是关键字获取classNameconsole.log(Box.className);// 标签自带属性要合理合法id class title src alt name等let pic document.querySelector(.pic);console.log(pic.src);// 赋值修改其他路径pic.src../22.jpg;/script
/body
操作样式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.tit1{color: antiquewhite;font-size: 20px;background-color: blue;}.wrap{width: 200px;height: 300px;background-color: aqua;}.wr{background-color: brown;width: 100px;height: 100px;}/style
/head
bodyh1 classtit1不想学习/h1div classbox text1123/divscriptlet title document.querySelector(.tit1);// 修改文字颜色title.style.colorskyblue;
// 需要访问元素节点 style属性 先获取样式对象 里面包含css属性// 更改文字大小title.style.fontSize30px;
// 如果css属性包含连接符- 都删除掉连接的首字母大写小驼峰写法title.style.backgroundColoraquamarine;// 类名操作let box document.querySelector(.box);// 使用.className 新加类名删除类名都会比较麻烦// box.classNamewrap;
// 推荐用classList来操作类名// 添加类名box.classList.add(wrap);// 删除类名box.classList.remove(text1);// 有则删 无则加box.classList.toggle(wrap);box.classList.toggle(wr);/script
/body
/html
操作节点 div classwrapphello/p/divscript/*动态操作节点1.创建节点 createElement()2.添加节点 appendChild() 末尾插入3.在某个元素的子节点前添加节点 insertBefore()4.替换节点 replaceChild(替换的值被替换的值)5.删除节点 removeChild*/let wrap document.querySelector(.wrap);console.log(wrap);// 创建节点let newP document.createElement(p);// 添加节点wrap.appendChild(newP);// 在创建的标签里面添加文本内容let text document.createTextNode(welcome!);// 给newP添加创建的文本内容newP.appendChild(text);// 创建一个新的节点let box document.createElement(a);box.innerHTML good!; // wrap.appendChild(box);// 在wrap上第二个子节点前插入 wrap.insertBefore(box,wrap.children[1]);// 打印元素子节点集合console.log(wrap.children);// 替换节点// 创建一个新的节点let bo document.createElement(h2);// 插入文字在新的h2上bo.innerHTML一花;// 把wrap第一个子节点替换掉 replaceChild(要替换的被替换的)wrap.replaceChild(bo,wrap.children[0]);// 删除节点// 把wrap的第三个子节点删除wrap.removeChild(wrap.children[2]);/script
监听事件
事件描述onclick点击鼠标左键时触发事件onmouseover鼠标移动到某个元素时触发事件onmouseout鼠标离开某个元素范围时触发事件onblur当前元素失去焦点时触发事件onfocus当某个元素获得焦点时触发事件onscroll当滚动浏览器的滚动条时触发事件 绑定事件触发事件元素.监听事件function(){ }
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0px;padding: 0px;}.box {width: 100px;height: 100px;background-color: antiquewhite;}/* .box:active{background-color: aquamarine;} */.advertisement{width: 100px;height: 200px;background-color: brown;}.x-code{width: 20px;height: 20px;border: 1px solid palegoldenrod;float: right;text-align: center;}#btn{width: 60px;height: 30px;outline:none;}.wrap{width: 500px;height: 400px;background-color: cadetblue;margin: 20px auto;}/style
/headbodydiv classbox我是盒子/divdiv classadvertisementp classx-codex/p广告/divbutton idbtn按钮/buttondiv classwrap盒子/divdiv classwrap盒子/divdiv classwrap盒子/divscriptlet box document.querySelector(.box);// 点击事件box.onclick function () {// console.log(box.innerText);box.style.backgroundColor pink;}// 关闭广告let close document.querySelector(.x-code),adv document.querySelector(.advertisement);// 点击close类名标签close.onclick function(){// 修改样式 把display属性变成noneadv.style.display none;}// 当鼠标移动到某个元素时触发事件box.onmouseover function(){console.log(鼠标移进盒子了);}// 当鼠标移出某个元素范围时触发事件box.onmouseout function(){console.log(鼠标移出盒子了);}// 点击input 获取焦点触发事件btn.onfocus function(){btn.style.border1px solid pink;}// 失去焦点触发事件btn.onblur function(){console.log(失去焦点了);}let wrap document.querySelector(.wrap)// 滚动滚动条触发事件window.onscroll function(){console.log(正在滚动滚动条);wrap.style.backgroundColorpink;}/script
/body/html BOM
BOM全称(Browser Object Model)浏览器对象模型。
定时器
body!-- 定时器 --scriptfunction fn(){console.log(打印文字中);}// setTimeout 循环一次// 第一个参数接收回调函数// 第二个参数延迟时间(ms) 1s1000mssetTimeout(fn,1000);// setTnterval() 循环多次let time setInterval((){console.log(呀吼)},2000) // 每隔两秒执行一次// 清除多次定时器clearInterval(time)// 代码执行十次就暂停let sum 0;let set setInterval((){console.log(打印);sum;// 判断代码是否执行十次 清除定时器if (sum10){clearInterval(set)}},1000)/script
/body
重要对象 script// 用户当前的url信息console.log(location);// 点击页面文档跳转对应的地址document.onclick function(){location.hrefhttps://www.baidu.com/}// 返回当前窗口上一条历史记录history.back();// 返回下一条历史记录history.forward();// 获取浏览器相关信息console.log(navigator);/script
math对象 script// 用户当前的url信息console.log(location);// 点击页面文档跳转对应的地址document.onclick function(){location.hrefhttps://www.baidu.com/}// 返回当前窗口上一条历史记录history.back();// 返回下一条历史记录history.forward();// 获取浏览器相关信息console.log(navigator);// math对象// 圆周率console.log(Math.PI);// Math对象具有数学常数 具有数学属性和方法console.log(Math);// Math.abs() 返回指定数值的绝对值console.log(Math.abs(-10)); //10console.log(Math.abs(null)); //0// 伪随机数 范围0~1console.log(Math.random()); //0.3485665674792038// 取0~100的随机数let num Math.random()*100; //88.0133275792085console.log(num);// 取整数 parseIntconsole.log(parseInt(num)); //88// 四舍五入 Math.round()console.log(Math.round(11.5)); //12console.log(Math.round(-22.5)); //-22// 向下取整Math.floorconsole.log(Math.floor(11.5)); //11console.log(Math.floor(-12.6)); //-13// 向上取整Math.ceilconsole.log(Math.ceil(13.5)); //14console.log(Math.ceil(-22.5)); //-22/script
