BOM对象
location对象
location.href
# 获取URL
location.href="http://www.baidu.com"
# 跳转到指定页面
location.reload()
# 重新加载页面,就是刷新一下页面
定时器
setTimeOut() # 一段时间之后执行某个内容,执行一次
# 示例
var a = setTimeout(function f1(){confirm("are you ok?");},3000);
var a = setTimeout("confirm('xxxx')",3000); # 单位毫秒
# 清除计时器
clearTimeout(a);
setInterval() # 每隔一段时间执行一次,重复执行
# 示例
var b = setInterval('confirm("xxxx")',3000);单位毫秒
# 清除计时器
clearInterval(b);
DOM对象
查找标签
直接查找
document.getElementById
# 根据ID获取一个标签
document.getElementsByClassName
# 根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName
# 根据标签名获取标签合集
# 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" id="d1">
are you ok?
</div>
<div class="c1 c2">
div2
</div>
</body>
</html>
# 操作:
var divEle = document.getElementById('d1');
# divEle
# 结果:
<div class="c1" id="d1">
are you ok?
</div>
var divEle = document.getElementsByClassName('c1');
# divEle
# HTMLCollection(2) [div#d1.c1, div.c1.c2, d1: div#d1.c1]
# divEle[0]
# 结果:
<div class="c1" id="d1">
are you ok?
</div>
var divEle = document.getElementsByTagName('div');
# divEle
# HTMLCollection(2) [div#d1.c1, div.c1.c2, d1: div#d1.c1]
# divEle[0]
# 结果:
<div class="c1" id="d1">
are you ok?
</div>
间接查找
parentElement
# 父节点标签元素
children
# 所有子标签
firstElementChild
# 第一个子标签元素
lastElementChild
# 最后一个子标签元素
nextElementSibling
# 下一个兄弟标签元素
previousElementSibling
# 上一个兄弟标签元素
# 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" id="d1">
are you ok?
<span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
</div>
<div class="c1 c2">
div2
</div>
</body>
# 操作:
var divEle = document.getElementById('d1');
# 找父级:
divEle.parentElement;
# 结果:
<body>
<div class="c1" id="d1">
are you ok?
<span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
</div>
<div class="c1 c2">
div2
</div>
</body>
# 找儿子们:
divEle.children;
# 结果:
HTMLCollection(3) [span#s1, span#s2, span#s3, s1: span#s1, s2: span#s2, s3: span#s3]
# divEle.children[0]
# 结果:
<span id="s1">span1</span>
# 找第一个儿子:
divEle.firstElementChild;
# 结果:
<span id="s1">span1</span>
# 找最后一个儿子:
divEle.lastElementChild;
# 结果:
<span id="s3">span3</span>
# 找下一个兄弟:
divEle.nextElementSibling;
# 结果:
<div class="c1 c2">
div2
</div>
标签操作
创建标签
var aEle = document.createElement('a');
添加标签
追加一个子节点(作为最后的子节点)
somenode.appendChild(newnode)；
# 示例:
var divEle = document.getElementById('d1')
divEle.appendChild(aEle)
把增加的节点放在某个节点前边
somenode.insertBefore(newnode,某个节点);
# 示例:
# 找到父级标签div:
var divEle = document.getElementById('d1');
# 创建a标签:
var a = document.createElement('a');
# 添加文本内容:
a.innerText = 'baidu';
# 找到div的子标签span2:
var span2 = document.getElementById('s2');
# 将a添加到span2的前面:
divEle.insertBefore(a,span2);
删除节点
# 获得要删除的元素，通过父元素调用该方法删除。
somenode.removeChild(要删除的节点)
# 示例(删除span2标签):
var divEle = document.getElementById('d1');
var span2 = document.getElementById('s2');
divEle.removeChild(span2);
替换节点
# somenode是父级标签，然后找到这个父标签里面的要被替换的子标签，然后用新的标签将该子标签替换掉, 同删除节点的操作
somenode.replaceChild(newnode, 某个节点);
文本节点操作
var divEle = document.getElementById("d1")
divEle.innerText
# 输入这个指令，一执行就能获取该标签和内部所有标签的文本内容
# "are you ok? span1 span2 span3"
divEle.innerHTML
# 获取的是该标签内的所有内容，包括文本和标签
#
" are you ok?
<span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
"
设置值
var div1 = document.getElementById('d1');
div1.innerText = 'xxx';
# "xxx div2"
div1.innerText = '<a href="">百度</a>';
# "'<a href="">百度</a>' div2"
div1.innerHTML = '<a href="">百度</a>';
# "百度(a标签) div2"
属性操作
# 选中标签
var divEle = document.getElementById("d1");
# 设置属性
divEle.setAttribute("age","18")
# 获取属性值
divEle.getAttribute("age")
# 移除属性
divEle.removeAttribute("age")
# 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
# 操作:
<a href="http://www.baidu.com">百度</a>
var a = document.getElementsByTagName('a');
# 获取值
a[0].href;
# 设置值
a[0].href = 'xxx';
获取值操作
获取值
var inpEle = document.getElementById('username');
inpEle.value;
设置值
inpEle.value = "alexDsb"
select选择框
获取值
var selEle = document.getElementById("select1");
selEle.value;
设置值
selEle.value = "1"
类操作
# 首先获取标签对象
标签对象.classList; # 标签对象所有的class类值
# 删除指定类
标签对象.classList.remove(cls)
# 添加类
标签对象.classList.add(cls)
# 存在返回true, 否则false
标签对象.classList.contains(cls)
# 存在就删除, 否则添加
标签对象.classList.toggle(cls)
css设置
# 对于没有中横线的CSS属性一般直接使用style.属性名即可
# 对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可
设置值
divEle.style.backgroundColor = "yello";
获取值
divEle.style.backgroundColor;
事件
常用事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
示例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cc1 {
100px;
height: 100px;
background-color: red;
}
.cc2 {
background-color: green;
}
</style>
</head>
<body>
<div class="cc1 xx xx2" id="d1">
</div>
<script>
var divEle = document.getElementById('d1');
divEle.onclick = function () {
divEle.style.backgroundColor = 'purple';
}
</script>
</body>
</html>
绑定事件的方式
方式1:
<script>
# 找到标签
var divEle = document.getElementById("d1")
# 给标签绑定事件
divEle.onclick = function() {
divEle.style.backgroundColor = "purple";
}
</script>
方式2:
# 标签属性写事件名称 = 某个函数();
<div class = "cc1 xx xx2" id = "d1" onclick="f1()"></div>
# js里面定义这个函数
<script>
function f1(){
var divEle = document.getElementById("d1")
}
</script>