周五，阴，记录生活分享点滴
参考博客：https://www.cnblogs.com/yuanchenqi/articles/5980312.html
JavaScript 3
DOM 节点
HTML 文档中的所有内容都是节点(NODE)：
-
整个文档是一个文档节点(document对象)·【重要】
-
每个 HTML 元素是元素节点(element 对象)·【重要】
-
HTML 元素内的文本是文本节点(text对象)
-
每个 HTML 属性是属性节点(attribute对象)
-
注释是注释节点(comment对象)
节点(自身)属性：
-
-
nodeType - 节点类型
-
nodeValue - 节点值
-
nodeName - 节点名称
-
innerHTML - 节点（元素）的文本值
导航属性：
-
parentNode - 节点（元素）的父节点 (推荐)
-
firstChild - 节点下第一个子元素
-
lastChild - 节点下最后一个子元素
-
childNodes - 节点（元素）的子节点
推荐导航属性：
-
parentElement - 父节点标签元素
-
children - 所有子标签
-
firstElementChild - 第一个子标签元素
-
lastElementChild - 最后一个子标签元素
-
nextElementtSibling - 下一个兄弟标签元素
-
previousElementSibling - 上一个兄弟标签元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> <div>hello div </div> <p>hello p</p> </div> <script> // firstElementChild - 第一个子标签元素 ------------------------------------------ var ele=document.getElementById("div1"); var ele_son=ele.firstElementChild; // 第一个子标签元素 alert(ele_son.nodeName) // DIV // lastElementChild - 最后一个子标签元素 ----------------------------------------- var ele=document.getElementById("div1"); var ele_son=ele.lastElementChild; // 最后一个子标签元素 alert(ele_son.nodeName); // P // children - 所有子标签 -------------------------------------------------------- var ele=document.getElementById("div1"); var ele_sons=ele.children; // 所有子标签 alert(ele_sons.length); // 2 alert(ele_sons[0]); // [object HTMLDivElement] for (var i=0;i<ele_sons.length;i++){ // 通过for循环查看所有子标签 console.log(ele_sons[i]) // <div>hello div </div> 和 <p>hello p</p> } // nextElementtSibling - 下一个兄弟标签元素 -------------------------------------- var ele=document.getElementById("div1").firstElementChild; var sib=ele.nextElementSibling; // 下一个兄弟标签元素 alert(sib.nodeName); // P // 这些属性是为了对文档树进行导航 </script> </body> </html>
全局查找
-
通过使用 getElementById() 方法
-
通过使用 getElementsByTagName() 方法
-
通过使用 getElementsByClassName() 方法
-
通过使用 getElementsByName() 方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1">hello <div class="div2">hello 2</div> <div class="div3" name="chung">hello 3</div> <p>hello p</p> </div> <script> // 通过ID ID特性：唯一性 ----------------------------------------------------------- var temp=document.getElementById("div1"); // 通过ClassName 有可能是多个，数组的格式 -------------------------------------------- var ele=document.getElementsByClassName("div2")[0]; // 通过[0]取一个值 var ele2=ele.nextElementSibling; alert(ele2.innerHTML); // hello 3 // 通过TagName --------------------------------------------------------------------- var tag=document.getElementsByTagName("p"); alert(tag[0].innerHTML) // hello p // 通过Name ------------------------------------------------------------------------- var Name=document.getElementsByName("chung"); for(var i in Name){ console.log(Name[i].innerHTML) // hello 3 } </script> </body> </html>
局部查找
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> <div class="div2">i am div2</div> <div name="chung">i am div2</div> <div id="div3">i am div2</div> <p>hello p</p> </div> <script> var div1=document.getElementById("div1"); // 支持 TagName ---------------------------------------------------------- var ele= div1.getElementsByTagName("p"); alert(ele.length); // 1 // 支持 ClassName -------------------------------------------------------- var ele2=div1.getElementsByClassName("div2"); alert(ele2.length); // 1 // 不支持 Id -------------------------------------------------------------- var ele3=div1.getElementById("div3"); alert(ele3.length); // 不支持 Name ------------------------------------------------------------ var ele4=div1.getElementsByName("chung"); alert(ele4.length) </script> </body> </html>
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证。
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开。
onselect 文本被选中。
onsubmit 确认按钮被点击。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 鼠标双击ppppp反馈123 ------------------------------------------------------------------------> <p ondblclick="alert(123)">ppppp</p> <!-- 输入框练习 ---------------------------------------------------------------------------------> <input class="keyword" type="text" onfocus="func1()" onblur="func2()" value="请输入用户名"> <!-- onfocus元素获得焦点；onblur元素失去焦点 --> <script> function func1() { var ky=document.getElementsByClassName("keyword")[0]; ky.value=""; } function func2() { var ky=document.getElementsByClassName("keyword")[0]; if (ky.value.trim().length==0){ ky.value="请输入用户名"; } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select onchange="fun3()"> <option>上海</option> <option>北京</option> <option>河北</option> </select> <script> function fun3() { alert(1234); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="press" onkeydown="fun1(event)" onkeyup="fun2(event)" > <!-- onkeydown某个键盘按键被按下；onkeyup某个键盘按键被松开 --> <script> function fun1(e) { console.log(456); } function fun2() { console.log(123) } </script> </body> </html>
<!--onload 属性开发中 只给 body元素加. 这个属性的触发 标志着 页面内容被加载完成. 应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function fun1() { var p=document.getElementById("id1") alert(p.nodeName); } window.onload=function () { /* onload 一张页面或一幅图像完成加载 */ var p=document.getElementById("id1") alert(p.nodeName); } </script> <p id="id1">hello p</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 100px; background-color: #84a42b; width: 200px; } </style> </head> <body> <div onmousedown="down()" onmousemove="move()" >div1</div> <!-- onmousedown 鼠标按钮被按下 onmousemove 鼠标被移动 onmouseout 鼠标从某元素移开 onmouseover 鼠标移到某元素之上 --> <script> function down() { console.log("down"); } function move() { console.log("move"); } function out() { console.log("out"); } function over() { console.log("over"); } </script> </body> </html>
绑定事件的两种方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1" onclick="func1()">hello duv <p class="ppp">hello p</p> </div> <script> /* 第一种：找到标签对象 --------------------------------------------*/ var obj=document.getElementsByClassName("ppp")[0]; obj.onclick=function () { alert(123); } /* 第二种：直接在标签后加属性 ---------------------------------------*/ function func1(){ alert("func1") } </script> </body> </html>
验证方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="form" onsubmit="return check()"> <input type="text" name="username"> <input type="submit" value="submit"> </form> <script> // 第一种方式 ---------------------------------------------------------------------------------------- function check(event) { alert("验证失败！"); return false; //返回true没有问题，如果返回false，需要注意onsubmit="return check()"有return // 第二种方式 ---------------------------------------------------------------------------------------- // event.preventDefault() 用这句话替代 return false ，表示组织标签默认行为 } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width: 300px; height: 200px; background-color: #84a42b; } #div2{ height: 100px; width: 100px; background-color: rebeccapurple; } </style> </head> <body> <div id="div1" onclick="alert('div1')"> <div id="div2" onclick="func1(event)"></div> </div> <script> function func1(e) { alert('div2'); e.stopPropagation(); // 阻止事件向外层div传播 } </script> </body> </html>
增删改查
node的CURD
增
createElement(name)创建元素
appendChild();将元素添加
获得要删除的元素
获得它的父元素
使用removeChild()方法删除
// 第一种方式: 使用上面增和删结合完成修改 // 第二种方式: 使用setAttribute();方法修改属性 使用innerHTML属性修改元素的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>节点的增删改查</title> <!--加入样式表---------------------------------------------------------> <style type="text/css"> div { border:#0099FF 1px solid; height:60px; width:120px; margin:20px 0px 20px 20px; padding:10px 0px 0px 20px; } #div_1{ background-color:#00FFFF; } #div_2{ background-color:#FF3399; } #div_3{ background-color:#0000FF; } #div_4{ background-color:#FFFF66; } </style> </head> <body> <div id="div_1"></div> <div id="div_2">div区域2</div> <div id="div_3">div区域3</div> <div id="div_4">div区域4</div> <hr /> <input type="button" value="创建并添加节点" onclick="addNode()" /> <input type="button" value="删除节点" onclick="deleteNode()" /> <input type="button" value="替换节点" onclick="updateNode()" /> <input type="button" value="克隆节点" onclick="copyNode()" /> </body> <script type="text/javascript"> //动态为div增加一个a元素,点击之后跳转到博客园首页 function addNode(){ //1.创建a元素 <a></a> var aEle = document.createElement("a"); //2.为a元素添加属性 aEle.setAttribute("href", "http://www.cnblogs.com"); //3.为a元素添加文本 aEle.innerHTML = "博客园"; //4.获得目标div var div_1 = document.getElementById("div_1"); //5.添加 div_1.appendChild(aEle); } //把div_2删除 function deleteNode(){ //1 获得要删除的元素 var div_2 = document.getElementById("div_2"); //2 找到该元素的父亲 var parent= div_2.parentNode; //3 删除 parent.removeChild(div_2); } //将div_3替换成一张图片 function updateNode(){ //1 找到要替换的div var div_3 = document.getElementById("div_3"); //2 找到div的父亲 var parent = div_3.parentNode; //3 创建一个img元素对象 var imgEle = document.createElement("img"); //4 添加属性(src) imgEle.setAttribute("src", "001.jpg"); //5 替换 parent.replaceChild(imgEle, div_3); } //将div_4 复制,并加入到页面末尾 function copyNode(){ //1 获得要复制的div var div_4 = document.getElementById("div_4"); //2 复制 cloneNode=> 参数 如果是false.那么只复制本身不复制子节点. //true==> 复制本身和所有子节点 var div_copy = div_4.cloneNode(true); //3 获得父亲 //4 添加 div_4.parentNode.appendChild(div_copy); } </script> </html>
修改 HTML DOM
改变 HTML 内容
使用 innerHTML ，innerText
<!-- 例子：更改 <p>元素的HTML 内容 -------------------------------------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="新文本!"; </script> <p>段落通过脚本来修改内容。</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p id="p1">Hello world!</p> <p id="p2">Hello world!</p> <script> document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; </script> </body> </html>
改变 HTML 属性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name) 等同于 elementNode.value
elementNode.value指DHTML（dynamic html 动态html）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="div1">hello div </div> <input id="add" type="button" value="add"> </body> <script> var ele=document.getElementById("add"); ele.onclick=function () { // 第一种 -------------------------------------------------------------- var div1=document.getElementsByClassName("div1")[0]; var img=document.createElement("img"); img.setAttribute("src","56.jpg"); // 第二种 -------------------------------------------------------------- img.src="56.jpg" // dynamic html(动态html：增强html) div1.appendChild(img); } </script> </html>
创建新的 HTML 元素
- createElement(name)
删除已有的 HTML 元素
- elementNode.removeChild(node)
关于class的操作
- elementNode.className
- elementNode.classList.add
- elementNode.classList.remove