前端---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页面,页面中的每一个元素.属性.文本都被认为是节点.此外, ...
随机推荐
- C# FileSystemWatcher监听文件事件
现有一个需求如下:监控某个目录中的文件修改,创建,删除等信息,并记录下来. 这里用到FileSystemWatcher类.由于考虑到文件的写入量会很频率,所以考虑先将监听到的消息记录到内存中. 监听部 ...
- C++ 资源大全
http://www.uml.org.cn/c++/201411145.asp http://ezlippi.com/blog/2014/12/c-open-project.html <C++ ...
- git如何设置账号密码
查看已设配置 git config --list 修改GIT全局用户名 git config --global user.name [username] 修改GIT全局邮箱 git config -- ...
- 【linux】之相关命令
防火墙 ) 重启后生效 开启: chkconfig iptables on 关闭: chkconfig iptables off ) 即时生效,重启后失效 开启: service iptables s ...
- python 中__name__ = '__main__' 的作用
有句话经典的概括了这段代码的意义: "Make a script both importable and executable" 意思就是说让你写的脚本模块既可以导入到别的模块中用 ...
- Python 网络编程（一）
Python 网络编程 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. ...
- 在Eclipse中使用JUnit4进行单元测试（初级篇）
首先,我们来一个傻瓜式速成教程,不要问为什么,Follow Me,先来体验一下单元测试的快感! 首先新建一个项目叫JUnit_Test,我们编写一个Calculator类,这是一个能够简单实现加减乘除 ...
- 键盘键与虚拟键码对照表+delphi虚拟键码对应关键
键盘键与虚拟键码对照表 字母和数字键 数字小键盘的键 功能键 其它键 键 键码 键 键码 键 键码 键 键码 A 65 0 96 F1 112 Backspace 8 B 66 1 97 F2 113 ...
- css3 flex盒子布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 创建javascript对象的几种方式
ECMAScript提供的对象有:String.Date.Array.Boolean.Math.Number.RegExp.Global 程序中需要用到很多自定义的js对象 1.直接创建 var ob ...