javaScript中的DOM补充
一、DOM树
二、DOM节点
DOM 是这样规定的:
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
其中,document与element节点是重点。
三、节点查找
(1)直接查找节点
1
2
3
4
|
document.getElementById(“idname”) document.getElementsByTagName(“tagname”) document.getElementsByName(“name”) document.getElementsByClassName(“name”) |
<div id="div1"> <div class="div2">i am div2</div> <div name="yuan">i am div2</div> <div id="div3">i am div2</div> <p>hello p</p> </div> <script> var div1=document.getElementById("div1"); </script>
(2)、导航节点属性
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
注意,js中没有办法找到所有的兄弟标签!
四、节点操作
(1)、创建节点
1.createElement(标签名) :创建一个指定名称的元素。
例:var tag=document.createElement(“input")
tag.setAttribute('type','text');
(2)、添加节点
2.somenode.appendChild(newnode) :追加节点(作最后的子节点)
(3)、删除节点
3.removeChild():获得要删除的元素,通过父元素调用删除
(4). 替换节点
4. somenode.replaceChild(newnode, 某个节点);
五、节点属性操作
1、获取文本节点的值:innerText innerHTML
2、attribute操作
elementNode.setAttribute(name,value) elementNode.getAttribute(属性名) <-------------->elementNode.属性名(DHTML) elementNode.removeAttribute(“属性名”);
3.value获取当前选中的value的值
1.input
2.select (selectedIndex)
3.textarea
4、innerHTML 给节点添加html代码:
该方法不是w3c的标准,但是主流浏览器支持
tag.innerHTML = “<p>要显示内容</p>”;
5、关于class的操作:
elementNode.className
elementNode.classList.add
elementNode.classList.remove
6、改变css样式:
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
.style.fontSize=48px
六、事件类型
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习:输入框
onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动)
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
七、绑定事件
方式一:
<div id="div" onclick="foo(this)">点我呀</div> <script> function foo(self){ // 形参不能是this; console.log("点你大爷!"); console.log(self); } </script>
方式二:
<p id="abc">试一试!</p> <script> var ele=document.getElementById("abc"); ele.onclick=function(){ console.log("ok"); console.log(this); // this直接用 }; </script>
<head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" id="submit"> <p>姓名<input type="text" name="user" id="user"></p> <p>年龄<input type="text" name="age" id="age"></p> <input type="submit" > </form> <input type="text" id="test"> <script> var ele_form=document.getElementById("submit"); var ele_user=document.getElementById("user"); var ele_age=document.getElementById("age"); ele_form.onsubmit=function (event) { var username=ele_user.value; var age=ele_age.value; alert(username); alert(age); // 两种阻止默认事件发生的方式 // 方式1 return false // 方式2 // event.preventDefault() } </script> <script> var ele=document.getElementById("test") ele.onkeydown=function (e) { console.log(e.keyCode); if (e.keyCode==13){ alert(666) } } </script> </body>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 200px; height: 200px; background-color: wheat; } .c2{ width: 100px; height: 100px; background-color: royalblue; } </style> </head> <body> <div class="c1"> <div class="c2"></div> </div> <script> var ele1=document.getElementsByClassName("c1")[0]; var ele2=document.getElementsByClassName("c2")[0]; ele1.onclick=function () { alert(123) }; ele2.onclick=function (event) { alert(456); event.stopPropagation() // 阻止事件传播 } </script> </body>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ width: 100%; height: 2000px; border: 1px solid red; } .shade{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: darkgray; opacity: 0.5; } .model{ position: fixed; top: 100px; left:40%; width: 300px; height: 200px; background-color: white; } .hide{ display: none; } </style> </head> <body> <div class="back"> <button id="add">add</button> </div> <div class="shade hide"></div> <div class="model hide"> <form action=""> <p>姓名<input type="text"></p> <p>年龄<input type="text"></p> <input type="button" id="btn" value="提交"> </form> </div> <script> var ele_add=document.getElementById("add"); var ele_mdoel=document.getElementsByClassName("model")[0]; var ele_shade=document.getElementsByClassName("shade")[0]; ele_add.onclick=function () { ele_mdoel.classList.remove("hide"); ele_shade.classList.remove("hide") } </script> </body> </html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 500px; height: 300px; border: 1px solid red; } </style> <script> window.onload=function () { var ele=document.getElementsByClassName("addBtn")[0]; var ele_del=document.getElementsByClassName("delBtn")[0]; var eleBtn=document.getElementsByClassName("repalceBtn")[0]; // 绑定的添加节点事件 ele.onclick=function () { // 创建一个a标签 var ele_a=document.createElement("a"); console.log(ele_a); // <a></a> ele_a.innerHTML="点击"; // <a>点击</a> ele_a.setAttribute("href","http://www.baidu.com"); ele_a.id="d1"; // 创建img标签 var ele_img=document.createElement("img"); // <img> ele_img.src="Bootstrap_i2.png"; // <img src=""> ele_img.height=50; ele_img.width=50; // 添加标签 // 找到父标签 ele_p=document.getElementsByClassName("c1")[0]; // ele_p.appendChild(ele_a) ele_p.appendChild(ele_img) }; // 绑定删除节点事件 ele_del.onclick=function () { var ele_p=document.getElementById("p1"); var ele_parent=document.getElementsByClassName("c1")[0]; ele_parent.removeChild(ele_p); }; // 绑定替换节点事件 eleBtn.onclick=function () { //创建的 新节点 var ele_img=document.createElement("img"); // <img> ele_img.src="Bootstrap_i2.png"; // <img src=""> ele_img.height=50; ele_img.width=50; // 被替换的节点 var ele_p=document.getElementById("p1"); // 父节点 var ele_parent=document.getElementsByClassName("c1")[0] // 做替换 ele_parent.replaceChild(ele_img,ele_p) } // 表格操作 var eles=document.getElementsByClassName("del") ; for(var i=0;i<eles.length;i++){ eles[i].onclick=function () { // console.log(this.parentElement.parentElement); var ele_tr=this.parentElement.parentElement; var ele_tbody=document.getElementById("t1"); ele_tbody.removeChild(ele_tr); console.log(ele_tbody) } } }; </script> </head> <body> <div class="c1"> <p id="p1">p1</p> </div> <button class="addBtn">ADD</button> <button class="delBtn">del</button> <button class="repalceBtn">repalceBtn</button> <hr> <table border="1" > <tbody id="t1"> <tr> <td><input type="checkbox"></td> <td><input type="text"></td> <td><button class="del">del1</button></td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="text"></td> <td><button class="del">del2</button></td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="text"></td> <td><button class="del">del3</button></td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="text"></td> <td><button class="del">del3</button></td> </tr> </tbody> </table> <div> <div> <div></div> </div> </div> </body> </html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" value="username" id="search"> <script> var ele=document.getElementById("search") ele.onfocus=function () { this.value="" }; ele.onblur=function () { if(this.value.trim()==""){ this.value="username" } } </script> </body>
<html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="ID1" type="text" onclick="begin()"> <button onclick="end()">停止</button> <script> function showTime(){ var nowd2=new Date().toLocaleString(); var temp=document.getElementById("ID1"); temp.value=nowd2; } var ID; function begin(){ if (ID==undefined){ showTime(); ID=setInterval(showTime,1000); } } function end(){ clearInterval(ID); ID=undefined; } </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="ID1" type="text" onclick="begin()"> <button onclick="end()">停止</button> <script> function showTime(){ var nowd2=new Date().toLocaleString(); var temp=document.getElementById("ID1"); temp.value=nowd2; } var ID; function begin(){ if (ID==undefined){ showTime(); ID=setInterval(showTime,1000); } } function end(){ clearInterval(ID); ID=undefined; } </script> </body> </html>
<head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <button>Add</button> <script> var eles_li=document.getElementsByTagName("li"); var ele_btn=document.getElementsByTagName("button")[0]; var ele_ul=document.getElementsByTagName("ul")[0]; // 添加li ele_btn.onclick=function () { var ele_li=document.createElement("li"); ele_li.innerHTML=444; ele_ul.appendChild(ele_li) }; // 绑定事件 for(var i=0;i<eles_li.length;i++){ eles_li[i].onclick=function () { alert(this.innerHTML) } } // 事件委派 // ele_ul.addEventListener("click",function (e) { // console.log(e.target); // 标签 // console.log(e.target.tagName); // 标签名称 // // if(e.target.tagName=="LI"){ // console.log("OK") // } // }) </script> </body>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var s=12; function f(){ console.log(s); // undefined var s=12; // 12 console.log(s) // 12 } f(); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="ID1" type="text" onclick="begin()"> <button onclick="end()">停止</button> <script> function showTime(){ var nowd2=new Date().toLocaleString(); var temp=document.getElementById("ID1"); temp.value=nowd2; } var ID; function begin(){ if (ID==undefined){ showTime(); ID=setInterval(showTime,1000); } } function end(){ clearInterval(ID); ID=undefined; } </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="selectAll">全选</button> <button class="reverse">反选</button> <button class="cancel">取消</button> <hr> <table border="1"> <tr> <td ><input type="checkbox" class="check"></td> <td>111</td> <td>222</td> <td>333</td> </tr> <tr> <td ><input type="checkbox" class="check"></td> <td>111</td> <td>222</td> <td>333</td> </tr> <tr> <td ><input type="checkbox" class="check"></td> <td>111</td> <td>222</td> <td>333</td> </tr> <tr> <td ><input type="checkbox" class="check"></td> <td>111</td> <td>222</td> <td>333</td> </tr> </table> <script> var ele_selectAll=document.getElementsByClassName("selectAll")[0]; var ele_reverse=document.getElementsByClassName("reverse")[0]; var ele_cancel=document.getElementsByClassName("cancel")[0]; var ele_input=document.getElementsByClassName("check"); ele_selectAll.onclick=function () { for(var i=0;i<ele_input.length;i++){ ele_input[i].checked="checked" } }; ele_cancel.onclick=function () { for(var i=0;i<ele_input.length;i++){ ele_input[i].checked="" } }; ele_reverse.onclick=function () { for(var i=0;i<ele_input.length;i++){ var ele=ele_input[i]; if(ele.checked){ ele.checked="" } else { ele.checked="checked" } } }; </script> </body> </html>
<head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="c1"> <select name="pro" id="s1"> <option value="1">河北省</option> <option value="2">河南省</option> <option value="3">北京省</option> </select> <button>show</button> <script> var ele_button=document.getElementsByTagName("button")[0]; ele_button.onclick=function () { var ele_input=document.getElementById("c1"); var ele_select=document.getElementById("s1"); console.log(ele_select.value) }; </script> </body> </html>