JavaScript HTML DOM

来源：互联网发布：淘宝投诉电话有用吗编辑：程序博客网时间：2024/05/29 13:11
HTML DOM(文档对象模型)
JavaScript能够改变页面中所有HTML元素
JavaScript能够改变页面中所有HTML属性
JavaScript能够改变页面中的所有CSS样式
JavaScript能够对页面中的事件做出反应
<html lang="zh-cmn-Hans"><head><title>HTML DOM</title><meta name="author" content="text/html;charset=UTF-8" /><style>.fixed{/*表格宽度固定算法：表格等宽*/table-layout:fixed;width:1250;}</style></head><body><table border="2" align="center" class="fixed"><caption style="text-align:center;color:red;font-size:60px">MS DOS<button onclick="deleteEleTbodyTr()">清空内容</button><button onclick="addEleTbodyTr()" align="center">添加样行</button></caption><thead><tr><th>目录</th><th>代码</th><th>用法</th><th>作用</th></tr></thead><tbody id="tbody"><tr><td>01</td><td>CD</td><td>cd 源目录路经</td><td>进入特定的目录</td></tr><tr><td>02</td><td>MD</td><td>md 要创建的目录名</td><td>创建指定的目录名</td></tr><tr><td>03</td><td>RD</td><td>rd 要删除的空目录名</td><td>移除指定的空文件夹</td></tr><tr><td>04</td><td>DIR</td><td>dir</td><td>查看目录</td></tr><tr><td>05</td><td>COPY</td><td>copy 源文件全路径 目标位置</td><td>将某个文件拷贝到指定的文件夹中</td></tr><tr><td>06</td><td>MOVE</td><td>move 源文件全路径 目标位置</td><td>将某个文件移动到指定的文件夹中</td></tr><tr><td>07</td><td>DEL</td><td>del 文件名</td><td>删除指定的文件</td></tr><tr><td>08</td><td>TYPE</td><td>type 文本文件名</td><td>显示文本类文件中的内容</td></tr><tr><td>09</td><td>FC</td><td>fc 一个文件名 另一个文件名</td><td>比较两个文件并显示它们之间的不同</td></tr><tr><td>10</td><td>FIND</td><td>find 字符串 文件名</td><td>在文件中搜索字符串</td></tr><tr><td>11</td><td>REN</td><td>ren 旧文件名 新文件名</td><td>改文件名</td></tr><tr><td>12</td><td>MORE</td><td>type 文件名 | more</td><td>一般和管道符“|”搭配用来分屏显示一个大的文本文件内容</td></tr><tr><td>13</td><td>MODE</td><td>mode con cols=列数 lines=行数 </td><td>改变DOS窗口大小</td></tr><tr><td>14</td><td>CLS</td><td>cls</td><td>清屏磁盘操作系统屏幕（将缓冲区清空）</td></tr><tr><td>15</td><td>PROMPT</td><td>prompt 具体提示符</td><td>改变命令提示符标示</td></tr><tr><td>16</td><td>TITLE</td><td>title+具体的标题</td><td>改变DOS窗口的标题提示</td></tr><tr><td>17</td><td>VER</td><td>ver</td><td>显示当前机器上的操作系统版本信息</td></tr><tr><td>18</td><td>IPCONFIG</td><td>ipconfig</td><td>显示当前机器的网络接口状态</td></tr><tr><td>19</td><td>PING</td><td>ping 主机ip或名字</td><td>向目标主机发送4个icmp数据包，测试对方主机是否收 到并响应，一般常用于做普通网络是否通畅的测试</td></tr><tr><td>20</td><td>SHUTDOWN</td><td>shutdown -s -t 秒数</td><td>关机、重启机器</td></tr><tr><td>21</td><td>MSPAINT</td><td>mspaint</td><td>打开画板</td></tr></tbody></table><!--查找HTML元素通过id找到HTML元素 document.getElementById('<idValue>')通过标签名找到HTML元素 document.getElementsByTagName('<eleName>')通过类名找到HTML元素 document.getElementsByClassName('<classValue>')通过css选择器找到元素 document.querySelectorAll('<selector>')通过name属性值找到元素 document.getElementsByName('<nameValue>')--><!--通过CSS选择器找到HTML元素 querySelectorAll()--><script>window.onload = function (){ var arr =  document.querySelectorAll("tbody tr");for(var n=0;n<arr.length;n++) {if(n%2==0) {<!--//添加点击事件 addEventListener('<eventName>','<functionName>'),移除事件 removeEventListener('<eventName>')//添加行内样式 style.<attribute>="<attributeValue>"//添加key-value setAttribute("<key>","<value>"),移除使用removeAttribute()-->arr[n].style.background="Black";arr[n].style.color = "White";} else {arr[n].style.background="Red";arr[n].style.color = "White";}}}/*删除tbody中的所有tr*/function deleteEleTbodyTr() {var tbodyNode = document.getElementById("tbody");while(tbodyNode.hasChildNodes()) {  tbodyNode.removeChild(tbodyNode.firstChild);  }  }/*添加演示行*/function addEleTbodyTr() {var tbodyNode = document.getElementById("tbody");var td1 = document.createElement("td");td1.innerText = "演示";var td2 = document.createElement("td");td2.innerText = "掩饰";var td3 = document.createElement("td");td3.innerText = "就是";var td4 = document.createElement("td");td4.innerText = "装饰";var tr = document.createElement("tr");tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tbodyNode.appendChild(tr);}</script></body></html>
阅读全文
0 0