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 = 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>
20.DOM的更多相关文章
- DOM Scripting -- Web Design with JavaScript and the Document Object Model 第2版 读书笔记
1. childNodes nodeValue <p id="p1">hello p!</p> alert(document.getElementById ...
- js拖拽效果实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 02.lib-v1.js
/* Date: 2014-07-29 4:06:07 [PM] */ function StringBuilder() { this.strings = new Array, this.length ...
- dispatchEvent相关内容
意思就是:手动触发事件. 我的理解是:类似于jquery中的trigger方法,可以在点击某个dom的时候,触发另一个dom的事件,下面一个我自己尝试的例子: <!DOCTYPE html> ...
- GIS可视化——属性图
一.简介 SuperMap iClient for JavaScript 提供了UTFGrid图层(属性图),用于客户端属性信息的快速交互. UTFGrid图层从UTFGrid切片数据源读取数据,其本 ...
- three.js实现球体地球2018年全球GDP前十国家标记
概况如下: 1.SphereGeometry实现自转的地球: 2.THREE.Math.degToRad,Math.sin,Math.cos实现地图经纬度与三位坐标x,y,z之间的转换: 3.Imag ...
- three.js实现球体地球城市模拟迁徙
概况如下:1.SphereGeometry实现自转的地球:2.THREE.ImageUtils.loadTexture加载地图贴图材质:3.THREE.Math.degToRad,Math.sin,M ...
- three.js模拟实现太阳系行星体系
概况如下: 1.SphereGeometry实现自转的太阳: 2.RingGeometry实现太阳系星系的公转轨道: 3.ImageUtils加载球体和各行星贴图: 4.canvas中createRa ...
- three.js实现土星绕太阳体系
概况如下: 1.SphereGeometry实现自转的太阳,土星: 2.RingGeometry实现土星公转轨道: 3.ImageUtils加载球体贴图: 4.canvas中createRadialG ...
随机推荐
- C# 快速高效率复制对象的几种方式
http://www.cnblogs.com/emrys5/p/expression_trans_model.html 这篇较具体. 本文基于上文略加改动,暂记 using Newtonsoft.Js ...
- bzoj 2217 [Poi2011]Lollipop 乱搞 贪心
2217: [Poi2011]Lollipop Time Limit: 15 Sec Memory Limit: 64 MBSec Special JudgeSubmit: 383 Solved ...
- Duilib第一步(III)-知识进阶
核心模块 CWindowWnd:窗口对象管理父类 创建窗口. 窗口消息过程处理. 提供窗口子类化.超类化接口. CDialogBuilder:空间布局类 解析XML界面布局文件,构建控件树 创建控件对 ...
- HDU - 1846 Brave Game 巴什博弈
思路:直接判断n是不是m+1的倍数,若是先手则输,否则赢. AC代码 #include <cstdio> #include <cmath> #include <algor ...
- rem是如何自适应的
原文链接:http://caibaojian.com/web-app-rem.html 摘要:rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算 ...
- SpringCloud入门1-服务注册与发现(Eureka)
前言 Oracle转让Java,各种动态语言的曝光率上升,Java工程师的未来在哪里?我觉得Spring Cloud让未来有无限可能.拖了半年之久的Spring Cloud学习就从今天开始了.中文教材 ...
- linux下在用户空间访问I/O端口的ioperm和iopl函数
1.ioperm函数 功能描述:为调用进程设置I/O端口访问权能.ioperm的使用需要具有超级用户的权限,只有低端的[0-0x3ff] I/O端口可被设置,要想指定更多端口的权能,可使用i ...
- JFFS2 文件系统及新特性介绍
简介: JFFS2 是一个开放源码的项目(www.infradead.org). 它是在闪存上使用非常广泛的读/写文件系统,在嵌入式系统中被普遍的应用.这篇文章首先分析了在闪存上使用 JFFS2 的必 ...
- Linux显示一个二进制文件或可执行文件的完整路径
Linux显示一个二进制文件或可执行文件的完整路径 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ which halt /sbin/halt
- python装饰器理解
1.装饰器的作用 在不修改被装饰对象的源代码以及调用方式的前提下为被装饰对象添加新功能 原则: 1.不修改被装饰对象的源代码2.不修改被装饰对象的调用方式 目标: 为被装饰对象添加新功能 2.装饰器的 ...