JavaScript DOM 对象深入了解

什么叫DOM，DOM是文档对象模型(document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。单纯的Javascript要结合DOM才能做DHTML编程，才能做出漂亮的效果、应用于WEB。这点几乎与其它的语言无异，正如C/C++需要库支持是一样的道理。否则就是单纯的在语法上做研究了。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是Javascript语言规范里的规定的核心内容。

查找元素

1、直接查找

1>document.getElementById('id')

 
 不帅
 
 
 

显示效果，当我们打开IE的时候不帅就会被修改为很帅

2>getElementsByTagName_r(name)

 
 不帅
 
 
 

其显示效果一样

3>document.getElementsByClassName

 
 不帅
 
 
 

2、间接查找

有了W3C DOM，就能编写简单的跨浏览器脚本，从而充分利用XML的强大功能和灵活性，将XML作为浏览器和服务器之间的通信介质。

操作元素

1、动态创建内容时所用的W3C DOM属性和方法

2、标签内容

innerText  获取标签文本内容
innerHTML  获取HTML内容
value   获取值，即form提交表单的值

即实例如下：

1111
2222

3、属性

attributes     // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)    // 获取指定标签属性

通过自定义属性可以做一个全选，反选，取消选择的案例，代码如下：

 
 



 
 
 


 

 
篮球
 
足球
 
排球
 





全选、反选、取消案例

注：onclick是属于点击事件，后面会提到

4、class操作

className   // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls)  // 添加类

这个东西的用处很大，比如京东里面，当我们鼠标放到全部商品的时候，下面就出现好多商品，其商品是属于隐藏的，触发事件以后他才显示出来，其中间的操作就是定义了一个css隐藏属性，鼠标放上去后，移除CSS隐藏属性；鼠标移走又把隐藏属性给添加上去。

 
 
 
 .hide{
  display: none;
 }
 



放这上面有东西出来，不放东西又消失
张岩林好帅



来个案例醒醒脑

5、标签操作

我们可以通过dom创建标签，添加到指定位置，下面给大家举两种方法来操作标签

// 方式一
var zhang = "";
xxx.insertAdjacentHTML("beforeEnd",zhang);
xxx.insertAdjacentElement('afterBegin',document.createElement('a'))
 
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
 
// 方式二
var tag = document.createElement('div')
xxx.appendChild(tag)  //往后追加一个div元素
xxx.insertBefore(tag,xxx[1]) //插到指定位置，可根据索引

 
 


 
 
  
  
 
 
  

  
alex
  
eric
  
 
 
 


添加标签操作案例

6、样式操作

张岩林很帅

效果如下：

来个案例吧，光看知识点多没劲，我们经常会看到输入框里面有那种颜色比较暗的字体，提示你让你输入东西，当你点进去的时候他就消失了，很神奇的操作，他就是通过dom来实现的，废话不多说直接撸码

 
 
 
 .bb{
  color: #9a9a9a;
 }
 .aa{
  color: black;
 }
 


 
 


input输入框提示

7、位置操作

总文档高度
document.documentElement.offsetHeight
 
当前文档占屏幕高度
document.documentElement.clientHeight
 
自身高度
tag.offsetHeight
 
距离上级定位高度
tag.offsetTop
 
父定位标签
tag.offsetParent
 
滚动高度
tag.scrollTop

看到这些大家有没有想到网页右下角有个返回顶部，一点就返回到上面了，对没错就是计算这些高度；还有当你鼠标往下拉的时候，左边菜单栏相对应的样式都会变。

 
 



 body{
 margin: 0px;
 }
 img {
 border: 0;
 }
 ul{
 padding: 0;
 margin: 0;
 list-style: none;
 }
 h1{
 padding: 0;
 margin: 0;
 }
 .clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
 }

 .wrap{
 width: 980px;
 margin: 0 auto;
 }

 .pg-header{
 background-color: #303a40;
 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
 box-shadow: 0 2px 5px rgba(0,0,0,.2);
 }
 .pg-header .logo{
 float: left;
 padding:5px 10px 5px 0px;
 }
 .pg-header .logo img{
 vertical-align: middle;
 width: 110px;
 height: 40px;

 }
 .pg-header .nav{
 line-height: 50px;
 }
 .pg-header .nav ul li{
 float: left;
 }
 .pg-header .nav ul li a{
 display: block;
 color: #ccc;
 padding: 0 20px;
 text-decoration: none;
 font-size: 14px;
 }
 .pg-header .nav ul li a:hover{
 color: #fff;
 background-color: #425a66;
 }
 .pg-body{

 }
 .pg-body .catalog{
 position: absolute;
 top:60px;
 width: 200px;
 background-color: #fafafa;
 bottom: 0px;
 }
 .pg-body .catalog.fixed{
 position: fixed;
 top:10px;
 }

 .pg-body .catalog .catalog-item.active{
 color: #fff;
 background-color: #425a66;
 }

 .pg-body .content{
 position: absolute;
 top:60px;
 width: 700px;
 margin-left: 210px;
 background-color: #fafafa;
 overflow: auto;
 }
 .pg-body .content .section{
 height: 500px;
 border: 1px solid red;
 }



 
 
  
  
  
 
 
  

  

   首页
  
  

   功能一
  
  

   功能二
  
  
 

 


 
 
  第1张
  第2张
  第3张
 
 
  
  第一章
  
  
  第二章
  
  
  第三章
  
 
 


 


滚动菜单

 
 
 
 .pg-top{
  position: fixed;
  background-color: #0095bb;
  height: 40px;
  width: 40px;
  bottom: 50px;
  right: 40px;
  color: whitesmoke;
 }
 .hide{
  display: none;
 }
 


 
 张岩林
 
 
 返回顶部
 



返回顶部

8、其他操作

console.log   输出框
alert   弹出框
confirm   确认框
 
// URL和刷新
location.href  获取URL
location.href = "url" 重定向
location.reload()  重新加载
 
// 定时器
setInterval   多次定时器
clearInterval  清除多次定时器
setTimeout   单次定时器
clearTimeout  清除单次定时器

给说下定时器吧，定时器比较有用，比如当我们删除一个邮件的时候，会发现弹出一段对话，邮件已删除，这个是单次定时器，多次定时器在自己特定需求的时候，可以用到

// 多次定时器案例


 

单次定时器

事件

 
 



 // 普通事件
 按钮
 
 
 
 
 
 
 // 0级处理事件
 0级处理按钮
 

 
 
 
 // 2级处理事件
 2级处理按钮
 

 完整兼容按钮
 

事件列表：

注：一个标签可以绑定多个事件，this标签当前正在操作的标签，event封装了当前事件的内容。

来几个案例吧，不然看完了感觉跟没看一个样

 
 
 
 ul{
  list-style: none;
  padding: 0;
  margin: 0;
 }
 ul li{
  float: left;
  background-color: #038CAE;
  color: white;
  padding: 15px 20px;
 }
 .clearfix:after{
  display: block;
  content: '.';
  height: 0;
  visibility: hidden;
  clear: both;
 }
 .hide{
  display: none;
 }
 .tab-menu{
  border: 1px solid #dddddd;
 }
 .tab-menu .title{
  background-color: #dddddd;

 }
 .tab-menu .title .active{
  background-color: white;
  color: black;
  border-top: 2px solid red;
 }
 .tab-menu .content{
  border: 1px solid #dddddd;
  min-height: 150px;
 }
 


 
 
  
  

   
价格趋势
   
市场分布
   
其他
  
  
  
  content1
  content2
  content3
  
 
 



标签菜单案例

 
 


 
 
 123
 123
 123
 123
  123
 123
 123
 123