HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
一：HTML DOM 树
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
-
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- J avaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
二：查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
-
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
1）找到标签
获取单个元素 document.getElementById('i1')
获取多个元素（列表）document.getElementsByTagName('div')
获取多个元素（列表）document.getElementsByClassName('c1')
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
2)间接
tag=document.getElementById("l1")
parentElement //父节点标签元素
children //所有子节点标签
firstElementChild //第一个子标签元素
lastElementChild //最后一个子标签元素
nextElementSibling //下一个兄弟标签元素
previousElementSibling //上一个兄弟标签元素
三：标签操作
1）innerText
获取标签中的文本内容
标签.innerText
对标签内容文本进行修改
标签.innerText="内容"
2）className
tag.className =>直接整体做操作,获取所有类里内容，字符串
tag.classList 获取所有类里内容，返回列表
tag.classList.add("样式名") 添加指定样式
tag.classList.remove("样式名") 删除指定样式
3)checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked = true
PS:
<div onclick='func();'>点我</div>
<script>
function func(){
}
</script>
四：示例
1)模拟之对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; //不显示 } .c1{ position: fixed; //固定全屏覆盖 top: 0; right: 0; bottom: 0; left: 0; background-color: black; opacity: 0.6; //透明度 z-index: 9; //权重 } .c2{ position: fixed; //固定剧中 left: 50%; top: 50%; width: 400px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: white; z-index: 10; } </style> </head> <body> <div> <p> <input type="button" value="添加" onclick="show()"/> <table style="border-color: chocolate;border: 3px;"> <thead> <tr> <th>主机</th> <th>端口</th> </tr> </thead> <tbody> <tr> <td>1.1.1.1</td> <td>191</td> </tr> <tr> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td>1.1.1.1</td> <td>192</td> </tr> </tbody> </table> </p> </div> <!-- 遮罩层开始--> <div id="c1" class="c1 hide"></div> <!-- 遮罩层结束--> <!-- 对话框开始--> <div id="c2" class="c2 hide"> <label for="name">用户名</label> <input id="name" type="text" name="name"> <br/> <label for="password">密码</label> <input id="password" type="password" name="name"> <br> <input type="reset" value="取消" onclick="showCancel()"> <input type="reset" value="添加"> </div> <!-- 对话框结束--> <script> function show(){ document.getElementById("c1").classList.remove("hide") document.getElementById("c2").classList.remove("hide") } function showCancel(){ document.getElementById("c1").classList.add("hide") document.getElementById("c2").classList.add("hide") } </script> </body> </html>
2)示例之表格全选取消反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowModel();" /> <input type="button" value="全选" onclick="ChooseAll();" /> <input type="button" value="取消" onclick="CancleAll();" /> <input type="button" value="反选" onclick="ReverseAll();" /> <table> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td><input type="checkbox"f id="test" /></td> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.3</td> <td>193</td> </tr> </tbody> </table> </div> <!-- 遮罩层开始 --> <div id="i1" class="c1 hide"></div> <!-- 遮罩层结束 --> <!-- 弹出框开始 --> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <p> <input type="button" value="取消" onclick="HideModel();"/> <input type="button" value="确定"/> </p> </div> <!-- 弹出框结束 --> <script> function ShowModel(){ document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function HideModel(){ document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } function ChooseAll(){ var tbody = document.getElementById('tb'); // 获取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环所有的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } function CancleAll(){ var tbody = document.getElementById('tb'); // 获取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环所有的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = false; } } function ReverseAll(){ var tbody = document.getElementById('tb'); // 获取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环所有的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}} </script> </body> </html>
3）示例之-左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .item{ width: 48px; } .header{ background-color: #ff18a4; text-align: center; } .content{ text-align: center; } </style> </head> <body> <div class="menu"> <div class="item"> <div id="header1" class="header" onclick="showMenu('header1');">菜单1</div> <div class="contents hide"> <div class="content">内容1</div> <div class="content">内容2</div> <div class="content">内容3</div> </div> </div> <div class="item"> <div id="header2" class="header" onclick="showMenu('header2');">菜单2</div> <div class="contents hide"> <div class="content">内容1</div> <div class="content">内容2</div> <div class="content">内容3</div> </div> </div> <div class="item"> <div id="header3" class="header" onclick="showMenu('header3');">菜单3</div> <div class="contents hide"> <div class="content">内容1</div> <div class="content">内容2</div> <div class="content">内容3</div> </div> </div> <div class="item"> <div id="header4" class="header" onclick="showMenu('header4');">菜单4</div> <div class="contents hide"> <div class="content">内容1</div> <div class="content">内容2</div> <div class="content">内容3</div> </div> </div> </div> <script> function showMenu(headern){ //传递ID参数 var header_id=document.getElementById(headern) //获取header元素 var menu=header_id.parentElement.parentElement //获取父级的父级的元素menu var menu_item=menu.children //获取menu下面的所有子元素 for(var i=0 ;i<menu_item.length;i++){ menu_item[i].children[1].classList.add("hide") //获取contents元素，并增加hide类 } header_id.nextElementSibling.classList.remove("hide") //去除header元素兄弟，删除hide类 } </script> </body> </html>