关于DOM操作的实例分析
一、介绍
文档对象模型Document Object ModelDOM是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法可以改变文档的内容和呈现方式。我们最为关心的是DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器而不是JavaScript语言规范里的规定的核心内容。
二、查找元素
1.直接查找
1 document.getElementById // 根据ID获取一个标签2 document.getElementsByName // 根据name属性获取标签集合3 document.getElementsByClassName // 根据class属性获取标签集合4 document.getElementsByTagName // 根据标签名获取标签集合
2.间接查找
1 parentNode // 父节点 2 childNodes // 所有子节点 3 firstChild // 第一个子节点 4 lastChild // 最后一个子节点 5 nextSibling // 下一个兄弟节点 6 previousSibling // 上一个兄弟节点 7 8 parentElement // 父节点标签元素 9 children // 所有子标签10 firstElementChild // 第一个子标签元素11 lastElementChild // 最后一个子标签元素12 nextElementtSibling // 下一个兄弟标签元素13 previousElementSibling // 上一个兄弟标签元素
三、操作元素
1.内容
1 innerText // 文本2 outerText 3 innerHTML // HTML内容4 outerHTML5 value // 值
2.属性
1 attributes // 获取所有标签属性2 setAttribute(key,value) // 设置标签属性3 getAttribute(key) // 获取指定标签属性
3.class操作
1 className // 获取所有类名2 classList.remove(cls) // 删除指定类3 classList.add(cls) // 添加类
4.标签操作
a.创建标签
1 // 方式一2 var tag = document.createElement("a");3 tag.innerText = "百度";4 tag.className = "c1";5 tag.href = "6 7 // 方式二8 var tag = "<a class='c1' href='https//www.baidu.com'>百度</a>"b.操作标签
1 // 方式一 2 function AddEle1() { 3 //创建一个标签 4 //将标签添加到i1里面 5 var tag = "<p><input type='text'></p>"; 6 //beforeBegin、afterBegin、beforeEnd、afterEnd 7 document.getElementById("i1").insertAdjacentHTML("beforeEnd",tag); 8 } 9 10 // 方式二11 function AddEle2() {12 //创建一个标签13 //将标签添加到i1里面14 var tag = document.createElement("input");15 tag.setAttribute("type", "text");16 tag.style.fontSize = "16px";17 tag.style.color = "red";18 19 var p = document.createElement("p");20 p.appendChild(tag);21 document.getElementById("i1").appendChild(p);22 }注意第一个参数只能是“beforeBegin”、"afterBegin"、"beforeEnd"、"afterEnd"
5.样式操作
1 var obj = document.getElementById("i1");2 obj.style.fontSize = “32px”;3 obj.style.backgroundColor = "red";6.位置操作
1 总文档高度 2 document.documentElement.offsetHeight 3 4 当前文档占屏幕高度 5 document.documentElement.clientHeight 6 7 自身高度 8 tag.offsetHeight 9 10 距离上级定位高度11 tag.offsetTop12 13 父定位标签14 tag.offsetParent15 16 滚动高度17 tag.scrollTop
7.提交表单
任何标签通过DOM都可以提交表单
1 document.getElementById("form").submit()8.其他操作
1 console.log 输出框 2 alert 弹出框 3 confirm 确认框 4 5 // url和刷新 6 location.href 获取url 7 location.href = "url" 重定向 8 location.reload() 重新加载 9 10 // 定时器11 setInterval 多次定时器12 clearInterval 清除多次定时器13 setTimeout 单次定时器14 clearTimeout 清除单次定时器
四、事件
对于事件需要注意的要点
this
event
事件链以及跳出
this标签当前正在操作的标签event封装了当前事件的内容。
绑定事件方式
1.直接标签绑定 onclick="xxx()"
2.先获取Dom对象然后进行绑定
document.getElementById("xx").onclick
document.getElementById("xx").onfocus
this当前触发事件的标签
1.第一种绑定方式
function ClickOn(self){
// self 当前点击的标签
}
2.第二种绑定方式
document.getElementById("xx").onclick = function(){
// this 代指当前点击的标签
}
3.第三种绑定方式捕捉 冒泡
addEventListener("click", function(){}, false)
addEventListener("click", function(){}, true)
五、JavaScript词法分析
1 function t1(age){:2 console.log(age);3 var age = 27;4 console.log(age);5 function age(){};6 console.log(age);7 }8 t1(3);函数在运行的瞬间生成一个活动对象Active Object简称AO
第一步分析参数
1.函数接收形式参数添加到AO的属性中并且这个时候值为undefined即AO.age=undefined
2.接收实参添加到AO的属性覆盖之前的undefined此时AO.age=3
第二步分析变量声明
1.如何上一步分析参数中AO还没有age属性则添加AO属性为undefined即AO.age=undefined
2.如果AO上面已经有age属性了则不作任何修改AO.age=3
第三部分析函数声明
如果有function age(){}把函数赋值给AO.age覆盖上一步分析的值
结果应该是
function age(){}
27
27
六、示例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 <div id="i1">欢迎xxx莅临指导</div> 9 <script>10 function func() {11 // 根据ID获取标签内容12 var tag = document.getElementById("i1");13 // 获取标签内部的内容14 var content = tag.innerText;15 // 获取字符串第一个字符16 var f = content.charAt(0);17 // 获取字符串第二至末尾的全部字符18 var l = content.substring(1, content.length);19 // 拼接新的标签内容20 var new_content = l + f;21 // 修改标签内部的内容22 tag.innerText = new_content;23 }24 // 设置计时器25 setInterval("func()", 500);26 </script>27 </body>28 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .hide{ 8 display: none; 9 }10 .c1{11 position: fixed;12 top: 0;13 right: 0;14 bottom: 0;15 left: 0;16 background-color: #000000;17 opacity: 0.5;18 z-index: 9;19 }20 .c2{21 width: 500px;22 height: 400px;23 background-color: #ffffff;24 position: fixed;25 top: 50%;26 left: 50%;27 margin-top: -200px;28 margin-left: -250px;29 z-index: 10;30 }31 </style>32 </head>33 <body>34 <div>35 <input id="o1" type="button" value="添加"/>36 <table>37 <thead>38 <tr>39 <th>主机名</th>40 <th>端口</th>41 </tr>42 </thead>43 <tbody>44 <tr>45 <td>1.1.1.1</td>46 <td>190</td>47 </tr>48 <tr>49 <td>1.1.1.2</td>50 <td>192</td>51 </tr>52 <tr>53 <td>1.1.1.3</td>54 <td>193</td>55 </tr>56 </tbody>57 </table>58 </div>59 <!-- 遮罩层开始 -->60 <div id="i1" class="c1 hide"></div>61 <!-- 遮罩层结束 -->62 63 <!-- 弹出窗开始 -->64 <div id="i2" class="c2 hide">65 <p><input type="text"/></p>66 <p><input type="text"/></p>67 <p><input type="button" value="确认"/></p>68 <p><input id="o2" type="button" value="取消"/></p>69 </div>70 <!-- 弹出窗结束 -->71 <script>72 document.getElementById("o1").onclick = function () {73 document.getElementById("i1").classList.remove("hide");74 document.getElementById("i2").classList.remove("hide");75 }76 document.getElementById("o2").onclick = function () {77 document.getElementById("i1").classList.add("hide");78 document.getElementById("i2").classList.add("hide");79 }80 </script>81 </body>82 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 7 </head> 8 <body> 9 <div>10 <input id="i1" type="button" value="全选"/>11 <input id="i2" type="button" value="取消"/>12 <input id="i3" type="button" value="反选"/>13 <table>14 <thead>15 <tr>16 <th>选择</th>17 <th>主机名</th>18 <th>端口</th>19 </tr>20 </thead>21 <tbody id="tb">22 <tr>23 <td><input type="checkbox"/></td>24 <td>1.1.1.1</td>25 <td>190</td>26 </tr>27 <tr>28 <td><input type="checkbox"/></td>29 <td>1.1.1.2</td>30 <td>192</td>31 </tr>32 <tr>33 <td><input type="checkbox"/></td>34 <td>1.1.1.3</td>35 <td>193</td>36 </tr>37 </tbody>38 </table>39 </div>40 <script>41 document.getElementById("i1").onclick = function () {42 var tb = document.getElementById("tb");43 var tr_list = tb.children;44 for(var i=0;i<tr_list.length;i++){45 var current_tr = tr_list[i];46 var checkbox = current_tr.children[0].children[0];47 checkbox.checked = true;48 }49 };50 document.getElementById("i2").onclick = function () {51 var tb = document.getElementById("tb");52 &bsp; var tr_list = tb.children;53 for(var i=0;i<tr_list.length;i++){54 var current_tr = tr_list[i];55 var checkbox = current_tr.children[0].children[0];56 checkbox.checked = false;57 }58 };59 document.getElementById("i3").onclick = function () {60 var tb = document.getElementById("tb");61 var tr_list = tb.children;62 for(var i=0;i<tr_list.length;i++){63 var current_tr = tr_list[i];64 var checkbox = current_tr.children[0].children[0];65 if(checkbox.checked) {66 checkbox.checked = false;67 }else{68 checkbox.checked = true;69 }70 }71 };72 </script>73 </body>74 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .hide{ 8 displa: none; 9 }10 .item .header{11 height: 35px;12 background-color: #2459a2;13 color: #ffffff;14 line-height: 35px;15 }16 </style>17 </head>18 <body>19 <div style="width: 300px">20 <div class="item">21 <div id="i1" class="header" onclick="ChangeMenu('i1')">菜单1</div>22 <div class="content">23 <div>内容1</div>24 <div>内容1</div>25 &;bsp; <div>内容1</div>26 </div>27 </div>28 <div class="item">29 <div id="i2" class="header" onclick="ChangeMenu('i2')">菜单2</div>30 <div class="content hide">31 <div>内容2</div>32 <div>内容2</div>33 <div>内容2</div>34 </div>35 </div>36 <div class="item">37 <div id="i3" class="header" onclick="ChangeMenu('i3')">菜单3</div>38 <div class="content hide">39 <div>内容3</div>40 <div>内容3</div>41 <div>内容3</div>42 </div>43 </div>44 <div class="item">45 <div id="i4" class="header" onclick="ChangeMenu('i4')">菜单4</div>46 <div class="content hide">47 <div>内容4</div>48 <div>内容4</div>49 <div>内容4</div>50 </div>51 </div>52 </div>53 <script>54 function ChangeMenu(nid) {55 var current_header = document.getElementById(nid);56 var item_list = current_header.parentElement.parentElement.children;57 for(var i=0;i<item_list.length;i++){58 var current_item = item_list[i];59 current_item.children[1].classList.add("hide");60 }61 current_header.nextElementSibling.classList.remove("hide");62 };63 </script>64 </body>65 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .hide{ 8 display: none; 9 }10 .item .header{11 height: 35px;12 background-color: #2459a2;13 color: #ffffff;14 line-height: 35px;15 }16 </style>17 </head>18 <body>19 <div style="width: 600px;margin: 0 auto">20 <input id="i1" type="text" value="请输入关键字"/>21 <input type="text" placeholder="请输入关键字" />22 </div>23 <script>24 document.getElementById("i1").onfocus = function () {25 var val = this.value;26 if(val == "请输入关键字"){27 this.value = "";28 }29 }30 document.getElementById("i1").onblur = function () {31 var val = this.value;32 if(val == ""){33 this.value = "请输入关键字";34 }35 }36 </script>37 </body>38 </html>Atas ialah kandungan terperinci 关于DOM操作的实例分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Tutorial penggunaan PyCharm: membimbing anda secara terperinci untuk menjalankan operasi
Feb 26, 2024 pm 05:51 PM
PyCharm ialah persekitaran pembangunan bersepadu (IDE) Python yang sangat popular. Ia menyediakan pelbagai fungsi dan alatan untuk menjadikan pembangunan Python lebih cekap dan mudah. Artikel ini akan memperkenalkan anda kepada kaedah operasi asas PyCharm dan menyediakan contoh kod khusus untuk membantu pembaca memulakan dengan cepat dan menjadi mahir dalam mengendalikan alat tersebut. 1. Muat turun dan pasang PyCharm Pertama, kita perlu pergi ke laman web rasmi PyCharm (https://www.jetbrains.com/pyc
Apakah sudo dan mengapa ia penting?
Feb 21, 2024 pm 07:01 PM
sudo (eksekusi superuser) ialah arahan utama dalam sistem Linux dan Unix yang membenarkan pengguna biasa menjalankan perintah tertentu dengan keistimewaan root. Fungsi sudo dicerminkan terutamanya dalam aspek berikut: Menyediakan kawalan kebenaran: sudo mencapai kawalan ketat ke atas sumber sistem dan operasi sensitif dengan membenarkan pengguna mendapatkan kebenaran superuser buat sementara waktu. Pengguna biasa hanya boleh mendapatkan keistimewaan sementara melalui sudo apabila diperlukan, dan tidak perlu log masuk sebagai pengguna super sepanjang masa. Keselamatan yang dipertingkatkan: Dengan menggunakan sudo, anda boleh mengelak daripada menggunakan akaun akar semasa operasi rutin. Menggunakan akaun akar untuk semua operasi boleh menyebabkan kerosakan sistem yang tidak dijangka, kerana sebarang operasi yang salah atau cuai akan mempunyai kebenaran penuh. dan
Langkah-langkah operasi dan langkah berjaga-jaga Deploy Linux
Mar 14, 2024 pm 03:03 PM
Langkah pengendalian dan langkah berjaga-jaga LinuxDeploy LinuxDeploy ialah alat berkuasa yang boleh membantu pengguna menggunakan pelbagai pengedaran Linux dengan pantas pada peranti Android, membolehkan pengguna mengalami sistem Linux yang lengkap pada peranti mudah alih mereka. Artikel ini akan memperkenalkan langkah pengendalian dan langkah berjaga-jaga LinuxDeploy secara terperinci dan memberikan contoh kod khusus untuk membantu pembaca menggunakan alat ini dengan lebih baik. Langkah-langkah operasi: Pasang LinuxDeploy: Pertama, pasang
Apa yang perlu dilakukan jika anda terlupa menekan F2 untuk kata laluan but win10
Feb 28, 2024 am 08:31 AM
Mungkin ramai pengguna mempunyai beberapa komputer yang tidak digunakan di rumah, dan mereka telah lupa sepenuhnya kata laluan kuasa hidup kerana mereka tidak digunakan untuk masa yang lama, jadi mereka ingin tahu apa yang perlu dilakukan jika mereka terlupa kata laluan? Kemudian mari kita lihat bersama-sama. Apa yang perlu dilakukan jika anda terlupa menekan F2 untuk kata laluan boot win10 1. Tekan butang kuasa komputer, dan kemudian tekan F2 semasa but (jenama komputer yang berbeza mempunyai butang yang berbeza untuk memasuki BIOS). 2. Dalam antara muka bios, cari pilihan keselamatan (lokasi mungkin berbeza untuk jenama komputer yang berbeza). Biasanya dalam menu tetapan di bahagian atas. 3. Kemudian cari pilihan SupervisorPassword dan klik padanya. 4. Pada masa ini, pengguna boleh melihat kata laluannya, dan pada masa yang sama mencari Didayakan di sebelahnya dan menukarnya kepada Dis.
Perkongsian langkah operasi tangkapan skrin Huawei Mate60 Pro
Mar 23, 2024 am 11:15 AM
Dengan populariti telefon pintar, fungsi tangkapan skrin telah menjadi salah satu kemahiran penting untuk kegunaan harian telefon bimbit. Sebagai salah satu telefon mudah alih utama Huawei, fungsi tangkapan skrin Huawei Mate60Pro secara semula jadi telah menarik banyak perhatian daripada pengguna. Hari ini, kami akan berkongsi langkah operasi tangkapan skrin telefon mudah alih Huawei Mate60Pro, supaya semua orang boleh mengambil tangkapan skrin dengan lebih mudah. Pertama sekali, telefon bimbit Huawei Mate60Pro menyediakan pelbagai kaedah tangkapan skrin, dan anda boleh memilih kaedah yang sesuai dengan anda mengikut tabiat peribadi anda. Berikut ialah pengenalan terperinci kepada beberapa pemintasan yang biasa digunakan:
Bagaimana untuk melumpuhkan butang tindakan pada iPhone 15 Pro dan 15 Pro Max
Nov 07, 2023 am 11:17 AM
Apple membawa beberapa ciri perkakasan eksklusif Pro kepada iPhone 15 Pro dan 15 Pro Max, yang menarik perhatian semua orang. Kami bercakap tentang bingkai titanium, reka bentuk anggun, cipset A17 Pro baharu, kanta telefoto 5x yang menarik dan banyak lagi. Daripada semua loceng dan wisel yang ditambahkan pada model iPhone 15 Pro, butang tindakan kekal sebagai ciri yang menonjol dan menonjol. Tidak perlu dikatakan, ia adalah tambahan yang berguna untuk melancarkan tindakan pada iPhone anda. Yang berkata, anda secara tidak sengaja boleh menahan butang Tindakan dan mencetuskan ciri secara tidak sengaja. Terus terang, ia menjengkelkan. Untuk mengelakkan ini, anda harus melumpuhkan butang tindakan pada iPhone 15 Pro dan 15 Pro Max. biarkan
Butang tindakan tersuai: Terokai pemperibadian pada iPhone 15 Pro
Sep 24, 2023 pm 03:05 PM
iPhone 15 Pro dan iPhone 15 Pro Max Apple memperkenalkan butang tindakan boleh atur cara baharu yang menggantikan suis dering/senyap tradisional di atas butang kelantangan. Teruskan membaca untuk mengetahui perkara yang dilakukan oleh butang Tindakan dan cara menyesuaikannya. Butang tindakan baharu pada model Apple iPhone 15 Pro menggantikan suis iPhone tradisional yang mengaktifkan Dering dan Senyap. Secara lalai, butang baharu masih akan mengaktifkan kedua-dua fungsi dengan tekan lama, tetapi anda juga boleh meminta tekan lama melaksanakan pelbagai fungsi lain, termasuk akses pantas ke kamera atau lampu suluh, mengaktifkan memo suara, mod fokus, terjemahan dan ciri kebolehaksesan seperti pembesar . Anda juga boleh mengaitkannya dengan satu pintasan, membuka satu tan kemungkinan lain
Pemantauan tatal halaman web CSS: pantau acara tatal halaman web dan lakukan operasi yang sepadan
Nov 18, 2023 am 10:35 AM
Pemantauan tatal halaman web CSS: pantau acara tatal halaman web dan lakukan operasi yang sepadan Dengan pembangunan berterusan teknologi bahagian hadapan, kesan dan interaksi halaman web menjadi lebih kaya dan pelbagai. Antaranya, pemantauan skrol adalah teknologi biasa yang boleh melakukan beberapa kesan atau operasi khas berdasarkan kedudukan skrol apabila pengguna menatal halaman web. Secara umumnya, pemantauan skrol boleh dilaksanakan melalui JavaScript. Walau bagaimanapun, dalam beberapa kes, kami juga boleh mencapai kesan pemantauan tatal melalui CSS tulen. Artikel ini akan memperkenalkan cara melaksanakan penatalan halaman web melalui CSS
