20.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 = 6662.间接查找
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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-01-21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
