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>
4.DOM的更多相关文章
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
- 通俗易懂的来讲讲DOM
DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...
- HTML DOM 介绍
本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...
- HTML DOM 对象
本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...
- 重撸js_2_基础dom操作
1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...
- 虚拟dom与diff算法 分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- jQuery学习之路（2）-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...
随机推荐
- SQL ServerAlways Encrypted Data
SQL Server 提供了一个加密表上字段的功能, Encrypt Columns , 比如身份证号码,手机号码,银行账户等等敏感信息.
- 数组遍历for forEach for..in for..of
最开始接触的遍历for 通过下标获取数组每一项的值 ,,]; ;i<num.length;i++) { console.log(num[i]) } /*打印2 5 7*/ forEach遍历数组 ...
- PBRT笔记(14)——光线传播2：体积渲染
传输公式 传输方程是控制光线在吸收.发射和散射辐射的介质中的行为的基本方程.它解释了第11章中描述的所有体积散射过程--吸收.发射和内.外散射.并给出了一个描述环境中辐射分布的方程.光传输方程实际上是 ...
- 主流图库对比以及JanusGraph入门
1.Overall Comparison Name Neo4j JanusGraph Giraph Jena 1.Compute Framework Yes Yes Yes 2.External Co ...
- Spark环境搭建（六）-----------sprk源码编译
想要搭建自己的Hadoop和spark集群,尤其是在生产环境中,下载官网提供的安装包远远不够的,必须要自己源码编译spark才行. 环境准备: 1,Maven环境搭建,版本Apache Maven 3 ...
- APM飞控学习之路的资料
飞控学习之路的资料 https://blog.csdn.net/u010682510 博客资料 https://blog.csdn.net/qq_26573899/article/category/7 ...
- 简繁体转化处理 opencc 安装【centos 7】
代码 #准备工作 yum install cmake yum install git #下载代码 git clone https://github.com/BYVoid/OpenCC #安装文档生成 ...
- hive动态分区和混合分区
各位看官,今天我们来讨论下再Hive中的动态分区和混合分区方面的一些知识点以及相关的一些问题. 前面我们已经讲过管理表和外部表的一般分区的一些知识点,对于需要对表创建很多的分区,那么用户就需要些很多的 ...
- VB洗牌算法产生随机数组
算法图示: 运行效果: 详细代码: Option Explicit '洗16张牌(0-15),方便用十六进制显示 Dim Card() As Long Private Sub 洗牌() Dim i&a ...
- c# Winform Invoke 的用法
在Winform中线程更新UI线程 例如:Form中有一个DataGridView,我们使用Thread查询后,更新这个表格,如果在Thread中直接更新会报错. Thread th = new Th ...