一.BOM
window 对象
1.确认，输入，
window.alert(123) // 弹框
let ret = window.confirm("是否删除") //确认
let ret =window.prompt(">>>") // 输入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // window对象 alert // window.alert(123); // let ret=window.confirm("是否删除?"); // console.log(ret); //true false // let ret2=window.prompt("请输入验证码") // console.log(ret2); </script> </head> <body> </body> </html>
2.定时器
var ID;
ID = setInterval(func名,1000) ; //设置定时器
clearInterval(ID); //清除定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //计时器 function show_time() { //// 创建时间字符串 var now = new Date().toLocaleString();//此变量需要放在函数内部 var el = document.getElementById("jishiqi"); el.value =now; } var ID; //在函数外部先定义一个ID变量，并不赋值，方便其他函数可以引用该变量 function setTimer() { //if 判断防止，计时器重复设置，没设置计时器之前ID===underfined if (ID===undefined){ show_time(); //解决需要等待第一秒的问题 ID = setInterval(show_time,1000);//每隔一秒，执行show_time函数一次 } } function stop_time() { clearInterval(ID); ID = undefined; } </script> <input type="text" id ="jishiqi" class="c1"> <button onclick="setTimer()">start</button> <button onclick="stop_time()">end</button> </body> </html>
3.location 对象
location.href ="http://www.baidu.com" 跳转到指定页面
location.assign("http://www.baidu.com")跳转到指定页面 （assign表示分配，指派）
location.href 拿到整个url
location.search 拿url数据部分
location.host
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //location.herf 获取url //location.search 获取url 后的数据部分 // console.log(location.href); console.log(location.search); // location.href = "http://www.baidu.com"; //跳转到指定的页面，此处跳转到百度页面 // location.assign("http://www.taobao.com");//跳转到淘宝页面 console.log(location.host); </script> </body> </html>
二.DOM
文档树结构：树形结构
两个DOM(节点)对象：
1.document对象
2.element对象:所有标签
1.查找标签
1.直接查找
document.getElementById() //一个结果
document.getElementsByTagName() // 数组
document.getElementsByClassName() // 数组
document.getElementsByName() // 数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="c1" id="i1"> <p>123</p> <div class="c2">222</div> </div> <div class="c2">333</div> <script> /* document.getElementById(); // 一个element对象 document.getElementsByClassName(); // 多个element对象构成的数组 document.getElementsByTagName(); // 多个element对象构成的数组 document.getElementsByName(); // 多个element对象构成的数组 document.getElementsByClassName("c2"); */ var c1=document.getElementsByClassName("c1")[0]; console.log("c1",c1); var c2=c1.getElementsByClassName("c2")[0]; console.log(c2) </script> </body> </html>
2.导航查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
var ul = document.getElementById("target1");//通过id名获取
var li1 = ul.getElementsByClassName("li1")[0];
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 200px; height: 200px; background: red; } </style> </head> <body> <ul class="box" id ="target1" > <li class="li1">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div></div> <input type="text" name="wang"> <script> // 导航查找法 var ul = document.getElementById("target1");//通过id名获取 var li1 = ul.getElementsByClassName("li1")[0]; li1.onclick = function (ev) { // alert(2); this.style.background = "pink"; }; //获取下一个兄弟节点 var li2 = li1.nextElementSibling; li2.onclick = function () { alert("第2个li"); }; var li3 = li1.nextElementSibling.nextElementSibling; li3.onclick = function () { alert("第3个li"); }; //获取父节点 var partent = li1.parentElement; partent.onclick = function (ev) { this.style.background ="green"; }; //获取父节点下的所有子节点 var lis = partent.children; </script> </body> </html>
2..标签控制
1.文本控制
var ele = document.getElementById("d1");
1.获取文本节点的内容
ele.innerText //只得到文本 内容
ele.innerHTML //得到ele标签中所有内容，包括标签
2.设置文本内容
ele.innerText ="<a>yuan</a>" // 不识别标签，显示文本原来的样子
ele.innerHTML ="<a>yuan</a>" //可以识别标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li id="i1">123</li> <li id="i2"><a href="">123</a></li> <li>234</li> <li>789</li> </ul> <script> let ele=document.getElementById("i2"); // 获取文本 console.log(ele.innerHTML); console.log(ele.innerText); //赋值文本 //ele.innerHTML="yuan" //ele.innerText="yuan" ele.innerHTML="<a href=''>yuan</a>" ele.innerText="<a href=''>alex</a>" </script> </body> </html>
3.属性控制
attribute操作
ele.setAttribute("egon","123");
ele.getAttribute("egon");
ele.removeAttribute("alex");
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li id="i1">123</li> </ul> <input type="text" id="i2"> <script> let ele=document.getElementById("i1"); let ele2=document.getElementById("i2"); ele.setAttribute("egon","123"); ele.getAttribute("alex"); ele.getAttribute("egon"); ele.removeAttribute("alex") ; ele2.value; ele2.value=0 </script> </body> </html>
4.class属性控制
ele.classList.add("c3")
ele.classList.remove("c2)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: rebeccapurple; } .c2{ color: white; } .c3{ font-size: 28px; } </style> </head> <body> <div class="c1">Yuan</div> <script> var ele=document.getElementsByClassName("c1")[0]; ele.classList.add("c3"); ele.classList.remove("c1") </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } li,ul{ list-style: none; } .box{ width: 100%; height: 600px; } .box .left{ float: left; width: 20%; height: 100%; background: #a3a3a3; } .box .right{ float: right; width: 80%; height: 100%; background: #829094; } .box .left .item{ width: 100%; /*height: 120px;*/ margin-bottom: 5px; } .box .left .item p{ width: 100%; height: 30px; background: red; } .hide{ display: none; } </style> </head> <body> <div class="box"> <div class="left"> <div class="item"> <p class="target">菜单一</p> <ul class="it hide"> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> </ul> </div> <div class="item"> <p class="target">菜单二</p> <ul class="it hide"> <li>22222</li> <li>22222</li> <li>22222</li> <li>22222</li> </ul> </div> <div class="item"> <p class="target">菜单三</p> <ul class="it hide"> <li>33333</li> <li>33333</li> <li>33333</li> <li>33333</li> </ul> </div> </div> <div class="right"> </div> </div> <script> //找到需要绑定事件的标签 var p_lst = document.getElementsByClassName("target"); for (var i=0;i<p_lst.length;i++){ p_lst[i].onclick = function () { //把自己的下一个兄弟节点属性，设置为显示 this.nextElementSibling.classList.remove("hide"); //将其他兄弟节点属性，设置为隐藏 for (var j=0;j<p_lst.length;j++){ if(p_lst[j] !==this){ p_lst[j].nextElementSibling.classList.add("hide"); } } } } </script> </body> </html>
5.css控制
var ele=document.getElementsByClassName("c1")[0];
ele.style.color="red";
ele.style.fontSize="38px"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="d" id ="d"> python </div> <script> //css 操作 // var d = document.getElementsByClassName("d")[0]; var d =document.getElementById("d"); d.style.width ="200px"; d.style.height ="200px"; d.style.fontSize="20px"; d.style.color = "green"; d.style.border ="1px solid"; d.style.background ="red"; </script> </body> </html>