1. はじめに
Document Object ModelDOM は、HTML および XML ドキュメント用のプログラミング インターフェイスです。これは、ドキュメントのコンテンツとプレゼンテーションを変更できるドキュメントの構造化表現方法を提供します。私たちが最も懸念しているのは、DOM が Web ページをスクリプトや他のプログラミング言語と接続していることです。 DOM は、JavaScript 言語仕様で指定されているコア コンテンツではなく、ブラウザーに属します。
2. 要素の検索
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 // 值
1 attributes // 获取所有标签属性2 setAttribute(key,value) // 设置标签属性3 getAttribute(key) // 获取指定标签属性
3 .クラス操作
1 className // 获取所有类名2 classList.remove(cls) // 删除指定类3 classList.add(cls) // 添加类
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. スタイル操作
。 
りー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>以上がDOM操作の分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
