前端---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页面,页面中的每一个元素.属性.文本都被认为是节点.此外, ...
随机推荐
- 调试腾讯微博 win8 版 共享失败的问题
我是社交控,喜欢分享内容.分享到 腾讯微博时总失败,心想不能就这么算了,要看看异常的细节. 在VS 2012里,我选择 Debug > Debug Installed App Package, ...
- CSS 相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
- jquery中ajax在firefox浏览器下“object XMLDocument”返回结果的解决办法
asp.net中借助jquery的ajax处理功能,使用起来很方便.但是在firefox下获得的data报错object XMLDocument.这是因为默认的情况下把datatype用html来解析 ...
- VR定制开发、AR定制开发（长年承接虚拟现实、增强现实应用、VR游戏定制开发，北京公司，可签合同）
Cardboard SDK for Unity的使用 上一篇文章作为系列的开篇,主要是讲了一些虚拟现实的技术和原理,本篇就会带领大家去看一看谷歌的Cardboard SDK for Unity,虽然目 ...
- Windows Server 2012 克隆修改SID
更改SID后蓝屏\黑屏: 环境:Windows Server 2012 R2 目的:克隆出来的系统的SID都是一样,所以想修改各个系统的SID号 现象:克隆出来的系统的SID都是一样,所以想修改各个系 ...
- nginx响应时间监控脚本
最近我们服务的使用方总是反应说我们接口超时,于是做了一个监控脚本,统计最近五分钟的响应情况,并对异常情况发送邮件报警. #!/bin/bash function define(){ ori_log_p ...
- Linux 如何解决 xhost: unable to open display ""
[root@host02 ~]# vncservice You will require a password to access your desktops. Password: Verify: x ...
- 服务器ssh登录提示“Permission denied, please try
原因:不用怀疑,一般情况下,就是你密码输入错误了. 解决:找到正确的密码输入. 当然,也有可能是下面的情况: 在Windows中使用ssh客户端连接,提示"ssh服务器拒绝了密码,请再试一次 ...
- MD5 32位 小写加密和大写加密
/** * MD5加密方法 */ public static String MD5(String str) { MessageDigest md5 = null; try { md5 = Messag ...
- Visual Studio 2013 添加新项缺失[ADO.NET 实体数据模型]解决方法
解决方法如下: 1).到 Visual Studio 2013 的安装包的目录:/packages/EFTools 中寻找如下文件 EFTools.msi; EFTools.cab,如图 将它们复制自 ...