一、BOM
‘’’
1、windows
常用一些方法
2、navigator
对象
3、screen
对象和history
对象
4、 location
对象
- location.href 获取当前网址
- location.href = “http://www.baidu.com” 跳转指定网址
- location.reload() 重新加载
5、
6、计时
二、DOM
1、直接查找标签:
- 通过id查找(有且只能找到一个):
document.getElementById("d1")
- 通过class查找(找到的可以是多个):
document.getElementsByClassName("c1")
- 根具标签名查找(找到的可以是多个):
document.getElementsByTagName("p")
2、间接查找:
2、创建节点
3、添加节点:
4、删除和替换节点
5、获取值
6、属性:
1、.属性名 = “属性值”
2、自定义属性只能用:
.setAttribute("s9","xixi")
:设置属性
.getAttribute("s9")
:获取属性
.removeAttribute("s9")
:删除指定的属性
7、文本操作:
-
设置文本内容:
xxx.innerText = ""
-
设置标签内容:
xxx.innerHTML =" <p>我是p标签</p>"
-
获取值的区别:
1.innerText
: 只取文本内容
2.innerHTML
: 子标签和子标签文本内容都取
获取值(input
/select
/`textarea):input标签.value select标签.value textarea标签.value
8、样式操作:
- 通过class名去改变样式
获取标签所有样式:
1.className
-->得到字符串
2.classList
-->得到的是数组
使用classList操作样式:
1..classList.contains("样式类")
-->判断包不包含指定样式类
2..classList.add("样式类")
-->添加指定的样式类
3..classList.toggle("样式类")
-->有就删除没有就添加
4..classList.remove("样式类")
-->删除指定样式类
- 指定CSS操作
8、通用事件
注意:涉及DOM
操作的JS
代码要放在body
标签内部最下面
- 常用事件:
1、onclick
2、ondbclick
3、onfocus
4、onblur
5、onchange
- 绑定事件的方式
1、在标签里直接写属性(onclick = foo())
2、通过JS给标签绑定事件
this
–>代表的是触发事件的当前标签
三、DOM练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>DOM查找标签</title>
</head>
<body>
<div id="d1">div</div>
<p class="c1">p标签</p>
<p class="c2"></p>
<form action="">
<lable>用户名
<input type="text" name="username" id="i1">
<input type="button" id="start" value="开始">
<input type="button" id="stop" value="停止">
</lable>
<lable>
<input type="text" value="要开心鸭!" id="i2">
<input type="button" id="" value="搜索">
</lable>
<lable>男
<input name="gender" value="0" type="radio">
</lable>
<lable>女
<input name="gender" value="1" type="radio">
</lable>
<select name="from" id="s1">
<option >--请选择</option>
<option value="000">北京</option>
<option value="001">上海</option>
<option value="010">陕西</option>
</select>
<select name="loction" id="s2">
</select>
<textarea id="t1" name="memo" cols="30" rows="10">
</textarea>
</form>
<script>
//作业练习:
/*
1、在input框内显示当前时间
var t;
function foo()
{
//1、获取当前时间
var NowTime = new Date();
var nowstr = NowTime.toLocaleString();
//2、把时间放进框内
var i1Ele = document.getElementById("i1");
i1Ele.value = nowstr;
}
//3、点开始让时间动起来(找到开始按钮给它绑定事件)
var StartButton = document.getElementById("start");
StartButton.onclick = function()
{
if (t == undefined)
t = setInterval(foo,1000) // 1000毫秒执行一次
}
//4、点开始让时间动起来(找到开始按钮给它绑定事件)
var StopButton = document.getElementById("stop");
StopButton.onclick = function()
{
clearInterval(t) // 清除t事件(清除t对应的定时器但是t的那个值还在)
t = undefined
}*/
/*
//2、搜索框示例
var i1Ele = document.getElementById("i2");
i1Ele.onfocus = function() //鼠标在框内点击
{
this.value = ""; //把value清空
}
i1Ele.onblur = function()//鼠标是否在框外点击
{
if(!this.value.trim())//.trim:去空格
this.value = "要开心鸭!";
}*/
//3、select联动
//给第一个select绑定onchange事件
var data = {"000":["北大","清华","北影"],
"001":["小河","小溪","小湖"],
"010":["西安","宝鸡","渭南"]}
var s1Ele = document.getElementById("s1");
s1Ele.onchange = function()
{
var areas = data[this.value];//获取当前数据
var s2Ele = document.getElementById("s2")
s2Ele.innerHTML = "" //清空上次的标签及内容
for (var i = 0;i<areas.length;i++)
{
var opEle = document.createElement("option")//新建option标签
opEle.innerText = areas[i];//添加内容
s2Ele.appendChild(opEle);//添加标签
}
}
</script>
</body>
</html>
作业练习1展示页面:
作业练习3展示页面: