Dom（文档对象模型）

转载于 2024-12-16 14:35:38 发布 · 343 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/m0_61810513/article/details/125368514

文章标签：

#前端

网站前端专栏收录该内容

26 篇文章

订阅专栏

Dom简介

1.1什么是Dom

文档对象模型（Document Object Model,简称Dom），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C已经定义了一系列DOM接口。通过这些DOM接口可以改变网页的内容，结构和样式。

1.2DOM树

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中所有标签都是元素，DOM中使用element表示
节点：网页的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

DOM把以上内容都看作是对象

2.获取元素

2.1如何获取页面元素

获取页面中元素可以使用以下几种方式：

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

2.2根据ID获取

使用getElementById()方法可以获取带有ID的元素对象

2.3根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合

document.getELementsBYTagName('标签名');

 '
 
  
   运行
   
    运行

注意：

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
得到元素对象是动态的

2.4HTML5新增的方法获取


 
   
    
   
   
    
     document.
     getELementsByClassName(
     '类名');
     //根据类名返回元素对象集合
    
   

   
    
   
   
     
    
   

   
    
   
   
     
    
   
 '
 
  
   运行
   
    运行


 
   
    
   
   
    
     document.
     querySelector(
     '选择器');   
     //根据指定选择器返回第一个元素对象
    
   

   
    
   
   
    
     document.
     querySelectorAll(
     '选择器');   
     //根据指定选择器返回
    
   
 '
 
  
   运行
   
    运行

2.5获取特殊元素（body，html）

获取body元素

1.document.body //返回body元素对象

获取html元素

1.document.documentElement //返回html对象

3.事件基础

3.1事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为

1.事件三要素：

事件源事件类型事件处理程序

（1）事件源：事件被触发的对象（谁）例:按钮

（2）事件类型（如何触发什么事件比如鼠标点击（onclick）还是鼠标经过还是键盘按下）

（3）事件处理程序通过一个函数赋值的方式完成

3.3执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）


 
   
    
   
   
    
     <body>
    
   

   
    
   
   
      
     <div>点击</div>
    
   

   
    
   
   
      
     <script>
    
   

   
    
   
   
        
     //执行事件步骤
    
   

   
    
   
   
        
     //点击div 控制台输出 我被选中了
    
   

   
    
   
   
        
     //1.获取事件源
    
   

   
    
   
   
        
     var div =
     document.
     querySelector(
     'div');
    
   

   
    
   
   
        
     //2.绑定事件 注册事件
    
   

   
    
   
   
        
     //div.onclick
    
   

   
    
   
   
        
     //3.添加事件处理程序
    
   

   
    
   
   
    
         div.
     onclick =
     function(
     ){
    
   

   
    
   
   
         
     console.
     log(
     '我被选中了');
    
   

   
    
   
   
    
        }
    
   

   
    
   
   
    
     </script>
    
   

   
    
   
   
    
     </body> 
    
   
 '
 
  
   运行
   
    运行

3.3常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点出发
onblur	失去鼠标焦点出发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

4.操作元素

JavaScript的DOM操作可以改变网页内容，结构样式，可以利用DOM操作元素来改变元素里面的内容，属性等。注意以下都是属性。

4.1改变元素内容

element.innnerText
 '
 
  
   运行
   
    运行

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

 '
 
  
   运行
   
    运行

起始位置到终止位置的内容，包括html标签，同时保留空格和换行

4.2常用元素的属性操作


 
   
    
   
   
    
     1.innerText,innerHTML
    
   

   
    
   
   
    
     2.src,href
    
   

   
    
   
   
    
     3.id,alt,title
    
   
 '
 
  
   运行
   
    运行

案例：换照片

4.3修改表单属性

利用DOM可以操作如下表单元素的属性：

type，value，checked，selected，disabled    //disable被禁用
 '
 
  
   运行
   
    运行

案例:仿京东登录界面

4.4样式属性操作

我们可以通过JS修改元素的大小，颜色，位置等样式


 
   
    
   
   
    
     1.element.
     style    行内样式操作
    
   

   
    
   
   
     
    
   

   
    
   
   
     
    
   

   
    
   
   
    
     2.element.
     className 类名样式操作
    
   
 '
 
  
   运行
   
    运行

注意：

如果样式修改较多，可以采取操作类名方式更改元素样式
class因为是个保留字，因此使用className来操作元素类名属性
className会直接更改元素的类名，会覆盖原先的类名

注：

JS里面的样式采取了驼峰命名法比如fontSize，backgroundColor
JS修改style 样式操作。产生的是行内样式，css权重比较高

案例：仿淘宝关闭二维码案例（利用样式的显示和隐藏，display：none隐藏元素 display：block显示元素）

4.操作元素总结

操作元素是DOM核心内容

4.5排他思想（算法）

5.节点操作

5.1为什么要学习节点操作

5.2节点的概述

一般地，节点至少拥有nodeType（节点类型），nodeName（节点名称），nodeValue(节点值）这三个基本属性

元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3（文本节点包含文字，空格，换行等）

5.3节点层次

1.父级节点

node.parentNode

 '
 
  
   运行
   
    运行

parentNode属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回null

2.子节点

1.parentNode.childNodes(标准)
 '
 
  
   运行
   
    运行

注：返回值里面包含了所有的子节点，包括元素节点，文本节点等。

如果只想获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes


 
   
    
   
   
    
     var ul=
     document.
     querySelector(
     'ul');
    
   

   
    
   
   
    
     for(
     var i=
     0;i<ul.
     childNodes.
     length;i++){
    
   

   
    
   
   
        
     if(ul.
     childNodes[i].
     nodeType ==
     1){
    
   

   
    
   
   
           
     //ul.childNode[i]   是元素节点
    
   

   
    
   
   
          
     console.
     log(ul.
     childNodes[i]);
    
   

   
    
   
   
    
       }
    
   

   
    
   
   
    
     }
    
   
 '
 
  
   运行
   
    运行

2.parentNode.children(非标准）

 '
 
  
   运行
   
    运行

注：parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余接点不返回（重点掌握）


 
   
    
   
   
    
     5.parentNode.
     firstElementChild
    
   

   
    
   
   
    
     //firstELementChild 返回第一个子元素节点，找不到则返回null
    
   

   
    
   
   
     
    
   

   
    
   
   
    
     6.parentNode.
     lastElementChild
    
   

   
    
   
   
    
     //lastElementChild返回最后一个子元素节点，找不到则返回null
    
   
 '
 
  
   运行
   
    运行

注：这两个方法有兼容性问题，IE9以上才支持


 
   
    
   
   
    
     //实际开发的写法 既没有兼容性问题又返回第一个子元素
    
   

   
    
   
   
    
     console.
     log(ol.
     children[
     0]);
    
   

   
    
   
   
    
     console.
     log(ol.
     children[ol.
     children.
     length-
     1];
    
   

   
    
   
   
     
    
   
 '
 
  
   运行
   
    运行

3.兄弟节点

1.node.nextSibling
 '
 
  
   运行
   
    运行

nextSibling返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

2.node.previousSibling
 '
 
  
   运行
   
    运行

nextSibling返回当前元素的上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

node.nextElementSibling
 '
 
  
   运行
   
    运行

node.previousElementSibling
 '
 
  
   运行
   
    运行

node.nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null

有兼容性问题

5.4创建节点

document.createElement('tagName');
 '
 
  
   运行
   
    运行

该方法创建由tagN阿么指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

5.4添加节点

1.node.appendChild(child)
 '
 
  
   运行
   
    运行

该方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面after伪元素。

2.node.insertBefore(child,指定元素）
 '
 
  
   运行
   
    运行

5.5删除节点

node.removeChild（child）
 '
 
  
   运行
   
    运行

node.removeChild()方法从DOM中删除一个子节点，返回删除节点

5.6 复制节点（克隆节点）

node.cloneNode()
 '
 
  
   运行
   
    运行

该方法返回调用该方法节点的一个副本。也称为克隆节点/拷贝节点

注：括号里面为空或者里面为false 浅拷贝只复制标签不复制里面内容

转载： https://blog.youkuaiyun.com/m0_61810513/article/details/125368514