DOM
dom对象是HtmlElement类型
DOM document object model 文档对象模型 就是用js表示的标签
可以跟页面交互{
1.可以在js中获得到 标签
2.有哪交互(事件)
3.逻辑
}
JS操作HTML{
1.创建HTML
2.获取HTML 用JS修改样式 修改里面的内容 添加事件
3.删除HTML 清空标签 xx.innerHTML=""; 如：document.body.innerHTML="";
4.替换HTML
}
1.创建HTML{
document.createElement("标签名")
var p=document.createElement("p");
属性 在js也同样可以获取或设置属性 灬
注意：创建完得标签 需要放到指定 才能显示 步骤 1.创建HTML标签 2.放到某个容器
}
事件{
点击 onclick div.onclick=function(){}
}
通过js设置样式 div.style.background="aqua";
网页由哪几个部分组成
html 页面骨架
css 修饰美化 页面
js 交互
*/
/*
用Js创建html
*/
// document.createElement("标签名")
var p=document.createElement("p"); //p标签
var div=document.createElement("div");
var image=document.createElement("img");
// image.src="加藤惠.jpg";
image.src="https://www.baidu.com/img/dong_f17b19f600dbf0bfc9b8bed5836f50be.gif";
/*
* 把创建好的标签 放到 某个父元素里面
* 容器(父元素).appendChild(放的元素)
*/
document.body.appendChild(image);
/*
* 用js创建9个div 放到html
*/
// for(var i=1;i<5;i++){
// var div1=document.createElement("div");
// document.body.appendChild(div1);
// }
var row=3;
for(var i=0;i var div=document.createElement("div"); // div.style.background="aqua"; // div.style.color="red"; // div.style.opacity=0.2; if(i===2){ div.style.opacity=0.8; } div.onclick=function(){ // 判断 点击的这个元素 跟其他的元素颜色是不是一样？ // 判断 opacity // this 表示 点击的那个元素 if(this.style.opacity==0.8){ alert("颜色不一样") } }; document.body.appendChild(div); } /* * innerHTML 往标签里面放字符串格式标签 * innerText 往标签里面放文本内容 不能放字符串格式标签 * * 清空标签 * xx.innerHTML=""; */ // 清空 // document.body.innerHTML=""; /* dom 1.创建HTML元素 document.createElement("标签名"); 2.拼接到父元素中 document.父元素.appendChild(子元素) 3.设置html属性 元素.xx属性 = 属性 值; img.src = "1.jpg" div.style.background = "red"; 4.给标签添加点击事件 元素.onclick = function(){} 5.清空标签 document.元素.innerHTML=""; BOM Browser Object Model 浏览器对象模型 里面的内容是所有关于浏览器的操作 操作类型： 一.窗口对象 window窗口包含的部分 浏览器可视的范围 1.导航 2.历史记录 3.屏幕大小 4.位置 窗口对象 是window的实例对象 实例对象比如var data=New data; 注意：1.定义的全局变量 是定义到了window对象上面 可以通过window.xx访问 在最外面定义的函数 是定义到了window对象上面 可以通过window.xx访问 this表示 -> window对象 例如：var a=40-20; 控制台通过window.a访问 尺寸：window.innerHeight - 浏览器窗口的内部高度(包括滚动条) window.innerWidth - 浏览器窗口的内部宽度(包括滚动条) 如果是IE5、6、7、8 document.documentElement.clientHeight document.documentElement.clientWidth 事件： 1.resize 显示内容、屏幕尺寸发生改变的时候调用 2.load 等窗口里面的资源 加载完成的时候调用 二.Location 位置定位 location.hostname 返回 web 主机的域名 location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口 （80 或 443） 主机的端口 80 web页面的默认端口 443 https(加密的 超文本传输协议)(普通的http是没加密的,不需要开启443) 21 FTP(文件传输协议) 3306 mysql数据库默认 location.protocol 返回所使用的 web 协议（http: 或 https:） (!) location.search 返回搜索的结果（http GET方法的参数） 页面之间传参 就是网站搜索之后网址后面?开始后面的链接 location.href 本页的位置 指定页面要跳转到的位置 三.History 历史记录 前提:必须有历史记录 才能使用这些函数 1.back 必须跳转了下一个页面才有返回 2.forward 必须跳转过下一个页面(有返回过上一页)才能使用前进的功能 3.go 跳几级由里面数字决定 正数：往后跳(下面的页面) 负数：返回(往回跳) 四.Navigator 导航 1.geolocation获取地理位置信息。经纬度。谷歌浏览器获取不了.安卓手机可能需要开启GPS 谷歌可能需要梯子或者代理 getCurrentPosition 获取当前的位置信息。 参数(成功时候调用的函数,失败时候调用的函数) 举个栗子:BOM第二节课文件夹中的->获取地理位置信息.html 监听位置信息 watchPosition 参数(成功时候调用的函数,失败时候调用的函数) 返回值 用于停止监听的标记 停止监听 clearWatch 参数 watchPosition的返回值 用于停止监听的标记 2.getUserMedia、mediaDevices 音频流 视频流的处理 五.计时事件(单位都是毫秒) 定时器:每隔多久去实行一次setInterval(function(){},5000); 延迟执行:只执行一次 setTimeout(function(){},5000); 六.数据持久化 1.cookie 2.storage 3.websql 4.indexedDB 5.应用缓存 application cache */ /*举个栗子*/ var a=40-20; function f1(){ console.log("a"); } window.f1(); var f2=function(){ console.log("2"); } window.f2(); /*onresize=function(){ } 和下面的一个意思 */ // 动态获取 窗口内容的宽高 window.onresize=function(){ console.log(innerWidth,innerHeight,outerWidth,outerHeight); } // 打印window类 可以查看window类包含的全部属性 console.log(window); // 获取网站的域名 就是网址 console.log("获取网站的域名:",location.hostname); // 当前页面的路径和文件名 console.log("当前页面的路径和文件名:",location.pathname); // web 主机的端口 console.log("web 主机的端口:",location.port); // 查看协议用的是http还是https console.log("查看协议:",location.protocol); // 返回搜索的结果（http GET方法的参数） console.log("返回搜索的结果:",location.search); document.querySelector(".page").onclick=function(){ location.href="https://www.baidu.com"; } 创建日期对象 var date=new Date(); // 获取年份 console.log(date.getFullYear()); // 获取月份 月份需要加1 因为月份是从0开始计算的 console.log(date.getMonth()+1); // 获取日 console.log(date.getDate()); // 获取时 console.log(date.getHours()); // 获取分钟 console.log(date.getMinutes()); // 获取秒 console.log(date.getSeconds()); // 获取毫秒 console.log(date.getMilliseconds()); // 获取周 ***周日是0 周一是1…… console.log(date.getDay()); 时间戳 1970年开始到某个时间的 毫秒数 时间戳 转日期对象 的两个方法 new Date(1288336112000) var date = new Date(); date.setTime(1288336112000); var a = 4; switch (a) { case a = 0: console.log("星期日"); break; case a = 1: console.log("星期一"); break; case a = 2: console.log("星期二"); break; case a = 3: console.log("星期三"); break; case a = 4: console.log("星期"+a); break; case a = 5: console.log("星期五"); break; case a = 6: console.log("星期六"); break; default: console.log("阿巴阿巴"); break; }
BOM
DATE日期对象
switch写周一到周日