前端---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页面,页面中的每一个元素.属性.文本都被认为是节点.此外, ...
随机推荐
- Saying that Java is nice because it works on every OS is like saying that anal sex is nice because it works on every gender.
Saying that Java is nice because it works on every OS is like saying that anal sex is nice because i ...
- 在CentOS中安装中文支持
执行命令: # yum groupinstall chinese-support 修改配置文件: # vim /etc/sysconfig/i18n LANG="zh_CN.UTF-8&qu ...
- 调用C++动态链接库出现错误
解决方式:将托管 System.String 中的内容复制到非托管内存(Marshal.StringToHGlobalAnsi) class HttpsSend { [DllImport(" ...
- eclipse使用技巧之 //TODO标识
通常有三种方式去表示你的待办: //TODO 待实现 //XXX 勉强可以工作,但是性能差 //FIXME 代码错误,必须修复. 在task窗口可以查找所有TODO. 使用ctrl + K 去单页面定 ...
- 关于request.getParameterMap()的类型转换和数据获取
首先po上一个自己写的转换类. /** * @author Xfiler * @described 将request.getParameterMap()转换为普通的Map的工具方法 * @param ...
- MVC4 +EasyUI 使用TreeGrid 方法
用easyui已经有2年了,换了新环境,要求用mvc开发,所以想把原来的项目直接用mvc重构. 在使用TreeGird的时候出现了问题,发现在转换为treegrid的json 很费劲,一直都是用的ea ...
- 解压版Tomcat配置
解压版Tomcat配置(本例Tomcat6): 一 配置Tomcat 1 下载Tomcat Zip压缩包,解压. 如果增加tomcat的用户名和密码,则修改/conf/tomcat-us ...
- SQL查询树形结构的所有子节点
如下一张表test:id name pid----------- ---------- -----------1 电器 NULL2 家电 13 冰箱 24 洗衣机 25 电脑 16 笔记本 57 平板 ...
- git 命令记录
git log 配置 git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -% ...
- MODBUS-RTU通讯协议简介
MODBUS-RTU通讯协议简介 什么是MODBUS? MODBUS 是MODICON公司最先倡导的一种软的通讯规约,经过大多数公司 的实际应用,逐渐被认可,成为一种标准的通讯规约,只要按照这种规 ...