DOM概念
DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型
在HTML当中，一切都是节点
文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)
整个html文档就是一个文档节点。所有的节点都是Object
JavaScript的用途：
1.能够找到页面中的所有HTML元素
2.动态创建和删除元素
3.能够设置页面中的所有属性值
4.能够改变页面中的所有 CSS 样式
5.能够对页面中的所有事件做出反应
查找所有元素
直接查找
1.根据ID获取一个标签 Element
document.getElementById
var tet=document.getElementById("1");
tet.innerText;只显示文本内容
tet.innerText="只要你敢不懦弱，凭什么我们要错过"; #进行修改
2.根据class属性获取 注意是Elements。生成的是列表，就算只有一个标签，也是以列表的形式存在的
tet=document.getElementsByClassName("content");
tet.innerText;#undefined tet是个列表，查看文本内容更要有索引
tet；#[div.content, div.content]
tet[1].innerText="只要你敢不懦弱，凭什么我们要错过"; #进行修改
3.根据标签名获取标签合集
document.getElementsByTagName
tet[0]; #<p>明明就</p> 标签和内容均显示
tet[0].innerText; #"明明就"
间接查找
首先要找到一个标签，然后对其进行父标签和子标签的查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
var tet=document.getElementsByClassName("content");
tet[0].parentElement;
tet[0].children; #查到的子标签是数组
tet[0].children[0].innerText;
DOM代码放置位置
DOM相关代码放在script中，script放到body里面的最后位置
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>DOM相关的代码应该放在哪个位置</title>
<!--<script>-->
<!--// 执行到这里的时候 DOM树还没有渲染完成!!!-->
<!--var d1Ele = document.getElementById("d1");-->
<!--alert(d1Ele);-->
<!--</script>-->
</head>
<body>
<div id="d1">我是id为d1的标签!</div>
<script>
// 我们通常把涉及到DOM操作的JS代码都放在body标签的最下面!!!
var d1Ele = document.getElementById("d1");
alert(d1Ele.innerText);
</script>
</body>
</html>
View Code
创建和删除元素
创建节点
createElement(标签名)
var divEle = document.createElement("div");
var app1=document.createElement("span");
app1.innerText="当海不蓝，飞起的梦想都变为尘埃"
添加节点
添加节点：先创建一个节点。然后查找一个标签，将创造的节点放到标签内。
一定要说明创建的节点放到哪个标签内
1.追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)；
var divele=document.createElement("div"); #创建一个标签 <div></div>
divele.innerText="烽烟起，寻爱似浪淘沙"; 添加内容
var d2ele=document.getElementById("2"); #得到父标签，在id为2的标签中添加divele这个标签
d2ele.appendChild(divele);
d2ele;
<div id="2">
<div>烽烟起，寻爱似浪淘沙</div>
</div>
2.把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);
删除节点
获得要删除的元素，通过父元素调用删除。
removeChild(要删除的节点)
d2ele.removeChild(divele);
替换节点
somenode.replaceChild(newnode, 某个节点);
var app2=document.createElement("span");
app2.innerText="是我的海";
app.replaceChild(app2,app1);
设置页面中的属性值attribute
<img src="images/1.jpg" class="image-box" >
var app=document.getElementsByTagName("img")[0];
1.获取属性值
app.getAttribute("src") #images/1.jpg
app.getAttribute("class") #image-box
2.设置属性值
如果属性存在就修改，属性不存在，就增加
app.setAttribute("src","images/3.jpg"); #images/3.jpg
app.setAttribute("id","ruby")
3.清除：
divEle.removeAttribute("age")
4.自带的属性还可以直接.属性名来获取和设置
app.id;#2 获取自身的属性 app.id="3" 修改
改变页面中的所有CSS样式
直接对标签内的属性进行操作：
var tet=document.getElementById("1"）;
tet.style.backgroudColor="bule" 该变圆的颜色
tet.style.height="200px" 该变高和宽
tet.style.width="200px"
修改完属性<div id="1" class="c1"></div> 变为 <div id="1" class="c1" style=“backgroud-Color”：“bule”></div>
将改变后的属性都加到标签内，一直生效。直到页面关闭
改变页面中所有的class的操作
1.className 查看某个节点中class的值
2.classList.remove(cls) 删除指定类
3.classList.add(cls) 添加类
4.classList.contains(cls) 存在返回true，否则返回false
5.classList.toggle(cls) 存在就删除，否则添加
<div id="1" class="content test con"></div>
首先找到要操作的标签：var app=document.getElementById("1");
1.app.className; #"content test con" 查看
app.classList; #["content", "test", "con", value: "content test con"]
2.app.classList.remove("content"); 删除
app.className; #"test con"
3.app.classList.add("jerd"); 添加
app.className; #"test con jerd"
在网页上显示一个圆。通过js控制变颜色
通过增加class和移除class实现。本来时粉色，变颜色，只需要加个c2类即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height:50px;
width:50px;
border-radius: 50%;
background-color: #f807ff;
}
.c2{
background-color: #15eea1;
}
</style>
</head>
<body>
<div id="1" class="c1"></div>
<!--用开关来控制-->
<input type="button" id="b1" value="开关" onclick="f1();"> #点击开关，就相当于调用了f（）
<script>
function f1(){
var tet=document.getElementById("1");
tet.classList.toggle("c2") #c2不存在就创建，就会变色，存在的话就删除，恢复之前按的颜色
}
</body>
</html>
1.在js中的操作：
var tet=document.getElementById("1"）; 找到圆这个标签
tet.classList.add("c2"); 添加c2 执行后就会变色
tet.classList.remove("c2"); 恢复之前的颜色
2.在页面上添加一个开关，有开关控制
View Code
获取form表单的值 value
适用于form表单中的：.input select textarea
当用户在网页上输入信息=时，能获得这个值
<form action="">
<label >用户名：
<input type="text" id="i1">
</label>
app=document.getElementById("1")
console.log(app.value);
事件
用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
onclick 当用户点击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
ondblclick 当用户双击某个对象时调用的事件句柄。
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
绑定方式
#方式一
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
#方式二
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script>
点击时圆变颜色
'''
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>事件相关</title>
<style>
.c1 {
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
}
.c3 {
height: 100px;
width: 100px;
background-color: blue;
border-radius: 50%;
}
.c2 {
background-color: green;
}
</style>
</head>
<body>
<!--方式1-->
<div class="c1" onclick="f1(this);"></div>
<!--方式2-->
<div class="c3"></div>
<input type="button" value="开关">
<script>
function f1(xx) {
// xx就是当前标签，为了理解，可以将xx打印出来，查看
console.log(xx);
xx.classList.add("c2");
}
// 第二种绑定事件的方式 得到的是数组，要用索引
var c3Ele = document.getElementsByClassName("c3")[0];
c3Ele.onclick=function () {
// this指向的是当前操作的标签--> c3Ele
this.classList.add("c2");
}
</script>
</body>
</html>
'''
View Code
获取焦点和失去焦点
'''
鼠标在输入框时，默认值消失，不在输入框时有默认值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>搜索框</title>
</head>
<body>
<div>
<form action="" >
<label >
<input type="text" id="i1" value="小米商城">
</label>
</form>
</div>
<script>
// 找到input标签
var i1Ele = document.getElementById("i1");
// 绑定事件
// 绑定的是获取焦点的事件
i1Ele.onfocus=function () {
// 获取焦点之后要做的事儿
// 把值变成空
this.value="";
};
// 再绑定一个失去焦点的事件
i1Ele.onblur=function () {
// this指向的是当前触发事件的input标签
this.value="小米商城";
}
</script>
</body>
</html>
'''
View Code
定时器实例
'''
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>定时器示例</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" id="stop" value="停止">
<input type="button" id="start" value="开始">
<script>
var i1Ele = document.getElementById("i1");
var t;
// 把当前的时间显示在input框里面
// 获取当前时间
// var now = new Date();
// var nowStr = now.toLocaleString();
// 显示在input框中
// 找到input标签
// var i1Ele = document.getElementById("i1");
// i1Ele.value=nowStr;
function nowTime() {
// 获取当前时间
var now = new Date();
i1Ele.value = now.toLocaleString();
}
// 一秒钟设置一次
t = setInterval(nowTime, 1000);
var stopEle = document.getElementById("stop");
stopEle.onclick=function () {
// 点击停止按钮,让定时器结束
clearInterval(t); // 清除的是定时器对象,但是t变量还有值
t = undefined; // 手动将t变量置为undefined
};
var startEle = document.getElementById("start");
startEle.onclick=function () {
// 点击开始按钮,让定时器跑起来
// 判断:如果原来就有定时器,就不设置新的定时器了
if (t === undefined){
// 没有设置定时器
t = setInterval(nowTime, 1000);
}
}
</script>
</body>
</html>
'''
View Code
省市联动
'''
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>select联动</title>
</head>
<body>
<select name="" id="s1">
<option value="">请选择省</option>
</select>
<select name="" id="s2">
<option value="">请选择市</option>
</select>
<script>
var s1Ele = document.getElementById("s1");
//要有数据
var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
// 把data对象里面的key都放到s1下面
for (var i in data){
var ele=document.createElement("option");
s1Ele.appendChild(ele);
ele.value=i;
// 将key值添加到新建的标签中
ele.innerText=i;
}
s1Ele.onchange =function() {
// console.log(s1Ele.value)
// 法一：选择省后，查看市里面有没有值，有的话就给删掉。
var slE = document.getElementById("s2");
if (slE.children.length>1){
for (var j=slE.children.length-1;j>0;j--)
{
slE.removeChild(slE.children[j])
}
}
// 方法二：利用文本属性进行删除，可设置标签 slE.innerHTML为空，这样标签会全部删除
// slE.innerHTML='<option value="">请选择市</option>';
// 根据相应的省，创建相应的市
var ret=s1Ele.value;
for (var a in data[ret]) {
var ele1 = document.createElement("option");
slE.appendChild(ele1);
ele1.innerText =data[ret][a];
}
}
// for循环取出key,生成option标签,添加到s1内部
// 给s1这个select绑定事件 --> onchange事件
// s1Ele.onchange=function () {
// // 值发生变化之后要做的事儿
// // 取到当前s1选中的值,去data中取对应的城市或区
// // for循环,生成option标签,把它添加到s2中
//
// }
</script>
</body>
</html>
'''
View Code