前端---DOM
一、介绍：
http://www.cnblogs.com/wupeiqi/articles/5643298.html
什么是DOM？
DOM字面意思是文档对象模型，DOM将网页内的元素与内容呈现为一个清晰、易读的树状模型，DOM是浏览器提供的API接口，是用来给JavaScript操作document对象的
二、DOM的功能可以分为两部分：(注意DOM中的所有方法，首字母都是小写，后面每个单词开头都是大写)
1，找到一个标签，包括直接查找和间接查找
直接查找：
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合间接查找：
parentNode // 父节点
childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素2，找到标签后，对其进行操作，包括修改值、修改class、修改样式、修改属性
修改值：innerText、outerText、innerHTML、outerHTML、value
修改class：className
classList.remove(cls) //去掉class
classList.add(cls) //添加class
修改样式：tag=document.getElementById('i1') ;
tag.style.color='red';
tag.style.fontSize='40px'; //在标签style属性中，应该写作font-size ，但是在DOM中写作fontSize
tag.style.backGroundColor='red';
修改属性：tag=document.getElementById('i1') ;
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
removeAttribute(key) //删除标签属性
三、事件
某个标签可以绑定事件。
书写方式如下，和标签属性类似，只不过事件的值是一个javascript函数，
可以这样理解，style属性用于直接添加css样式，class属性引入了style标签中的css样式，事件则引入了javascript
<iuput type="submit" onclick="check()"/>
下面是常见事件：
示例1：搜索框
<body>
<input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();" />
<!--onfocus属性表示当该标签获取焦点时的动作，onblur属性表示当该标签失去焦点时的动作-->
<script>
function Focus(){
var tag=document.getElementById('i1'); //通过id获取标签
if(tag.value=="请输入关键字"){ //对标签值进行判断
tag.value=""; //清空值
}
}
function Blur(){
var tag=document.getElementById('i1'); //通过id获取标签
var val=tag.value; //获取标签值
if(val.trim().length==0){ //如果去掉空格后长度为0
tag.value="请输入关键字"; //给标签值赋值
}
}
</script>
</body>
示例2：模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
.shade{ /*遮罩层*/
position: fixed;
top: 0;
left:0;
bottom:0;
right:0;
background-color: red;
opacity: 0.6;
z-index: 100;
}
.model{ /*模态框*/
width: 200px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
background-color: white;
z-index: 101;
}
</style>
</head>
<body>
<div style="background-color: #dddddd;height: 2000px;">
<input type="button" value="按钮" onclick="ShowModel();"/> <!--点击时执行ShowModel函数-->
</div>
<div id="i1" class="shade hide"></div> <!--默认是隐藏的-->
<div id="i2" class="model hide"> <!--默认是隐藏的-->
<a href="javascript:void(0);" onclick="HideModel();">取消</a> <!--点击时执行HideModel函数-->
</div>
<script>
function ShowModel(){
var tag1=document.getElementById("i1"); //获取标签
var tag2=document.getElementById("i2");
tag1.classList.remove("hide"); //去掉hide类型
tag2.classList.remove("hide");
}
function HideModel(){
var tag1=document.getElementById("i1"); //获取标签
var tag2=document.getElementById("i2");
tag1.classList.add("hide"); //添加hide类型
tag2.classList.add("hide");
}
</script>
</body>
</html>
示例3：全选反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll();"/>
<input type="button" value="取消" onclick="CancleAll();"/>
<input type="button" value="反选" onclick="ReverseAll();"/>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>用户</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>33</td>
<td>33</td>
</tr>
</tbody>
</table>
<script>
function CheckAll(){
var tb=document.getElementById('tb'); //获取到tbody标签
var trs=tb.children; //获取到tr标签数组
for(i=0;i<trs.length;i++){ //循环每个tr标签
var current_trs=trs[i];
var ck=current_trs.firstElementChild.firstElementChild; //获取td标签中的input标签
ck.checked=true; //选中
// ck.setAttribute("checked",'checked')
}
}
function CancleAll(){
var tb=document.getElementById('tb');
var trs=tb.children;
for(i=0;i<trs.length;i++){
var current_trs=trs[i];
var ck=current_trs.firstElementChild.firstElementChild;
ck.checked=false; //取消选中
// ck.removeAttribute('checked');
}
}
function ReverseAll(){
var tb=document.getElementById('tb');
var trs=tb.children;
for(i=0;i<trs.length;i++){
var current_trs=trs[i];
var ck=current_trs.firstElementChild.firstElementChild;
if(ck.checked){
ck.checked=false; //如果是选中的取消
// ck.removeAttribute('checked');
}
else{
ck.checked=true; //如果未选中则选中
// ck.setAttribute('checked','checked');
}
}
}
</script>
</body>
</html>
前端---DOM的更多相关文章
- Python之Web前端Dom, jQuery
Python之Web前端: Dom jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...
- 前端dom元素的操作优化建议
参考自:http://blog.csdn.net/xuexiaodong009/article/details/51810252 其实在web开发中,单纯因为js导致性能问题的很少,主要都是因为DOM ...
- python学习之路前端-Dom
Dom简介 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为 ...
- web前端 DOM 详解
先来点概念 文档对象模型(DOM)是一个独立于语言的,使用 XML 和 HTML 文档操作的应用程序接口(API). 在浏览器中,主要与 HTML 文档打交道,在网页应用中检索 XML 文档也很常见. ...
- 前端——DOM
什么是DOM? DOM是W3C(万维网联盟)的标准,是Document Object Model(文档对象模型)的缩写,它定义了访问HTML和XML文档的标准: “W3C文档对象模型(DOM)是中立于 ...
- 前端 Dom 直接选择器
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- 前端DOM知识点
DOM即文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.DOM把网页和脚本 ...
- 前端dom操作竟然使得http请求的时间延长了
最近在项目中遇到了一个奇怪的问题:在google浏览器的调试窗口network下看到一个请求的时间一直是2s多,但是当我把这个请求单独拿出来执行的时候发现根本用不了2s,100多毫秒就完成了.最后再不 ...
- 关于前端Dom的总结
简介 DOM (Document Object Model) 文档对象模型 DOM思想使用节点树(node tree)的概念来描述一个HTML页面,页面中的每一个元素.属性.文本都被认为是节点.此外, ...
随机推荐
- Javascript模式（第一章简介）------读书笔记
一:模式 模式是一个通用问题的解决方案,可以提供一个更好的实践经验.有用的抽象化表示和解决一类问题的模板. 本书主要讨论如下三种类型的模式 1 设计模式:可复用面向对象软件的基础,包括singleto ...
- NC57银行档案和客商银行账号为建行04 UPDATE
第二步 银行档案 update bd_bankdoc set bankdoccode='04N'|| bankdoccode , pk_banktype='0001ZZ1000000001OCUD' ...
- Android学习笔记（十）
Android控件——ListView ListView允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内,同时 屏幕上原有的数据则会滚动出屏幕. 1.ListView的简单用法 新建一个Lis ...
- fontcreator制作iconfont(包含两个教程)
第一步 在AI中画好矢量图,或者是在PS中将纯色的图片存成PNG格式,最好是放大很多倍的纯色图片.因为导入到fontcreator中会显得很小,如果不是矢量,图片拉大后就会有锯齿状. 第二步 选中AI ...
- VMware下安装Linux系统，ORACLE软件，DBCA建库
操作系统安装 在vmware下安装Linux (OEL5.6),用于数据库服务器 1.打开vmware,选择"创建新的虚拟机" 2.选择自定义安装 3.选择虚拟 ...
- windows下CMake使用图文手册 Part 4
例子4:链接静态库(.lib) 例子3里面我们构建了date.lib, 这个例子里我们调用这个库. 前提: date.h的头文件在 E:\Playground\CMakeExamples\DateLi ...
- 大规模IP地址黑名单高性能查询实现
嗯……前阵子接了个活儿,需要做一个基于IP地址黑名单的分流网关.刚接到的时候心想iptables不就行了么,没想到一看客户给的IP黑名单规模……我擦……上亿个…… 黑名单到了这个规模,就不得不考虑下优 ...
- （推荐）WPF动画教程
无意间发现博主的文章,记录推荐一下. http://www.cnblogs.com/alamiye010/archive/2009/06/17/1505346.html http://www.cnbl ...
- Druid 基础使用-操作篇（Imply ）
一.Imply Druid 原生的配置较麻烦,在上一篇单机版安装中有所涉及 Imply 基于Druid 进行了一些组件的开发,提供开源社区版本和商业版,简化了部署,开发了一些应用.https:// ...
- SQL Server备份脚本
declare @bakfile varchar(30), @bakfilediff varchar(30),@pathfull varchar(50),@pathdiff varchar(50)se ...