一、Dom简介
什么是API?
应用程序编程接口(Application Programming Interface,API)是软件系统预先定义的接口,用于软件系统不同组成部分的衔接。每一种开发语言都有自己的API。
例如console.log方法。就是JS的一个API。
文档对象模型(Document Object Model,DOM)用于处理HTML文档的编程接口。
翻译:对HTML内部的标签进行处理。
二、如何通过DOM获取元素节点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3 id="c" name="b">我是h3标签</h3> <h3 class="a">我是h3标签</h3> <h3 class="a">我是h3标签</h3>
<p name="b" class="a">我是p标签</p>
<script> //通过DOM节点获取HTML元素的4种方法 每种方法都要掌握.非常相似.
//方法1:通过标签名获取元素 var a = document.getElementsByTagName("h3"); //此时就已经获取到了页面上所有的h3标签 注意返回的一定是一个数组(遍历).即使只有一个h3标签,也是数组. //至于怎么去处理,就是后续的任务.
//方法2:通过class名获取元素 var b = document.getElementsByClassName("a"); //此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组(遍历).即使只有一个h3标签,也是数组.
//方法3:通过name获取元素 var c = document.getElementsByName("b"); //此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组(遍历).即使只有一个h3标签,也是数组.
//方法4:通过id获取元素 因为id是唯一标识符 所以返回的是一个元素,可以直接处理 var d = document.getElementById("c");
</script> </body> </html> |
三、如何操作节点
常见的操作节点的三个属性:
1.innerText表示给标签内部重新赋值或取值 这里是文本值
2.innerHtml表示给标签内部重新赋值或取值 这里是html值
注意以上2个方法只能作用于 非表单元素 例如 h标签 a标签 p标签等等
第三个方法只能作用于表单元素
例如input
3.value表示给标签内部重新赋值或取值 这里是html值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3 id="c" name="b">我是h3标签</h3>
<h3 class="a">我是h3标签1<a href="#">你好</a> </h3>
<input type="text" id="abc" value="739737680" />
<script>
// var a = document.getElementsByTagName("h3"); // for(var i = 0 ;i<a.length;i++){ // console.log(a[i].innerText);//表示获取各个h3标签内部的文本值 // a[i].innerHTML = "<a href='#'>你好</a>"; // }
// var b = document.getElementsByClassName("a"); // for(var i = 0 ;i<b.length;i++){ // console.log(b[i].innerHTML);//表示获取各个h3标签内部的文本值 // }
var d = document.getElementById("abc"); // d.value = "账号123"; console.log(d.value);
</script> </body> </html> |
四、如何操作节点的样式
步骤1.思考需要修改什么样式
步骤2.去css里面查看该样式的单词
步骤3.按照提示来
步骤4.通过 节点.style.xxx 表示取值或赋值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
.abcd{ color: red; background-color: blue; font-size: 40px; }
</style>
</head> <body> <p id="abc" >你好,我是p标签</p>
<script> var p = document.getElementById("abc");
//例如我要修改字体颜色 // p.style.color = "red"; // console.log(p.style.color)
//例如我要修改背景色 // p.style.backgroundColor = "green"
//以上写法的缺点: 麻烦 每次只能修改一个样式
//所以: 如果样式很多,我们可以先将其封装到一个css里面 p.className = "abcd";//表示给该元素 赋予一个class为abcd的属性
</script> </body> </html> |
五、js中的事件管理
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> img{ width: 200px; height: 200px; } </style>
</head> <body> <p id="a">你好</p> <p>你好</p> <p>你好</p> <p>你好</p>
<hr> <img src="img/1.PNG" /> <hr> 账号:<input type="text" id="aaa" /> <span id="bbb"></span> <!--提示用语 -->
<script> //js中的事件: 用户对前台页面做出的一些操作 来触发一些函数 //例如用户的单击 双击 等等等等
//需求:用户点击id为a的元素 弹出一个窗口 //步骤1:获取元素 // 步骤2: 元素.事件名 = function(){代码体} //步骤3 常见的事件名: //单击事件 onclick
// document.getElementById("a").onclick = function(){ // alert(123); // }
// //需求2:给所有的p标签加上点击事件 下面的写法是错误的 需要遍历 // // document.getElementsByTagName("p");.onclick = function(){ // // alert(123); // // } // var p = document.getElementsByTagName("p"); // for(var i = 0 ;i<p.length;i++){
// p[i].onclick = function(){ // alert(456); // }
// }
//双击事件 // document.getElementById("a").ondblclick = function(){ // alert(123); // }
//鼠标移入事件 悬浮事件 //需求:鼠标放上图片 图片就放大2倍 鼠标移出就恢复原状
//鼠标移入事件onmouseover // document.getElementsByTagName("img")[0].onmouseover = function(){ // document.getElementsByTagName("img")[0].style.width = "400px"; // document.getElementsByTagName("img")[0].style.height = "400px"; // }
// //鼠标移出事件onmouseout // document.getElementsByTagName("img")[0].onmouseout = function(){ // document.getElementsByTagName("img")[0].style.width = "200px"; // document.getElementsByTagName("img")[0].style.height = "200px"; // }
//输入账号,失去焦点就需要数据校验
document.getElementById("aaa").onblur = function(){ var str = document.getElementById("aaa").value; if(str.length >10){ document.getElementById("bbb").innerText = "长度太长了"; document.getElementById("bbb").style.color = "red"; }else{ document.getElementById("bbb").innerText = "数据合格"; document.getElementById("bbb").style.color = "green"; } }
</script> </body> </html> |
六、js的属性
元素的常见属性: id class src href
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>
<a id="a" href="1_dom简介.html">进入1页面</a>
<button id="abc">按钮</button>
<img id="b" src="img/1.PNG" />
<h3></h3> <button id="btn">开始点名</button>
<script> //js获取元素的属性: //元素的常见属性: id class src href
//需求:点击按钮 让这个a标签的href改成跳转到第二个页面 //需求 点击按钮,进入下一张图片 document.getElementById("abc").onclick = function(){ document.getElementById("a").setAttribute("href" , "2_如何通过DOM获取元素节点.html"); document.getElementById('b').setAttribute("src","img/2.PNG"); }
//点击开始点名按钮 来回切换 document.getElementById("btn").onclick = function(){ if(document.getElementById("btn").innerText=="开始点名"){ document.getElementById("btn").innerText = "停止点名" }else{ document.getElementById("btn").innerText = "开始点名" } }
</script> </body> </html> |
七、 单击事件的案例
需求如下:点击按钮 来回展示开始点名或停止点名
思路:获取到button标签,然后给它赋予一个点击事件.
接着判断button标签内部的value值.根据值来进行判断.进而修改
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button>开始点名</button>
<script> var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){ //获取button的文本值. var text = btn.innerText ; if(text=="开始点名"){ btn.innerText = "停止点名" }else{ btn.innerText = "开始点名"; } }
</script> </body> </html> |
八、 双击事件的案例
需求:双击打开登录页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 230px; height: 230px; text-align: center; border : 1px solid black; display: none; } </style>
</head> <body> <button>双击打开登录页面</button>
<div> <h3>登录弹窗!!</h3> 账号<input type="text" placeholder="请输入你的账号" /> <br> 密码<input type="password" placeholder="请输入你的密码" /> <br><br><br> <button>登录</button> <button>返回</button> </div>
<script>
//思考:浏览器中的弹窗为啥那么好看 //但是我们学习的三个弹窗 一个比一个丑 //其实浏览器的弹窗 并不是真正的弹窗. //思路: 就是一个提前绘制好的一个div页面.然后将其隐藏. 当用户触发的时候就蹦出来.实现一个弹窗的效果.
//需求:双击打开登录页面 document.getElementsByTagName("button")[0].ondblclick = function(){
document.getElementsByTagName("div")[0].style.display = "block";
}
document.getElementsByTagName("button")[2].onclick = function(){ document.getElementsByTagName("div")[0].style.display = "none"; } </script> </body> </html> |
九、鼠标移入移出事件
需求 :鼠标移入图片内部 ,图片放大 鼠标移出图片 图片还原
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .a{ width: 200px; height: 200px; } .b{ width: 400px; height: 400px; }
</style> </head> <body>
<img class="a" src="img/1.PNG">
<script> //需求 鼠标移入图片内部 ,图片放大 鼠标移出图片 图片还原 var img = document.getElementsByTagName("img")[0];
img.onmouseover = function(){ // img.style.width = "400px"; // img.style.height = "400px"; img.className = "b"; }
img.onmouseout = function(){ // img.style.width = "200px"; // img.style.height = "200px"; img.className = "a"; }
</script>
</body> </html> |