4.14.2021
DOM简介:
文档节点:整个HTML文档
元素节点:html文档中的html标签
属性节点:元素的属性
文本节点:html标签中的文本内容
1. 事件:就是浏览器和用户之间的交互行为,比如点击按钮,鼠标移动,关闭窗口……
2. dom查询
获取元素节点:1)getElementById()通过id属性获取一个元素节点对象
2)getElementsByTagName()通过标签名获取一组元素节点对象
3)getElementsByName()通过name属性获取一组元素节点对象
innerHTML用于获取元素内部的html代码块的
对于自结束没有作用 如: 若需要读取元素节点属性:直接使用元素.属性名
注意:class不能采用这种方式,读取class需要用className
图片切换案例:
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 500px;
padding: 10px;
background-color: #0925ff;
margin: 0 auto;
text-align: center;
}
img{
width: 500px;
height: 500px;
}
</style>
<body>
<div id="box">
<p id="info"></p>
<img src="img/1.jpg" alt=""/>
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
<script>
var next = document.getElementById("next");
var prev = document.getElementById("prev");
var img = document.getElementsByTagName("img")[0];
var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
var index=2;
var info = document.getElementById("info");
info.innerHTML="一共有"+imgArr.length+"张图片,这是"+"第"+(index+1)+"张图片";
next.onclick = function (){
index++;
if(index>imgArr.length-1){
index = 0;
}
img.src = imgArr[index];
info.innerHTML="一共有"+imgArr.length+"张图片,这是"+"第"+(index+1)+"张图片";
}
prev.onclick = function (){
index--;
if(index<0){
index = 3;
}
img.src = imgArr[index];
info.innerHTML="一共有"+imgArr.length+"张图片,这是"+"第"+(index+1)+"张图片";
}
</script>
</body>
</html>
获取元素节点的子节点:
通过具体的元素节点调用getElementByTagName( )方法,返回当前节点的指定标签名后代节点
1) childNodes属性,表示当前节点的所有子节点
2) firstChild 属性,表示当前节点的第一个子节点
3) lastChild 属性,表示当前节点的最后一个子节点
获取父节点和兄弟节点:
1) parentNode,表示当前节点的父节点
2) previousSibling,表示当前节点的前一个兄弟节点
3) nextSibling,表示当前节点的后一个兄弟节点
定义一个函数,专门用来为指定的元素绑定单击响应函数
参数:idStr要绑定单击响应函数的对象的id属性值
fun事件的回调函数,当单击元素时,该函数会被触发
innerText该属性可以获取到元素内部的文本内容,和innerHTML类似,不同的是它会自动将html标签去除