一、BOM对象
1、概念
BOM:浏览器对象模型(地址栏,历史记录,屏幕,滚动条,关闭),与浏览器交互的方法和接口。
2、顶级对象window
BOM的核心对象是window,它表示浏览器的一个实例。
-
属性
innerHeight(浏览器的高度,带滚动条) innerWidth(浏览器的宽度,带滚动条)
console.log(window.innerWidth);// 浏览器高
console.log(innerWidth);// 浏览器宽
console.log(document.body.clientWidth);//获取元素的可视宽度
-
方法
alert() 弹出框 等价于 window.alert() confirm()确认框 带返回值,点击确定返回true,点击取消返回false prompt()输入框 待返回值 返回你输入的内容 setInterval(回调函数,毫秒值)设置间歇型定时器 clearInterval(定时器名称) 清除间歇型定时器 setTimeout(回调函数,毫秒值) 设置延迟性定时器(超时定时器) clearTimeout 清除延迟性定时器(超时定时器) onload() : 等页面资源(页面图片,文字,标签)加载完毕后执行 onscroll(): 页面滚动时会触发 onresize(): 页面窗口变化时触发
3、window对象下的子对象(window可省略)
3.1、window.document 文档对象
-
属性
body 获取body documentElement 获取html
console.log(document.body); //获取body
console.log(document.documentElement); // 获取html
3.2、history 历史记录对象
-
方法
back() 后退一个页面 forward() 前进一个页面
console.log(history);
history.back();
history.forward();
history.go(-1) 往后退
history.go(1) 往前进
3.3、location 地址栏对象
-
属性
host: 主机域名 href: 地址栏信息 pathname: 路径名 port: 端口 protocol: 协议名 https http
-
方法
reload() 刷新
3.4、screen 屏幕对象
-
属性
width 屏幕宽 height 屏幕高
console.log(screen.width);//宽
console.log(screen.height);//高
3.5、navigator 浏览器对象
console.log(navigator);//查看浏览器相关信息
二、DOM对象
1、概念
DOM:文档对象模型(处理网页内容的方法和接口。)
2、获取元素的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="test"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<input type="text" name="abs">
<input type="text" name="abs">
<input type="text" name="abs">
</body>
</html>
- docuemnt.getElementById()
通过id名查找元素 只能获取1个。
//通过id名查找元素
var oId = docuemnt.getElementById()
- document.getElementsByClassName()
通过类名查找元素。
// 注意,返回的结果是一组数据,需要用[下标]获取
var oItems = document.getElementsByClassName('item')
console.log(oItems);
console.log(oItems[0]);
- document.getElementsByTagName()
通过标签名来获取元素。
// 同样获取的是一组数据,[下标]获取
var oDivs = document.getElementsByTagName('div')
console.log(oDivs[1]);// 获取的是页面的第2个div
- document.getElementsByName()
通过表单中的name属性来获取元素,获取的是多个
// 获取的是一组数据,[下标]获取
var oIpts = document.getElementsByName('abs');
console.log(oIpts[0]);
3、创建标签的方法
- createElement()
通过createElement() 方法创建标签。
var oDiv = document.createElement('div');//创建一个div标签
- className
通过className属性给标签添加类名。
oDiv.className = 'box';// 给标签添加类名为box
4、给元素设置样式
oDivs.style.width = getRandomNum()+'px'; //设置宽度
oDivs.style.height = getRandomNum()+'px';// 设置高度
oDivs.style.backgroundColor = getColor();// 设置背景色(-后面单词首字母大写)
oDivs.style.fontSize = getNum(10,80)+'px';// 字体大小
oDivs.style.color = "#000";//字体颜色
5、给元素设置内容
- innerHTML 支持标签
// 给元素添加一个a标签
oDivs.innerHTML = '<a href="http://www.baidu.com">百度</a>'
- innerText 不支持标签
// 添加内容
oDivs.innerText = '天气不错'; //不能添加标签
6、元素的删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="dele(this)">点击删除</button>
</body>
</html>
function dele(obj){
//删除点击删除的tr
var flag = confirm('确定删除吗?');//确认则返回true
if(flag){
//若为true
obj.parentNode.parentNode.remove();//删除父类的父类
}
}
- 经典案例
// 点击添加表格,内容为文本框输入的内容
function tableAdd(){
//首先判断文本框有没有内容,若没有,提示输入内容
if($('txt1').value == ''||$('txt2').value== ''||$('txt3').value ==''){
alert('请输入内容!');
return;
}
//获取tbody
//tbody 获取值为一组数据 需要在后面加[下标]获取
var oTbody = document.getElementsByTagName('tbody')[0];
//先创建一行
var oTr = document.createElement('tr');
//再创建四列,其中第四列存放是否删除的标签
var oTd1 = document.createElement('td');
var oTd2 = document.createElement('td');
var oTd3 = document.createElement('td');
var oTd4 = document.createElement('td');
//把td标签放到tr标签中 (把四列放到一行里)
oTr.appendChild(oTd1);
oTr.appendChild(oTd2);
oTr.appendChild(oTd3);
oTr.appendChild(oTd4);
// 把tr 放到tbody中, (把一行放到tbody里)
oTbody.appendChild(oTr);
//分别给四列添加内容,添加的内容为文本框用户自己输入的值
oTd1.innerText = $('txt1').value;
oTd2.innerText = $('txt2').value;
oTd3.innerText = $('txt3').value;
oTd4.innerHTML = '<input type="button" value="删除" οnclick="dele(this)">'
//添加完一行后,把文本框内容清空
$('txt1').value = $('txt2').value = $('txt3').value = '';
}
function dele(obj){
//点击删除按钮删除该行
var flag = confirm('确定删除吗?');
//点击确定,值为true
if(flag){
obj.parentNode.parentNode.remove()
}
}
// 点击生成留言板
function liuYan() {
//获取留言内容
var oTextArea = $('ttt');
//判断文本域内容是否为空
if(oTextArea.value == ''){
alert('请输入内容!');
return;
}
//获取ul标签
var oUl = document.getElementsByTagName('ul')[0];
//创建li标签 一个Li代表一条留言内容
var oLi = document.createElement('li');
//创建li里面的子标签
var oH = document.createElement('h4');
var oCont = document.createElement('p');
var oSpa = document.createElement('span');
//往li里的子标签添加内容
oH.innerText = '人名:世界很奇妙';
oCont.innerText = oTextArea.value;
oSpa.innerHTML = '时间:'+getDate();
console.log(oH);
console.log(oCont);
console.log(oSpa);
//把li标签添加到ul里
oUl.appendChild(oLi);
//把li里面的子标签添加到li里
oLi.appendChild(oH);
oLi.appendChild(oCont);
oLi.appendChild(oSpa);
//把文本域内容清空
$('ttt').value = '';
}