4.DOM
定义
文档对象模型（Document Object Model）是一种用于HTML和XML文档的编程接口。
查找元素
1.直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
练习：
<div id="i1">床前明月光，疑是地上霜</div> <a>111</a> <a>222</a> <a>333</a>
//获取ID
document.getElementById('i1')
//获取内容
document.getElementById('i1').innerText
//内容重新赋值
document.getElementById('i1').innerText = '举头望明月，低头思故乡'
//获取TagName（'a'）集合
document.getElementsByTagName('a')
//获取集合指定索引元素
document.getElementsByTagName('a')[1]
//对单个元素重新赋值
document.getElementsByTagName('a')[1].innerText = 666
2.间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
练习：
<div> <div>c1Sibling</div> <div>c1</div> </div> <div> <div>c2Sibling</div> <div id="i1">c2</div> </div> <div> <div>c3Sibling</div> <div>c3</div> </div>
//获取ID tag = document.getElementById('i1'); //获取ID的父亲 tag.parentElement <div> <div>c2Sibling</div> <div id="i1">c2</div> </div> //获取父亲的上一个兄弟 tag.parentElement.previousElementSibling <div> <div>c1Sibling</div> <div>c1</div> </div> //获取父亲的上一个兄弟的第一个儿子 tag.parentElement.previousElementSibling.firstElementChild <div>c1Sibling</div>
内容操作
（1）内容
innerText 文本
innerHTML HTML内容(包括元素、注释和文本节点)
value 获取input/select/textarea里面输入的内容
（2）属性
attributes 获取所有标签属性
getAttribute() 获取指定标签属性
setAttribute() 设置指定标签属
removeAttribute() 移除指定标签属
class操作
对所有样式操作
className // 获取所有类名
classList.remove(class) // 删除指定类
classList.add(class) // 添加类
对单个样式操作
obj.style.fontSize='16px'
obj.style.backgroundColor='red'
事件
onmousecover 鼠标移到某元素之上
onmouseout 鼠标从某元素离开
onfocus 元素获得聚焦
onblur 元素失去焦点
实例
1.模态框（添加，全选，取消，反选）
功能：
（1）点击添加 -->弹出框输入内容-->点取消后，弹出框关闭
（2）全选，取消，反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opscity:0.6; } .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="CancelAll()"> <input type="button" value="反选" onclick="ReverseAll()"> <table> <thread> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thread> <tbody id="tb"> <tr> <td> <input type="checkbox"> </td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.3</td> <td>194</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'); var tr_list = tbody.children; for(var i = 0;i < tr_list.length;i += 1){ var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } function CancelAll() { var tbody = document.getElementById('tb'); var tr_list = tbody.children; for(var i = 0;i < tr_list.length;i += 1){ 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 += 1){ //循环所有的tr var current_tr = tr_list[i]; //获取<input type="checkbox"> var checkbox = current_tr.children[0].children[0]; if(checkbox.checked){ checkbox.checked = false; }else{ checkbox.checked = true; } } } </script> </body> </html>
2.后台管理页面布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; } .left{ float: left; } .pg-header{ height: 48px; background-color: #2459a2; color:white; line-height: 48px; } .pg-header .logo{ width:200px; background-color: cadetblue; text-align: center; } .pg-header .user{ margin-right: 60px; padding: 0 20px; color: white; height: 48px; position: relative; } .pg-header .user:hover{ background-color: #204982; } .pg-header .user .a img{ height: 40px; width: 40px; margin-top: 4px; border-radius: 50%; } .pg-header .user .b{ z-index: 20; position: absolute; top: 48px; right: 44px; background-color: white; color: black; width: 80px; display: none; } .pg-header .user:hover .b{ display: block; } .pg-header .user .b a{ display: block; } .right{ float:right } .pg-content .menu{ position:fixed; top:48px; left: 0; bottom: 0; right: 0; width: 200px; background-color: #dddddd; } .pg-content .content{ position:fixed; top:48px; left: 200px; bottom: 0; right: 0; z-index: 9; background-color: purple; overflow: auto; } </style> </head> <body> <div class="pg-header"> <div class="logo left">logo</div> <div class="user right"> <a class="a img">登陆</a> <div class="b"> <a>我的资料</a> <a>注销</a> </div> </div> </div> <div class="pg-content"> <div class="menu left">目录</div> <div class="content left">内容</div> </div> </body> </html>
3.鼠标焦点
onfocus 获得焦点
onblur 失去焦点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 600px;margin: 0 auto;"> <input id="i1" onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字" /> </div> <script> function Focus() { var tag = document.getElementById('i1'); var val = tag.value; if(val == "请输入关键字"){ tag.value = "" } } function Blur() { var tag = document.getElementById('i1'); var val = tag.value; if(val.length == 0){ tag.value = "请输入关键字" } } </script> </body> </html>
4.创建标签
点“添加” 可以创建text输入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" onclick="xxx()" value="添加"> <div id="i1"> <p><input type="text"></p> </div> <script> function xxx() { //创建标签 //将标签添加到i1里面 var tag=document.createElement("input"); //添加属性 tag.setAttribute("type","text"); //设置样式 tag.style.fontSize="16px"; tag.style.border="1px solid red"; var p=document.createElement("p"); //把tag放到p里面 p.append(tag); document.getElementById('i1').appendChild(p) } </script> </body> </html>
5.鼠标高亮显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" width="300px"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> <script> var myTrs=document.getElementsByTagName('tr'); for(var i=0; i < myTrs.length; i++){ myTrs[i].onmousemove = function(){ this.style.backgroundColor='red'; } myTrs[i].onmouseout = function(){ this.style.backgroundColor="" } } </script> </body> </html>
posted on 2018-01-21 17:32 zhang_derek 阅读(1295) 评论(0) 编辑 收藏 举报
