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操作 看 ...
随机推荐
- youtube去广告
https://www.digitbin.com/youtube-ads-block/ 1. OGYouTube | Mod AdBlocker YouTube OGYouTube App is a ...
- Core在类中注入
private readonly IHttpClientFactory _iHttpClientFactory; public static NetHelper Get = new NetHelper ...
- apache与nginx原理
参考: https://blog.csdn.net/yf3585595511/article/details/54933646
- SVM python代码自实践
import numpy as np import matplotlib.pyplot as plt #创造数据 x = [-2,6,-2,7,-3,3,0,8,1,10,2,12,2,5,3,6,4 ...
- 期末Java Web大作业----简易的学生管理系统
学生信息管理系统(大作业) 2018-12-21:此文章已在我的网站更新,添加视图介绍等信息,源码请移步下载https://www.jeson.xin/javaweb-sims.html PS:首先不 ...
- scrapy递归解析和post请求
递归解析 递归爬取解析多页页面数据 每一个页面对应一个url,则scrapy工程需要对每一个页码对应的url依次发起请求,然后通过对应的解析方法进行作者和段子内容的解析. 实现方案: 1.将每一个页码 ...
- 爬虫之selenium和PhantomJS
---恢复内容开始--- selenium selenium是什么? 是Python的一个第三方库,对外提供的接口可以操作浏览器,然后让浏览器完成自动化的操作 环境搭建 .安装: pip instal ...
- rhel 7安装Mysql
rhel7安装mysql服务 环境: 1)rhel 7虚拟机 2)配置完163网络yum源,并且保证网络通畅 安装过程: 1) 安装Mysql和Mysql-devel 命令:yum install m ...
- Python入门经典. 以解决计算问题为导向的Python编程实践
Python入门经典. 以解决计算问题为导向的Python编程实践(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1juLsew8UiOErRheQPOuTaw 提取 ...
- 关于VB里判断逻辑的说明
如上图,当进行连续判断的时候,即使第一个已经不符合条件了,后面的依然会计算.这点一定要记住,除非你所有的函数都有必要执行,否则会导致效率降低. 减代码不一定能提高效率,对于IIF和连续判断写法,貌似很 ...