1文档对象模型介绍
DOM树--对于一个网页文件,我们可以类比做一棵树,根标签的HTML看做根,文档中的所有标签都可以看做为这棵树的树枝或叶子
通过DOM树的结构,我们可以从根标签有序的获取,操作文档中任何一个子标签.
1.1DOM树
1.2.相关术语
元素:标签以及标签所包含的内容
元素属性:标签的属性
节点:元素,属性,文本统称为节点(元素--标签节点,属性--属性节点,文本--文本节点)
节点名称:标签节点的节点名就是标签名,属性节点的节点名就是属性名,文本节点的节点名是text
2.doucument对象
doucument对象指代的就是一个网页文档,doucument对象提供属性,函数大多都是获取网页中的对象
2.1集合属性
//document对象的属性
//all:获取当前网页的所有的元素
var arr=document.all;
console.log(arr[0]);
//imgs:获取当前网页的所有的照片
//links,forms
3.对HTML标签的操作
标签属性操作和标签样式操作
<!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.0">
<title>Document</title>
<style type="text/css">
.imgStyle{
width: 200px;
height: 200px;
border-radius: 50%;
transform: rotate(50deg);
}
</style>
</head>
<body>
<img src="./img/剑姬.webp" height="200px"> <br>
<img id="img2" src="./img/杰斯.webp" height="200px"> <br>
<img id="img3" src="./img/格温.webp" height="200px"><br>
<button onclick="testAttOper()">操作标签属性</button>
<button onclick="testStyleOper()">操作标签样式</button>
<button onclick="testClassOper()">操作标签class属性</button>
<script type="text/javascript">
function testAttOper(){
var img2Ele=document.getElementById("img2");
//操作标签属性
//a.获取属性值
var s=img2Ele.src;
console.log(s);
//b.设置属性值
img2Ele.src="./img/杰斯.webp";
}
function testStyleOper(){
var img=document.getElementById("img2");
//操作标签样式(标签对象.sytle.样式属性名)
//设置标签的样式属性
img.style.border="2px solid red";
img.style.borderRadius="10px";
}
function testClassOper(){
var img=document.getElementById("img3");
//操作标签的class属性是要.className
img.className="imgStyle";
}
</script>
</body>
</html>
4.节点操作
元素,元素属性以及文本都被称之为节点
节点操作--使用js完成节点创建,节点删除,节点增加,插入节点
4.1节点属性:
节点类型 |
nodeType |
nodeName |
nodeValue |
标签节点 |
1 |
标签名 |
null |
属性节点 |
2 |
属性名 |
属性值 |
文本节点 |
3 |
#text |
文本内容 |
对于HTML对象:
获取属性节点: .attributes
获取子节点: .childNodes
4.2创建新节点
//创建标签节点(元素)
var imgTag=document.createElement("img");
//创建文本节点
var textNode=document.createTextNode("hello world");
//创建属性节点
var arrNode=document.createAttribute("name");
4.3插入新节点
//1.创建标签节点
var imgTag=document.createElement("img");
//2.给标签节点添加属性
imgTag.setAttribute("src","img/剑姬.webp");
imgTag.alt="图片无法显示";
console.log(imgTag);
//3.给标签节点移除属性
imgTag.removeAttribute("alt");
//4.appendChild: 拼接子节点 拼接到标签的里面(标签之前) 调用一定是tagNode
var body=document.body;
// body.appendChild(imgTag);
//5.insertBefore
var btnTag=document.getElementById("btnTest");
body.insertBefore(imgTag,btnTag);
4.4替换节点
replaceChild函数
可以使用新建的标签节点去替换某个节点,也可以获取网页中已经存在的标签去替换
- 如果创建新的节点,这可以直接替换
- 如果使用已经创建好的节点A去替换B 那么A会移动并替换B
4.5删除节点
parseTag.removeChild(oldChild) 从parseTag节点中删除oldChild节点
5.绑定事件的三种方式
事件:在网页文档中发生行为(可以是网页文档加载过程产生,也可以用户认为操作的)
- 通过标签内部通过事件属性来绑定
- 给获取的标签绑定事件
- 获取标签后,添加绑定事件
//获取p标签
var pEle = document.querySelector("p");
function show(){
pEle.style.backgroundColor="#ccc";
}
function out(){
pEle.style.backgroundColor="";
}
var buttonEles =document.querySelectorAll("button");
buttonEles[1].onclick=function(){
alert('你是谁？为什么要点我？');
}
var h2Ele = document.querySelector("h2");
h2Ele.onmouseover = function(){
h2Ele.style.backgroundColor = "#f00";
}
var h3Ele = document.querySelector("h3");
h3Ele.addEventListener("click",function(){
alert("我是h3标签");
})6.鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 500px;
height: 300px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<p>双击我看效果</p>
<h2>按下鼠标和放开鼠标某个键</h2>
<div></div>
</body>
<script>
//获取标签
var pEle = document.querySelector("p");
//添加事件，执行操作
pEle.ondblclick = function(){
this.style.backgroundColor = "#F00";
}
//获取标签
var h2Ele = document.querySelector("h2");
h2Ele.onmousedown=function(){
this.style.backgroundColor = "#0f0";
}
h2Ele.onmouseup=function(){
this.style.backgroundColor = "#00f";
}
//获取标签
var divEle = document.querySelector("div");
divEle.onmousemove = function(){
var num = parseInt(Math.random()*899999+100000);
divEle.style.backgroundColor="#"+num;
// console.log(num);
}
</script>
</html>7.表单事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
margin-left: 10px;
color: #ccc;
font-size: 14px;
}
.err{
color: #f00;
}
.right{
color: #0f0;
}
</style>
</head>
<body>
<form>
昵称：<input type="text"/><span></span>
</form>
</body>
<script>
//获取元素
var inputEle = document.querySelector("input");
var spanEle = document.querySelector("span");
//添加事件
inputEle.onfocus = function(){
spanEle.className = "";
this.style.backgroundColor = "#f00";
spanEle.innerText = "昵称长度在6-12位";
}
inputEle.onblur = function(){
//获取input标签内输入的数据
var value =inputEle.value;
if(value.length>12||value.length<6){
spanEle.innerText ="昵称长度不对";
spanEle.className = "err";
}else{
spanEle.innerText ="恭喜你，此昵称可以使用";
spanEle.className = "right";
}
console.log(value);
}
</script>
</html>8.键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text"/>
</body>
<script>
//获取标签
var inputEle = document.querySelector("input");
//添加事件
inputEle.onkeydown=function(){
console.log("你按下了一个键");
}
inputEle.onkeyup = function(){
console.log("你释放了一个键")
}
</script>
</html>