BOM 浏览器对象模型
window对象
location
location.href 获取URL location.href='URL' 跳转到指定页面 location.reload() 刷新,重新加载页面
弹出框 alert('python')
确认框 confirm('你确定吗?')
提示框 prompt('请在下方输入','你的答案')
setTimeout
setTimeout('JS语句',毫秒数) 一段时间后做某件事情
var t = setTimeout(function(){alert('123');},3000); # 3秒后出现弹出框,内容为123,返回一个随机id值,用t接收一下 clearTimeout(t); # 取消定时器装置,如果在3秒内clear,弹出框不会出现
setInterval
setInterval('JS语句',毫秒数) 每隔一段时间做某件时间
var s = setInterval(function(){console.log('123');},3000); # 每隔3秒打印一次123,也会返回随机id值,用s接收 clearInterval(s); # 取消setInterval设置
DOM 文档对象模型
查找标签
直接查找
document.getElementById() 根据ID获取一个标签
document.getElementsByClassName() 根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName() 根据标签名获取标签合集
间接查找
标签对象.parentElement 父节点标签元素
标签对象.children 所有子标签
标签对象.firstElementChild 第一个子标签元素
标签对象.lastElementChild 最后一个子标签元素
标签对象.nextElementSibling 下一个兄弟标签元素
标签对象.previousElementSibling 上一个兄弟标签元素
标签操作
创建标签 createElement('标签名')
a = document.createElement('a');
添加标签
在最后追加一个子节点 标签对象.appendChild('标签名')
在某个节点前面增加节点 标签对象.insertBefore('标签名',指定标签元素)
删除标签
标签对象.removeChild(标签对象) 通过父标签删除
替换标签
标签对象.replaceChild(新标签对象,要替换的标签对象) 通过父标签替换
文本操作
标签对象.innerText 获取标签和内部所有标签的文本内容 标签对象.innerText = '文本' 设置标签的文本内容 标签对象.innerHTML 获取标签内的所有内容,包括文本和标签 标签对象.innerHTML = '文本' HTML可以识别字符串内的标签,text不能识别
属性操作
attribute属性操作 标签对象.setAttribute("属性名","属性值") 添加自定义属性 标签对象.getAttribute("属性名") 通过属性名获取值 标签对象.removeAttribute("属性名") 删除属性 标签自带的属性可以直接通过.的方式来获取,自定义的属性不可以
获取值操作
标签对象.value 标签对象.value = '内容' 给标签赋值 适用于 input select textarea
css直接的样式操作
对于没有中横线的CSS属性一般直接使用style.属性名 标签对象.style.margin = 0 对含有中横线的CSS属性，将中横线后面的第一个字母换成大写 标签对象.style.backgroundColor = 'red';
class操作
className 获取所有样式类名
标签对象.classList
标签对象.classList.add(类名) 添加类
标签对象.classList.contains(类名) 判断是不是包含类名,返回布尔值
标签对象.classList.toggle(类名) 切换 存在就删除,不存在就添加
事件
onclick 当用户点击某个对象时调用的事件句柄
ondblclick 当用户双击某个对象时调用的事件句柄
onfocus 元素获得焦点
onblur 元素失去焦点 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘按键被松开
onload 一张页面或一幅图像完成加载
onmousedown 鼠标按钮被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标移到某元素之上
onselect 在文本框中的文本被选中时发生
onsubmit 确认按钮被点击，使用的对象是form
绑定方式
// 在标签内部 <body> <div id="d1" onclick="f1(this);">这是div</div> </body> <script> function f1(ths) { ths.style.backgroundColor="green"; } </script>
// 仙女找到需要绑定的标签对象,直接定义函数 <body> <div id="d1">这是div</div> </body> <script> dive = document.getElementById('d1'); dive.onclick = function () { this.innerText="哈哈哈"; # 哪个标签触发,就将哪个标签对象传给this } </script>
onload
window.onload事件在文件加载过程结束的时候触发
.onload()函数存在覆盖现象 不可以写多个onload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="timer">
<button id="start" >开始</button>
<button id="end" >结束</button>
</body>
<script>
var btn1 = document.getElementById('start');
var btn2 = document.getElementById('end');
var interval_sign;
function t() {
// 设置定时器获取本地时间
var time = new Date();
var time_str = time.toLocaleString();
//将时间放进input框内
var inpe = document.getElementById('timer');
inpe.value = time_str;
}
btn1.onclick = function () {
//先开启定时器
t();
//为了确保不管点击多少次开始,都只开启一个定时器,需要设置全局变量做判断
if (interval_sign === undefined) {
interval_sign = setInterval(t,1000);
}
}
btn2.onclick = function () {
//清除定时器设置
clearInterval(interval_sign);
//将全局变量设置成原始状态,下次开启时,需要重新做判断
interval_sign = undefined;
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
省份:<select name="" id="province"></select>
城市:<select name="" id="city"></select>
</body>
<script>
var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
var pro = document.getElementById('province');
var cit = document.getElementById('city');
for(var one_pro in data) {
//创建选项标签
var ope = document.createElement('option');
//将对象中的数据添加到标签内容中
ope.innerText = one_pro;
//将option标签添加到下拉框中
pro.appendChild(ope);
}
var init_value = pro.value;
if (!init_value) {
}else {
var init_city_list = data[init_value];
for (var init_one_city in init_city_list) {
var init_opt_city = document.createElement('option');
init_opt_city.innerText = init_city_list[init_one_city];
cit.appendChild(init_opt_city)
}
}
pro.onchange = function () {
//清除之前的city数据
cit.innerText = '';
var select_pro = this.options[this.selectedIndex].innerHTML;
//获取省份对应的城市数组
var city_list = data[select_pro];
//循环将城市数据添加到option标签内
for(var city in city_list) {
var ope_city = document.createElement('option');
ope_city.innerText = city_list[city];
//将option标签添加到city的下拉框中
cit.appendChild(ope_city)
}
}
</script>
</html>