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也同样可以获取或设置属性 灬
<img src="1.jpg">
注意：创建完得标签 需要放到指定 才能显示 步骤 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<row*row;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
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";
}
DATE日期对象
创建日期对象
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);
switch写周一到周日
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;
}
