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 ...
随机推荐
- [记录]CentOS搭建SVN服务器(主从同步)
CentOS搭建SVN服务器(主从同步)1.安装步骤如下: 1)安装: #yum install subversion 2)查看安装位置: #rpm -ql subversion 3)查看版本: #/ ...
- Linux进程作业常用命令
从鸟哥的私房菜书里摘抄的部分,方便查阅 一.作业管理 1.直接将命令放到后台执行的& 如想将/etc 备份为/tmp/ect.tar.gz时不想等待,可以这样做: ...
- 03 JVM的垃圾回收机制
1.前言 理解JVM的垃圾回收机制(简称GC)有什么好处呢?作为一名软件开发者,满足自己的好奇心将是一个很好的理由,不过更重要的是,理解GC工作机制可以帮助你写出更好的Java程序. 在学习GC前,你 ...
- 理解Activity.runOnUiThread()
这是一篇译文(中英对照),原文链接:Understanding Activity.runOnUiThread() When developing Android applications we alw ...
- 如何使用 OpenCV 打开摄像头获取图像数据？
OpenCV 如何打开摄像头获取图像数据? 代码运行环境:Qt 5.9.1 msvc2015 32bit OpenCV 3.3.0 #include "include/opencv2/ope ...
- Python实现二分查找
老生常谈的算法了. #!/usr/bin/python # -*- coding:utf-8 -*- # Filename: demo.py # 用python实现二分查找 def binarySea ...
- asp.net程序发布详解
本文转载自Alan_beijing的博客ASP.NET 程序发布详细过程.内容进行了部分更改. ASP.NET网站的发布,无论是初学者还是高手,在程序的发布过程中或多或少会存在一些问题,譬如VS发布A ...
- 3.3.5 DMA写时发生Cache命中的优化
在许多高性能处理器中,还提出了一些新的概念,以加速外设到存储器的DMA写过程.如Freescale的I/O Stashing和Intel的IOAT技术. 如图3?8所示,当设备进行存储器写时,如果可以 ...
- 笔记+R︱风控模型中变量粗筛（随机森林party包）+细筛（woe包）
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 本内容来源于CDA-DSC课程内容,原内容为& ...
- JAVA中线程同步方法
JAVA中线程同步方法 1 wait方法: 该方法属于Object的方法,wait方法的作用是使得当前调用wait方法所在部分(代码块)的线程停止执行,并释放当前获得的调用wait所 ...