2、DOM对象(JS核心)
DOM document Object Model 文档对象模型
// 整个html文档,会保存一个文档对象document // console.log( document ); // 获取当前文档的对象
2.1、查找标签
-
直接查找标签
document.getElementsByTagName("标签名") document.getElementById("id值") document.getElementsByClassName("类名")
1、方法的返回值是dom对象还是数组
2、document对象可以是任意dom对象,将查询范围限制在当前dom对象
-
导航查找标签
elementNode.parentElement // 父节点标签元素 elementNode.children // 所有子标签 elementNode.firstElementChild // 第一个子标签元素 elementNode.lastElementChild // 最后一个子标签元素 elementNode.nextElementSibling // 下一个兄弟标签元素 elementNode.previousElementSibling // 上一个兄弟标签元素
-
CSS选择器查找
document.querySelector("css选择器") //根据css选择符来获取查找到的第一个元素,返回标签对象(dom对象) document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">DIV1</div> <div class="c1">DIV</div> <div class="c1">DIV</div> <div class="c1">DIV</div> <div class="outer"> <div class="c1">item</div> </div> <div class="c2"> <div class="c3"> <ul class="c4"> <li class="c5" id="i2">111</li> <li>222</li> <li>333</li> </ul> </div> </div> <script> // 直接查找 var ele = document.getElementById("i1"); // ele就是一个dom对象 console.log(ele); var eles = document.getElementsByClassName("c1"); // eles是一个数组 [dom1,dom2,...] console.log(eles); var eles2 = document.getElementsByTagName("div"); // eles2是一个数组 [dom1,dom2,...] console.log(eles2); var outer = document.getElementsByClassName("outer")[0]; var te = outer.getElementsByClassName("c1"); console.log(te); // 导航查找 var c5 = document.getElementsByClassName("c5")[0]; console.log(c5); // c5是一个DOM对象 console.log(c5.parentElement.lastElementChild); // 返回值是dom对象 console.log(c5.parentElement.children); // 返回值是dom对象数组 console.log(c5.nextElementSibling.nextElementSibling); console.log(c5.parentElement.children); // css选择器 var dom = document.querySelector(".c2 .c3 .c5"); console.log(":::",dom); var doms = document.querySelectorAll("ul li"); console.log(":::",doms); </script> </body> </html>
2.2、绑定事件
-
静态绑定 :直接把事件写在标签元素中。
<div id="div" οnclick="foo(this)">click</div> <script> function foo(self){ // 形参不能是this; console.log("foo函数"); console.log(self); } </script>
-
动态绑定:在js中通过代码获取元素对象,然后给这个对象进行后续绑定。
<p id="i1">试一试!</p> <script> var ele=document.getElementById("i1"); ele.οnclick=function(){ console.log("ok"); console.log(this); // this直接用 }; </script>
一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码
多个标签绑定事件
<ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul> <script> var eles = document.querySelectorAll("ul li"); for(var i=0;i<eles.length;i++){ eles[i].onclick = function (){ console.log(this.innerHTML) // console.log(eles[i].innerHTML) // 结果? } } </script>
2.3、操作标签
<标签名 属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>
-
文本操作
<div class="c1"><span>click</span></div> <script> var ele =document.querySelector(".c1"); ele.onclick = function (){ // 查看标签文本 console.log(this.innerHTML) console.log(this.innerText) } ele.ondblclick = function (){ // 设置标签文本 this.innerHTML = "<a href='#'>yuan</a>" //this.innerText = "<a href='#'>yuan</a>" } </script>
-
value操作
像input标签,select标签以及textarea标签是没有文本的,但是显示内容由value属性决定
<input type="text" id="i1" value="yuan"> <textarea name="" id="i2" cols="30" rows="10">123</textarea> <select id="i3"> <option value="hebei">河北省</option> <option value="hubei">湖北省</option> <option value="guangdong">广东省</option> </select> <script> // input标签 var ele1 =document.getElementById("i1"); console.log(ele1.value); ele1.onmouseover = function (){ this.value = "alvin" } // textarea标签 var ele2 =document.getElementById("i2"); console.log(ele2.value); ele2.onmouseover = function (){ this.innerText = "welcome to JS world!" this.value = "welcome to JS world!" } // select标签 var ele3 =document.getElementById("i3"); console.log(ele3.value); ele3.value= "hubei" </script>
-
css样式操作
<p id="i1">Hello world!</p> <script> var ele = document.getElementById("i1"); ele.onclick = function (){ this.style.color = "red" } </script>
属性操作
elementNode.setAttribute("属性名","属性值") elementNode.getAttribute("属性名") elementNode.removeAttribute("属性名");
并不是所有属性都可以像value那样操作。
-
class属性操作**
elementNode.className elementNode.classList.add elementNode.classList.remove
案例:tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.tab{
width: 800px;
height: 300px;
/*border: 1px solid red;*/
margin: 200px auto;
}
.tab ul{
list-style: none;
}
.tab-title{
background-color: #f7f7f7;
border: 1px solid #eee;
border-bottom: 1px solid #e4393c;
}
.tab .tab-title li{
display: inline-block;
padding: 10px 25px;
font-size: 14px;
}
li.current {
background-color: #e4393c;
color: #fff;
cursor: default;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="tab">
<ul class="tab-title">
<li class="current" index="0">商品介绍</li>
<li class="" index="1">规格与包装</li>
<li class="" index="2">售后保障</li>
<li class="" index="3">商品评价</li>
</ul>
<ul class="tab-content">
<li>商品介绍...</li>
<li class="hide">规格与包装...</li>
<li class="hide">售后保障...</li>
<li class="hide">商品评价...</li>
</ul>
</div>
<script>
var titles = document.querySelectorAll(".tab-title li");
var contents = document.querySelectorAll(".tab-content li");
for (var i = 0;i<titles.length;i++){
titles[i].onclick = function () {
// (1) 触发事件标签拥有current样式
for (var j = 0;j<titles.length;j++){
titles[j].classList.remove("current")
}
console.log(this);
this.classList.add("current");
// (2) 显示点击title对应的详情内容
var index = this.getAttribute("index");
// console.log(this.getAttribute("index"));
// console.log(contents[index]);
for (var z = 0;z<contents.length;z++){
contents[z].classList.add("hide");
}
contents[index].classList.remove("hide");
}
}
</script>
</body>
</html>
-
节点操作
// 创建节点: document.createElement("标签名") // 插入节点 somenode.appendChild(newnode) // 追加一个子节点(作为最后的子节点) somenode.insertBefore(newnode,某个节点) // 把增加的节点放到某个节点的前边 // 删除节点 somenode.removeChild():获得要删除的元素,通过父元素调用删除 //替换节点 somenode.replaceChild(newnode, 某个节点);
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="add_btn">添加节点</button> <button class="del_btn">删除节点</button> <button class="replace_btn">替换节点</button> <div class="c1"> <h3>hello JS!</h3> <h3 class="c2">hello world</h3> </div> <script> var add_btn = document.querySelector(".add_btn"); var del_btn = document.querySelector(".del_btn"); var replace_btn = document.querySelector(".replace_btn"); var c1 = document.querySelector(".c1"); var c2 = document.querySelector(".c2"); add_btn.onclick = function () { // 创建节点 var ele = document.createElement("img"); // <img> ele.src = "https://img2.baidu.com/it/u=1613029778,1507777131&fm=26&fmt=auto&gp=0.jpg" console.log(ele); // 添加节点 // c1.appendChild(ele); c1.insertBefore(ele, c2) }; del_btn.onclick = function () { // 删除子节点 c1.removeChild(c2); }; replace_btn.onclick = function () { // 创建替换节点 var ele = document.createElement("img"); // <img> ele.src = "https://img2.baidu.com/it/u=1613029778,1507777131&fm=26&fmt=auto&gp=0.jpg" console.log(ele); // 替换节点 c1.replaceChild(ele, c2); } </script> </body> </html>
2.4、常用事件
-
onload事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function (){ ele = document.getElementById("i1") console.log(ele.innerHTML); } </script> </head> <body> <div id="i1">yuan</div> </body> </html>
-
onsubmit事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" id="i1"> 用户名:<input type="text"> 密码: <input type="password"> <input type="submit"> </form> <script> var ele = document.getElementById("i1"); var user = document.querySelector("#i1 [type=text]") var pwd = document.querySelector("#i1 [type=password]") ele.onsubmit = function (e){ console.log(user.value); console.log(pwd.value); return false; // 终止事件执行 // e.preventDefault() // 阻止元素默认行为 } </script> </body> </html>
-
onchange事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="provonce" id="s1"> <option value="hebei">请选择省份</option> <option value="hubei">湖北省</option> <option value="hunan">湖南省</option> <option value="hebei">河北省</option> </select> <select name="provonce" id="s2"> <option value="hebei">请选择城市</option> </select> <script> var data={"hunan":["长沙","岳阳","张家界"],"hubei":["武汉","襄阳","荆州"],"hebei":["石家庄","保定","张家口"]}; console.log(data); var ele = document.getElementById("s1"); var ele2 = document.getElementById("s2"); ele.οnchange=function () { console.log(this.value); var citys = data[this.value]; console.log(citys); // 清空操作 ele2.options.length=1; // 创建标签 for (var i=0;i<citys.length;i++){ var option = document.createElement("option"); // </option></option> option.innerHTML=citys[i]; ele2.appendChild(option) } } </script> </body> </html>
-
onmouse事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container{ width: 300px; } #title{ cursor: pointer; background: #ccc; } #list{ display: none; background:#fff; } #list div{ line-height: 50px; } #list .item1{ background-color: green; } #list .item2{ background-color: rebeccapurple; } #list .item3{ background-color: lemonchiffon; } </style> </head> <body> <div id="container"> <div id="title">使用了mouseout事件↓</div> <div id="list"> <div class="item1">第一行</div> <div class="item2">第二行</div> <div class="item3">第三行</div> </div> </div> <script> // 1.不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。 // 2.只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。 var container=document.getElementById("container"); var title=document.getElementById("title"); var list=document.getElementById("list"); title.οnmοuseοver=function(){ list.style.display="block"; }; container.οnmοuseleave=function(){ // 改为onmouseout试一下 list.style.display="none"; }; /* 因为mouseout事件是会冒泡的,也就是onmouseout事件可能被同时绑定到了container的子元素title和list 上,所以鼠标移出每个子元素时也都会触发我们的list.style.display="none"; */ </script> </body> </html>
-
onkey事件
<input type="text" id="t1"/> <script type="text/javascript"> var ele=document.getElementById("t1"); ele.οnkeydοwn=function(e){ console.log("onkeydown",e.key) }; ele.οnkeyup=function(e){ console.log("onkeyup",e.key) }; </script>
-
onblur和onfocus事件
<input type="text" class="c1"> <script> var ele = document.querySelector(".c1"); // 获取焦点事件 ele.onfocus = function () { console.log("in") }; // 失去焦点事件 ele.onblur = function () { console.log("out") } </script>
-
冒泡事件
<div class="c1"> <div class="c2"></div> </div> <script> var ele1 = document.querySelector(".c1"); ele1.onclick = function () { alert("c1区域") }; var ele2 = document.querySelector(".c2"); ele2.onclick = function (event) { alert("c2区域"); // 如何阻止事件冒泡 event.stopPropagation(); } </script>