本文共 9289 字，大约阅读时间需要 30 分钟。

目录

一、定义

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

二、查找元素

1、直接查找

document.getElementById             根据ID获取一个标签　　　获取的是单个标签document.getElementsByName          根据name属性获取标签集合 注意获取的是一个 ******数组********document.getElementsByClassName     根据class属性获取标签集合document.getElementsByTagName       根据标签名获取标签集合

2、间接查找

parentNode          // 父节点childNodes          // 所有子节点firstChild          // 第一个子节点lastChild           // 最后一个子节点nextSibling         // 下一个兄弟节点previousSibling     // 上一个兄弟节点 parentElement           // 父节点标签元素children                // 所有子标签firstElementChild       // 第一个子标签元素lastElementChild        // 最后一个子标签元素nextElementtSibling     // 下一个兄弟标签元素previousElementSibling  // 上一个兄弟标签元素

三、节点类型

      节点类型都有NodeType属性来表明节点类型

四、节点关系

    
           
   
        
            
                            
Aaron
                
    
    
   
    

节点关系方法：

hasChildNodes()  包含一个或多个节点时返回true

contains()  如果是后代节点返回true

isSameNode()、isEqualNode()  传入节点与引用节点的引用为同一个对象返回true

compareDocumentPostion()  确定节点之间的各种关系

数值     关系 1      给定节点不在当前文档中2      给定节点位于参考节点之前4      给定节点位于参考节点之后8      给定节点包含参考节点16    给定节点被参考节点包含

    
           
   
        
            
                            
Nick
                
    
    
   
    

五、各种参数列表

1、选择器

document.getElementById('id')  查找指定的id，然后我们可以进行操作：

    
   
            123    
   
        

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

下面操作方式也类似：

document.getElementsByName('name')：

    
   
            123    
   
    

document.getElementsByTagName('tagname')

    
   
            123    
   
    
   
            234    
   
    

2、样式操作方法style

    
           
   
    8
   
    

3、表格操作方法

4、表单操作方法

5、元素节点ELEMENT

6、属性节点attributes

7、文本节点TEXT

8、文档节点 Document

9、位置操作方法

六、详细操作

1、内容

innerText   文本outerTextinnerHTML   HTML内容innerHTML  value       值

2、属性

attributes                // 获取所有标签属性setAttribute(key,value)   // 设置标签属性getAttribute(key)         // 获取指定标签属性 /*var atr = document.createAttribute("class");atr.nodeValue="democlass";document.getElementById('n1').setAttributeNode(atr);*/

正反先示例：

    
       全选取消反选
   
   
        
     
              
              
111
              
111
              
111
         
             
              
              
222
              
222
              
222
         
          
              
              
333
              
333
              
333
         
    
   

3、class操作

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

4、标签操作

    
           
   
    
    add    hello div1
   
   
    
    del    hello div2
   
   
    
    change    
    
hello div3
   
   
    hello div4
   

5、样式操作

var obj = document.getElementById('i1') obj.style.fontSize = "32px";obj.style.backgroundColor = "red";

6、位置操作

总文档高度document.documentElement.offsetHeight  当前文档占屏幕高度document.documentElement.clientHeight  自身高度tag.offsetHeight  距离上级定位高度tag.offsetTop  父定位标签tag.offsetParent  滚动高度tag.scrollTop /*    clientHeight -> 可见区域：height + padding    clientTop    -> border高度    offsetHeight -> 可见区域：height + padding + border    offsetTop    -> 上级定位标签的高度    scrollHeight -> 全文高：height + padding    scrollTop    -> 滚动高度    特别的：        document.documentElement代指文档根节点*/

7、提交表单

document.geElementById('form').submit()

8、定时器

    
           停止

9、弹出框

10、location

    
       click

11、其它（history）

//后退一页history.go(-1)//前进一页history.go(1);//前进两页history.go(2);//无参数时，刷新当前页面history.go()//后退一页history.back()//前进一页history.forward()

七、事件

1、注册 事件

首先了解下面的意思：

事件：比如有一个“按钮”，当你点击的时候发生什么，双击的时候发生什么，这个就叫做事件！

注册：首先这个按钮，当你点击的时候发生的动作，上面的事件要使他出现我们想要的效果，首先得把事件和函数进行绑定，然后把他们注册到指定标签上。

常用事件：

• onclick  
• onblur
• onfocus
• ..................

举例代码如下：

写一个p的标签，首先把事件和函数进行绑定，当你一点这个按钮的时候就会自动执行，绑定的函数：

    
       
   
    
    
     dddd
    
    
    
     dddd
    
    
    
     dddd
    
    
    
     dddd
    
    
    
     dddd
    
    
    
pppppp
   

2、事件列表

属性

对于事件需要注意的要点：

• this
• event
• 事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容。

实例：

1、跑马灯

2、window对象的方法

3、属性查找

    
       
   
    
    
hello p
    
    
     hello div         
     
      div3
     
         
     click    
    
     
    span
   
spanspanspanspan
   
    hhhhh
   

4、模态对话模框

    
           
   
    
    show    hellohellohellohellohellohellohellohellohellohellohellohello
   
   
   
    
    cancel
   

5、onload 和其他的不太一样，他是写在Javascirpt里的，当js放在head里面就很有用了

6、事件传播

7、二级联动

    
           请选择省份    
        
        
        请选择城市

8、输入框