當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

web前端【第九篇】JS的DOM对象三

發布時間：2025/4/16 HTML 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端【第九篇】JS的DOM对象三小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、JS中for循環遍歷測試

for循環遍歷有兩種

第一種：是有條件的那種，例如 ? ?for(var i = 0;i<ele.length;i++){}

第二種：for （var i in li ）{}

現在我們來說一下測試一下第二種（數組和obj的）

//測試for循環 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <script>var arr = [11,22,33,44,55];var obj = {'username':'zzz','agr':20}; //js中的這個類似字典的不叫字典，而是一個對象for (var i in obj){console.log(i); //拿到的是鍵console.log(obj[i]) //值}for (var j in arr){console.log(j); //拿到索引console.log(arr[j]) //拿到值} </script> </body> </html>

二、獲取value屬性值

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>獲取value值</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.οnclick=function () {var ele_input=document.getElementById("c1");var ele_select=document.getElementById("s1");console.log(ele_select.value)}; </script> </body> </html>

三、表格示例（全選，反選，取消）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表格示例</title> </head> <body> <button class="select">全選</button> <button class="reserve">反選</button> <button class="cancel">取消</button> <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> // 方式一：分別給每個button增加事件var ele_select = document.getElementsByClassName('select')[0];var ele_reserve = document.getElementsByClassName('reserve')[0];var ele_cancel = document.getElementsByClassName('cancel')[0];var ele_input = document.getElementsByClassName('check');//全選ele_select.onclick = function () {for (var i = 0; i < ele_input.length; i++) {//添加一個checked屬性ele_input[i].checked = 'checked'}};//取消ele_cancel.onclick = function () {for (var i =0;i<ele_input.length;i++){//刪除checked屬性，直接設置為空就行了ele_input[i].checked = ''}};//反選ele_reserve.onclick = function () {for (var i = 0; i < ele_input.length; i++) {var ele = ele_input[i];if (ele.checked) {//如果選中了就設置checked為空ele.checked = '';}else {//如果沒有就設置checked = checkedele.checked = 'checked';}}};//方式二：方式一的優化循環增加事件 // var ele_button = document.getElementsByTagName('button'); // var ele_input = document.getElementsByClassName('check'); // for(var i=0;i<ele_button.length;i++) { // ele_button[i].onclick = function () { // if (this.innerHTML == '全選') { // for (var i = 0; i < ele_input.length; i++) { // //添加一個checked屬性 // ele_input[i].checked = 'checked' // } // } // else if (this.innerHTML == '取消') { // for (var i = 0; i < ele_input.length; i++) { // //刪除checked屬性，直接設置為空就行了 // ele_input[i].checked = '' // } // } // else { // for (var i = 0; i < ele_input.length; i++) { // var ele = ele_input[i]; // if (ele.checked) {//如果選中了就設置checked為空 // ele.checked = ''; // } // else {//如果沒有就設置checked = checked // ele.checked = 'checked'; // } // } // } // } // }</script> </body> </html>

四、模態對話框

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.back{background-color: white;height: 2000px;}.shade{position: fixed;top: 0;bottom: 0;left:0;right: 0;background-color: grey;opacity: 0.4;}.hide{display: none;}.models{position: fixed;top: 50%;left: 50%;margin-left: -100px;margin-top: -100px;height: 200px;width: 200px;background-color: wheat;}</style> </head> <body> <div class="back"><input class="c" type="button" value="click"> </div><div class="shade hide handles"></div><div class="models hide handles"><input class="c" type="button" value="cancel"> </div><script>var eles=document.getElementsByClassName("c");var handles=document.getElementsByClassName("handles");for(var i=0;i<eles.length;i++){eles[i].οnclick=function(){if(this.value=="click"){for(var j=0;j<handles.length;j++){handles[j].classList.remove("hide");}}else {for(var j=0;j<handles.length;j++){handles[j].classList.add("hide");}}}}</script></body> </html>

五、搜索框 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>模擬placeholder屬性的功能</title> </head> <body> <input type="text" placeholder="username" id="submit"> <input type="text" value="username" id="submit1"> <script> // var ele = document.getElementById('submit1');var ele = document.getElementById('submit1');ele.onfocus = function () {//先獲取焦點，點擊輸入框就獲取到焦點，光標一上去就把值設成空this.value=""};ele.onblur = function () { // 當光標不點擊那個輸入框的時候就失去焦點了//當失去焦點的時候，判斷當前的那個值是不是為空，是否含有空格 // 如果為空或者有空格，用trim()去掉空格。然后賦值為usernameif (this.value.trim()==""){this.value='username'}} </script> </body> </html>

六、tab切換

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>tab</title><style>*{margin:0; padding:0; list-style:none;}body{font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;}h3{text-align: center;color:darkcyan;margin-top: 30px;letter-spacing: 5px;}.box{width: 1000px;margin:50px auto 0px;}#title{line-height: 40px;background-color: rgb(247,247,247);font-size: 16px;font-weight: bold;color: rgb(102,102,102);}#title span{float: left;width: 166px;text-align: center;}#title span:hover{/*color: black;*/cursor: pointer;}#content{margin-top: 20px;}#content li{width: 1050px;display: none;background-color: rgb(247,247,247);}#content li div{width: 156px;margin-right: 14px;float: left;text-align: center;}#content li div a{font-size: 14px;color: black;line-height: 14px;/* float: left;*/display: inline-block;margin-top: 10px;}#content li a:hover{color: #B70606;}#content li div span{font-size: 16px;line-height: 16px;/*float: left;*/display: block;color: rgb(102,102,102);margin-top: 10px;}#content img{float: left;width: 155px;height: 250px;}#title .select{background-color: #2459a2;color: white;border-radius: 10%;}#content .show{display: block;}.show span{color: red!important;font-size: 30px;}</style> </head><body><h3 id="wel">京東商城歡迎您</h3>   <marquee behavior="scroll" direction="right">歡迎您苑昊先生</marquee><script>function test(){var mywel = document.getElementById("wel");var content = mywel.innerText;var f_content = content.charAt(0);var l_content = content.substring(1,content.length);var new_content = l_content + f_content;mywel.innerText = new_content;}// setInterval("test();", 500); </script><div class="box"><p id="title"><span class="select">家用電器</span><span>家具</span><span>汽車</span><span>食品</span><span>女鞋</span><span>醫療保健</span></p><ul id="content"><li class="show"><div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容聲(Ronshen)冰箱</a><span>價格:5600</span></div><div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣機"><a href="#">海爾洗衣機</a><span>價格:5400</span></div><div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="電飯煲"><a href="#">福庫(CUCKOO)電飯煲</a><span>價格:3999</span></div><div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智能電視"><a href="#">三星智能電視</a><span>價格:8999</span></div><div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="凈水器"><a href="#">凈水器</a><span>價格:1300</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空氣凈化器"><a href="#">空氣凈化器</a><span>價格:5300</span></div></li><li><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div></li><li><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div></li><li><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div></li><li><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div></li><li><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁腎寶片"><a href="#">匯仁腎寶片</a><span>價格:322</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁腎寶片"><a href="#">匯仁腎寶片</a><span>價格:322</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁腎寶片"><a href="#">匯仁腎寶片</a><span>價格:322</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁腎寶片"><a href="#">匯仁腎寶片</a><span>價格:322</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁腎寶片"><a href="#">匯仁腎寶片</a><span>價格:322</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁腎寶片"><a href="#">匯仁腎寶片</a><span>價格:322</span></div></li></ul></div><script>var title=document.getElementById('title');var content=document.getElementById('content');var category=title.getElementsByTagName('span');var item=content.getElementsByTagName('li');for (var i = 0; i < category.length; i++) {category[i].index=i;category[i].οnclick=function(){for (var j = 0; j < category.length; j++) {category[j].className='';item[j].className='';}this.className='select';item[this.index].className='show';}}</script> </body> </html>

四、作用鏈域

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>作用鏈域</title> </head> <body> <script>var s = 12;function f() {console.log(s); //undefinedvar s=12;console.log(s);//12}f(); </script> </body> </html>

js的作用域

作用域是JavaScript最重要的概念之一，想要學好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。

任何程序設計語言都有作用域的概念，簡單的說，作用域就是變量與函數的可訪問范圍，即作用域控制著變量與函數的可見性和生命周期。在JavaScript中，變量的作用域有全局作用域和局部作用域兩種。

作用域

1. 全局作用域(Global Scope)

在代碼中任何地方都能訪問到的對象擁有全局作用域，一般來說一下幾種情形擁有全局作用域：

(1)最外層函數和在最外層函數外面定義的變量擁有全局作用域

var name="yuan";function foo(){var age=23;function inner(){console.log(age);}inner();}console.log(name); // yuan//console.log(age); // Uncaught ReferenceError: age is not definedfoo(); // 23inner(); // Uncaught ReferenceError: inner is not defined

(2)所有末定義直接賦值的變量自動聲明為擁有全局作用域，例如：

var name="yuan";function foo(){age=23;var sex="male"}foo();console.log(age); // 23console.log(sex); // sex is not defined

變量blog擁有全局作用域，而sex在函數外部無法訪問到。

(3)所有window對象的屬性擁有全局作用域

一般情況下，window對象的內置屬性都都擁有全局作用域，例如window.alert()、window.location、window.top等等。

2.?局部作用域(Local Scope)

和全局作用域相反，局部作用域一般只在固定的代碼片段內可訪問到，最常見的例如函數內部，所有在一些地方也會看到有人把這種作用域成為函數作用域.

如示例1中的age與inner都只有局部作用域。（js中if、for沒有自己的作用域）

作用域鏈(Scope Chain)

在JavaScript中，函數也是對象，實際上，JavaScript里一切都是對象。函數對象和其它對象一樣，擁有可以通過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被創建的作用域中對象的集合，這個集合被稱為函數的作用域鏈，它決定了哪些數據能被函數訪問。

示例演示

please have a try:

//-----**********************例1*********************************var s=12;function f(){console.log(s);var s=12; // if s=12console.log(s)}f();//-----**********************例2*********************************var s=10; function foo(){console.log(s);var s=5;console.log(s);function s(){console.log("ok")}// 函數的定于或聲明是在詞法分析時完成的,執行時已不再有任何操作console.log(s); }foo();//-----***********************例3********************************function bar(age) {console.log(age);var age = 99;
var sex= 'male';console.log(age);function age() {
alert(123)};console.log(age);
return 100; }result=bar(5);//-----********************************************************

結果分析

我相信大家一定會有想不到的結果，接下來我們就以最復雜的例3來分析整個過程。

當一個函數創建后，它的作用域鏈會被創建此函數的作用域中可訪問的數據對象填充。在函數bar創建時，它的作用域鏈中會填入一個全局對象，該全局對象包含了所有全局變量，如下圖所示：

解析到函數調用時，即bar(5)，會生成一個active object的對象，該對象包含了函數的所有局部變量、命名參數、參數集合以及this，然后此對象會被推入作用域鏈的前端，當運行期上下文被銷毀，活動對象也隨之銷毀。新的作用域鏈如下圖所示：

過程解析：

轉載于:https://www.cnblogs.com/xiaohema/p/8455498.html

總結

以上是生活随笔為你收集整理的web前端【第九篇】JS的DOM对象三的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 180217_JAVA学习_TreeSe
下一篇： Lucene——Field.Store（