BOM和DOM 的定义
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。
BOM
BOM浏览器对象模型
BOM 使 JavaScript 有能力与浏览器进行“对话”。
location
window对象的子对象中的location
location.href 获取当前url:"https://www.cnblogs.com/clschao/articles/10092991.html"
location.href="URL" // 跳转到指定页面
示例:location.href = 'http://www.baidu.com';直接跳转到百度
location.reload() 重新加载页面,就是刷新一下页面
计时器相关
(计时器是异步的)
setTimeout计时器
setTimeout计时器,一段时间之后做某些事情
setTimeout('confirm("你好");',3000); #3秒之后执行前面的js代码
setTimeout(confirm('xxx'),3000); #如果写的不是字符串,会直接执行
setTimeout(function(){confirm('xxx')},3000); #最好写成函数
var a = setTimeout(function(){console.log('xxx')},3000); #a是浏览器来记录计时器的一个随机数字
clearTimeout(a) #清除计时器,通过这个数字可以清除
setInterval 计时器
setInterval 计时器,每隔一段时间做某些事情
var a = setInterval(function(){
console.log('xxx')},3000);
DOM
选择器
直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName 根据标签名获取标签合集
示例:
<div class="c1" id="d1">
待到将军归来日,朕与将军解战袍!
</div>
<div class="c1" id="d2">
日照香炉生紫烟,遥看瀑布挂前川!
</div>
var a = document.getElementById('d1'); # 获取id属性值为d1的标签 拿到的直接是标签对象
var a = document.getElementsByClassName('c1'); #获取class值为c1的所有标签 拿到的是数组
var a = document.getElementsByTagName('div'); #获取所有div标签 拿到的是数组
间接查找
var a = document.getElementById('d1');
a.parentNode #获取a这个标签的父级标签.(更强大)
a.parentElement; #获取a这个标签的父级标签.
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
创建节点(创建标签)
var a = document.createElement('标签名称');
示例,创建a标签
var a = document.createElement('a');
var dd = document.getElementById('dd'); 找到div标签
添加节点
#添加节点,添加到了最后
dd.appendChild(a);将创建的a标签添加到dd这个div标签里面的最后.
#在某个节点前面添加节点
父级标签.insertBefore(新标签,某个儿子标签)
示例
var dd = document.getElementById('dd'); #找到父级标签
var a = document.createElement('a'); #创建一个新的a标签
var d2 = dd.children[1]; #找到父级标签下的某个儿子标签
dd.insertBefore(a,d2); #将a标签插入到上面这个儿子标签的前面.
删除节点
dd.removeChild(d2); 父级标签中删除子标签
替换节点
var dd = document.getElementById('dd'); #找到父级标签
var a = document.createElement('a'); #创建a标签
a.innerText = '百度';
var d1 = dd.children[0]; #找到要被替换的子标签
dd.replaceChild(a,d1); #替换
文本操作
d1.innerText; 查看
设置:
d1.innerText = "<a href=''>百度</a>";
d1.innerHTML = "<a href=''>百度</a>"; 能够识别标签
属性操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18") #比较规范的写法
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
imgEle.src
imgEle.src="..."
值操作
var inp = document.getElementById('username');
inp.value; #查看值
inp.value = 'taibai'; #设置值
选择框:
<select name="city" id="city">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">深圳</option>
</select>
var inp = document.getElementById('city');
inp.value; #查看值
inp.value = '1'; #设置值
class的操作
var d = document.getElementById('oo');
d.classList; #获得这个标签的class属性的所有的值
d.classList.add('xx2'); #添加class值
d.classList.remove('xx2'); #删除class值
d.classList.contains('xx2'); #判断是否有某个class值,有返回true,没有返回false
d.classList.toggle('xx2'); #有就删除,没有就增加
css操作
var d = document.getElementById('oo');
d.style.backgroundColor = 'deeppink'; 有横杠的css属性,写法要去掉横杠,并且横杠后面的单词首字母大写
d.style.height = '1000px'
事件
事件里面的this
表示当前标签对象
this表示当前标签对象
<div id="d1" class="c1" onclick="f1(this);"></div>
function f1(ths) {
// var d = document.getElementById('d1');
// d.style.backgroundColor = 'yellow';
ths.style.backgroundColor = 'yellow';
var d = document.getElementById('d2');
d.style.backgroundColor = 'yellow';
}
<div id="d1" class="c1"></div>
var d = document.getElementById('d1');
d.onclick = function () {
this.style.backgroundColor = 'yellow';
// d.style.backgroundColor = 'yellow'; //this表示当前标签对象
}
事件
JS是以事件驱动为核心的一门语言
事件的三要素：
事件源，绑定事件，事件驱动程序
（1）获取事件源：document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
（2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
（3）书写事件驱动程序：关于DOM的操作
常见事件
1、获取事件源（DOM节点的获取）
获取事件源的常见方式如下：
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签
var arr1 = document.getElementsByTagName("div1"); //方式二：通过 标签名 获得 标签数组，所以有s
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
2、绑定事件的方式
方式一：直接绑定匿名函数
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第一种方式
div1.onclick = function () {
alert("我是弹出的内容");
}
</script>
方式二：先单独定义函数，再绑定
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第二种方式
div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("我是弹出的内容");
}
</script>
方式三：行内绑定
<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是弹出的内容");
}
</script>
3、事件驱动程序
<style>
#box {
width: 100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box" ></div>
<script type="text/javascript">
var oDiv = document.getElementById("box");
//点击鼠标时，原本粉色的div变大了，背景变红了
oDiv.onclick = function () {
oDiv.style.width = "200px"; //属性值要写引号
oDiv.style.height = "200px";
oDiv.style.backgroundColor = "red"; //属性名是backgroundColor，不是background-Color
}
</script>
onload事件（单击）
当页面加载（文本和图片）完毕的时候，触发onload事件。
<div id="d1" class="c1"></div>
var d = document.getElementById('d1');
d.onclick = function () {
d.style.backgroundColor = 'yellow';
}
定时器例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>定时器</title>
</head>
<body>
<input type="text" id="timer">
<button id="start">开始</button>
<button id="end">结束</button>
<script>
var timetag;
// 1 获取当前时间
function f1() {
var showTime = new Date();
var showLocaleTime = showTime.toLocaleString();
var inpEle = document.getElementById('timer');
inpEle.value = showLocaleTime;
}
// 2 把时间放进去
// 2.1 找到strat开始按钮,绑定点击事件
var startBtn = document.getElementById('start');
startBtn.onclick = function () {
//2.2 找到input标签,并将值放到input标签里面
f1();
if (timetag === undefined){
timetag = setInterval(f1,1000);
}
};
// 3 停止时间
var endBtn = document.getElementById('end');
endBtn.onclick = function () {
clearInterval(timetag);
timetag = undefined;
}
</script>
</body>
</html>
onchange事件（select）
<select name="" id="jishi">
<option value="1">太白</option>
<option value="2">alex</option>
<option value="3">沛齐</option>
</select>
// onchange事件，内容发生变化时触发的事件
var s = document.getElementById('jishi');
s.onchange = function () {
//this.options select标签的所有的option标签
//this.selectedIndex被选中的标签在所有标签中的索引值
console.log(this.options[this.selectedIndex].innerText + '搓的舒服');
}
用户名:<input type="text" id="username">
//input标签绑定onchange事件
var inp = document.getElementById('username');
inp.onchange = function () {
console.log(this.value);
};
地址
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>select联动</title>
</head>
<body>
<select id="province">
<option>请选择省:</option>
</select>
<select id="city">
<option>请选择市:</option>
</select>
<script>
var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
// 1 将省份的数据放到省份的下拉框里面
//1.1 找到省份下拉框
var proSelect = document.getElementById('province');
// 1.2 创建option标签
//1.3 将数据放到option标签中,并将option标签放到省份下拉框里面
for (var province in data){
var proOption = document.createElement('option');
proOption.innerText = province;
proSelect.appendChild(proOption);
}
//2 选择省份,将被选择的省份的市都放到市的那个下拉框里面
var citySelect = document.getElementById('city');
proSelect.onchange = function () {
citySelect.innerText = '';
var proText = this.options[this.selectedIndex].innerText;
var cityData = data[proText];
for (var cityindex in cityData){
var cityOption = document.createElement('option');
cityOption.innerText = cityData[cityindex];
citySelect.appendChild(cityOption);
}
}
</script>
</body>
</html>