前端---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页面,页面中的每一个元素.属性.文本都被认为是节点.此外, ...
随机推荐
- 处理大并发之五 使用libevent利器bufferevent
转自:http://blog.csdn.net/feitianxuxue/article/details/9386843 处理大并发之五 使用libevent利器bufferevent 首先来翻译一段 ...
- Visual Studio Team System 2008 Team Suite（90 天试用版）
安装完成后,在“控制面板”中启动“添加删除程序”,选中Vs2008,点击“更改.删除”,输入序列号:PYHYP-WXB3B-B2CCM-V9DX9-VDY8T
- Lua学习----Lua基础数据类型
前言 Lua有6中数据类型,分别是nil(空).boolean(布尔).number(数字).string(字符).table(表).function(函数) 在Lua中可以使用type函数来返回一个 ...
- Spark Shuffle数据处理过程与部分调优（源码阅读七）
shuffle...相当重要,为什么咩,因为shuffle的性能优劣直接决定了整个计算引擎的性能和吞吐量.相比于Hadoop的MapReduce,可以看到Spark提供多种计算结果处理方式,对shuf ...
- 深入理解Bootstrap笔记
框架介绍 1.框架简介 2.CSS基本语法 3.JavaScript基本语法 4.Bootstrap整体架构 5.12栅格系统 6.CSS组件架构设计思想 7.JavaScript插件架构 CSS布局 ...
- Oracle 游标示例，带异常处理
Oracle游标示例一则,带异常处理. DECLARE CURSOR c_dl IS SELECT ID, NSRSBH, WSPZXH, ZXYY_DM, HZRQ, SWJG_DM, GXSJ F ...
- 解决 umount 时出现的 "Device is busy"
1.umount, 老是提示:device is busy, 服务又不能停止的. 可以用"umount -fl"解决! 2.mount的基本用法是? 格式:mount [-参数] ...
- android的四层体系结构，基于mvc三层结构浅析
从多方面理解Android体系结构 1.以分层的方式来看Android 安卓体系结构分为四层. 首先看一下官方关于Android体系结构的图: 1).Linux Kernel:负责硬件的驱动程序.网络 ...
- （dp）343. Integer Break
Given a positive integer n, break it into the sum of at least two positive integers and maximize the ...
- Access自动编号的初始值设置及重置编号
项目上需要在Access数据库,发现自动编号的列无法设置初始值和步长,但是可以使用SQL语句来设置它. 方法如下: ALTER TABLE tableName ALTER COLUMN ID COUN ...