當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
05 JS基础DOM
生活随笔
收集整理的這篇文章主要介紹了
05 JS基础DOM
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
05 JS基礎DOM
JS的window對象定時器：
window下一些方法：
<script>彈出window.alert('hello')返回布爾值var ret = window.confirm('hello lzy')console.log(ret)返回輸入var ret1 = window.prompt('hello ///')console.log(ret1)轉到新窗口open('http://www.baidu.com')</script> View Code顯示時間：
<head><meta charset="UTF-8"><title>Title</title><style>#id1{width: 200px;height: 200px;}</style></head><body><input type = 'text' id = 'id1' onclick = "begin()"><button onclick = "end()">停止</button><script>function showTime() {var current_time = new Date().toLocaleString();var ele = document.getElementById('id1');ele.value = current_time;}var clock1;function begin() {if (clock1 == undefined) {showTime();clock1 = setInterval(showTime, 1000)}}function end(){clearInterval(clock1);clock1=undefined}</script></body> View Codelocation://加載網址？
<body><button onclick = "f()"></button><script>function f(){// location.assign("http://www.baidu.com")// location.reload()// location.replace("http://www.baidu.com") }</script></body> View CodeDOM節點：DOM定義了訪問HTML和XML文檔的標準：是W3C（萬維網聯盟）
的標準
分為三個不同部分：
核心 DOM 針對任何結構化文檔的標準模型
XML了DOM 針對XML文檔的標準模型
HTML DOM 針對HTML文檔的標準模型
基礎屬性：
查找：
ID NAME classname tagname；<body><div class = "div1"><p name = "littleP" class = "p1">hello p</p><div class = "div2">hello div2<div>div3</div><a href="">click</a></div><span>span111</span></div><span>spanspanspanspan</span><div>hhhhh</div><script>var ele4 = document.getElementsByName("littleP")[0]var ele5 = ele4.nextElementSibling;console.log(ele5.innerHTML);console.log(ele5.innerText);//局部查找var ele6=document.getElementsByClassName("div1")[0];var ele7=ele6.getElementsByTagName("span");console.log(ele7[0].innerHTML)</script></body> View CodeEvent（事件）：
search：<input type = "text" id = "search" value = "請輸入用戶名" onfocus = "f1()"><script>var ele = document.getElementById("search")function f1(){if(ele.value == "請輸入用戶名"){ele.value ="";}}function f2(){if(!ele.value.trim()){ele.value = "請輸入用戶名";}}</script>load事件：<head><meta charset="UTF-8"><title>Title</title><script>function f(){var ele = document.getElementsByClassName("div1")[0]console.log(ele.innerHTML)}// ele.css("color","red")</script></head><body onload = "f()"><div class = "div1">hello div1</div></body> 事件綁定：<body><div class="v1"><div class="v2">dddd</div><div class="v2">dddd</div><div class="v2">dddd</div><div class="v2">dddd</div><div class="v2">dddd</div><p id="p1" onclick="func(this)">pppppp</p></div><script>function func(that) {console.log(that)console.log(that.previousElementSibling);console.log(that.parentNode);}// var ele=document.getElementById("p1");// ele.οnclick=function () {// alert(123)// };// 事件綁定2// var ele2=document.getElementsByClassName("v2");// // for(var i=0;i<ele2.length;i++){// ele2[i].οnclick=function () {// alert(555)// }// }// </script></body>onsubmit事件與組織事件拖延<body><form action = "" id = "form"><input type="text" name = "username"><input type="submit" value = "提交"></form><!--onsubmit提交時觸發 如果驗證失敗 組織觸發--><script>var ele = document.getElementById("form")ele.onsubmit = function (e) {alert(1234)// return false //此處返回false 不提交// e.preventDefault() //組織第二方式 }// Event里面一個參數 such as “e” 拿到此次事件狀態信息</script></body>事件傳播：（大概同上例子）<style>.outer{width: 300px;height: 300px;background-color: aqua;}.inner{width: 100px;height: 100px;background-color: black;}</style></head><body><div class = "outer" onclick="func2()"><div class = "inner" onclick="func1()"></div></div><script>var ele = document.getElementsByClassName("inner")[0]ele.onclick = function(e){alert("i am inner")e.stopPropagation()};// function func1() {// alert("i am inner")// }function func2() {alert("i am outer")}</script></body> View Code增刪改查：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.div1,.div2,.div3,.div4{width: 300px;height: 300px;}.div1{background-color: aqua;}.div2{background-color: green;}.div3{background-color: red;}.div4{background-color: black;}</style></head><body><div class = "div1"><button onclick= "add()">add</button>hello div1</div><div class = "div2"><button onclick="del()">del</button>hello div2</div><div class = "div3"><button onclick="change()">change</button>hello div3</div><div class = "div4">hello div4</div><script>function change() {var img = document.createElement("img");// img.setAttribute("src","4.jgp"); //與下一條命令作用相同 img.src = '4.jpg';var ele = document.getElementsByTagName("p")[0];var father = document.getElementsByClassName("div1")[0];father.replaceChild(img,ele)}function add(){var ele = document.createElement("p");ele.innerHTML = "hello p";//可除去內容// ele.innerHTML = "<h1>hello p</h1>"; #此兩處顯示區別// ele.innerText = "<h1>hello p</h1>";// ele.style.color = "red"; #CSS樣式// ele.style.fontSize = "10px";var father = document.getElementsByClassName("div1")[0];father.appendChild(ele)}function del() {var father = document.getElementsByClassName("div1")[0];var son = father.getElementsByTagName("p")[0];father.removeChild(son)}</script></body></html> View Code模塊對話框：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.content{height: 1900px;background-color: aqua;}.shade{position: fixed; //固定top:0;left:0;right:0;bottom:0;background-color: burlywood;opacity: 0.35; //透明度}.model{width:200px;height: 200px;background-color: green;position: absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;}.hide{display:none;}</style></head><body><div class = "content"><button onclick="show()">show</button>hello</div><div class = "shade hide">hehehe</div><div class = "model hide"><button onclick = "cancel()">cancle</button></div><script>function show(){var ele_shade = document.getElementsByClassName("shade")[0];var ele_model = document.getElementsByClassName("model")[0];ele_model.classList.remove("hide");ele_shade.classList.remove("hide")}</script></body></html> View Code表格框之正反選：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <button onclick = "selectALL()">全選</button> <button onclick="Cancle()">取消</button> <button onclick="reverse()">反選</button> <hr> <table><tr><td><input type = "checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type = "checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type = "checkbox"></td><td>111</td><td>222</td><td>333</td></tr> </table><script>function selectALL() {var inputs = document.getElementsByTagName("input");for (var i = 0;i < inputs.length;i++){input = inputs[i];input.checked = true;}}function Cancle() {var inputs = document.getElementsByTagName("input");for (var i = 0;i < inputs.length;i++){input = inputs[i];input.checked = false;}}function reverse() {var inputs = document.getElementsByTagName("input");for (var i = 0;i < inputs.length;i++){input = inputs[i];input.checked = !input.checked;}} </script></body> </html> View Code二級聯動：（省份和市的選擇）例子
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <select id = "province"><option value = "">請選擇省份</option> </select> <select name = "" id = "citys"><option value = "">請選擇城市</option> </select><script>data = {"河北省":["石家莊",'廊坊'],"山西省":['大同','太原'],"陜西省":['西安','延安']}// console.log(data);// console.log(typeof data);// console.log(data['河北省'])var pro_ele = document.getElementById("province")var city_ele = document.getElementById("citys")for (var i in data){var ele= document.createElement("option");ele.innerHTML = i;console.log("hello")pro_ele.appendChild(ele)}pro_ele.onchange = function(){console.log(this.selectedIndex)console.log(this.options[this.selectedIndex])var citys = data[this.options[this.selectedIndex].innerHTML];city_ele.options.length = 1;for (var i=0;i<citys.length;i++){var ele = document.createElement("option");ele.innerHTML = citys[i];city_ele.appendChild(ele)}}</script></body> </html> View Code?
posted on 2019-04-06 21:45 TTNTONZES 閱讀(...) 評論(...) 編輯 收藏轉載于:https://www.cnblogs.com/louzhiyuan/p/10663027.html
總結
以上是生活随笔為你收集整理的05 JS基础DOM的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 包装设计中文字字体的logo设计要注意什
- 下一篇： Python开发【第十一篇】：JavaS