JavaScript：DOM

川长思鸟来 2024-04-02 04:24 74阅读 0赞

**目录**

一、DOM介绍

1、节点和节点的关系

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

3、鼠标点击事件

4、访问节点

5、获取元素的样式

--------------------

### 一、DOM介绍 ###

DOM：Document Object Model（文档对象模型）

DOM是W3C组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用

程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格。文档可以进

一步被处理，处理的结果可以加入到当前的页面。

DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的

API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中

处理。

#### **1、节点和节点的关系** ####

![211332392dea4c42ab4cbc1c028e964e.png][]

文档:一个页面就是一个文档，DOM中使用document表示

元素:页面中的所有标签都是元素，DOM中使用element表示

节点∶网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

#### 2、获取页面中的元素可以使用以下几种方式 ####

1、根据ID获取

2、根据标签名获取

3、通过HTML5新增的方法获取

4、特殊元素获取

**根据ID获取：**

getElementById()可以获取带有ID的元素对象

1．因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面

2. get获得element元素 by 通过驼峰命名法

3．参数id是大小写敏感的字符串

4．返回的是一个元素对象

5. console.dir打印我们返回的元素对象更好的查看里面的属性和方法console.dir(timer);

<div id="time">2019-9-9</div>
    <script>
    var timer = document.getElementById( 'time ' );
    console.log(timer);
    console.log(typeof timer);
    console.dir(timer);
    </script>

**根据标签名获取：**

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

document.getElementsByTagName ('标签名');

注意︰

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

2．得到元素对象是动态的

还可以获取某个元素(父元素)内部所有指定标签名的子元素.

element.getElementsByTagName ( "标签名");

注意:父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己。

**通过HTML5新增的方法获取**

1、根据类名返回元素对象集合

document.getElementsByClassName( '类名');

2、根据指定选择器返回第一个元素对象

document.queryselector ( '选择器');

3、根据指定选择器返回

document.querySelectorAl1('选择器');

**特殊元素获取**

1、获取body元素

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

2、获取html元素

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

#### 3、鼠标点击事件 ####

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>事件</td> 
   <td>触发条件</td> 
  </tr> 
  <tr> 
   <td>onclick</td> 
   <td>鼠标点击左键触发</td> 
  </tr> 
  <tr> 
   <td>onmouseover</td> 
   <td>鼠标经过触发</td> 
  </tr> 
  <tr> 
   <td>onmouseout</td> 
   <td>鼠标离开触发</td> 
  </tr> 
  <tr> 
   <td>onfocus</td> 
   <td>获得鼠标焦点触发</td> 
  </tr> 
  <tr> 
   <td>onblur</td> 
   <td>失去鼠标焦点触发</td> 
  </tr> 
  <tr> 
   <td>onmousemove</td> 
   <td>鼠标移动触发</td> 
  </tr> 
  <tr> 
   <td>onmouseup</td> 
   <td>鼠标弹起触发</td> 
  </tr> 
  <tr> 
   <td>onmousedown</td> 
   <td>鼠标按下触发</td> 
  </tr> 
 </tbody> 
</table>

####    4、访问节点 ####

**根据层次关系访问节点**

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>属性名称</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">parentNode</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">返回节点的父节点</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">childNodes</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">返回子节点集合，</span><span style="color:#000000;">childNodes</span><span style="color:#000000;">[i]</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">firstChild</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">lastChild</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">返回节点的最后一个子节点</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">nextSibling</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">下一个节点</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">previousSibling</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">上一个节点</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">firstElementChild</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">lastElementChild</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">返回节点的最后一个子节点</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">nextElementSibling</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">下一个节点</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">previousElementSibling</span></p> </td> 
   <td> <p style="margin-left:0in;text-align:justify;"><span style="color:#000000;">上一个节点</span></p> </td> 
  </tr> 
 </tbody> 
</table>

**节点信息**

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>属性</td> 
   <td>说明</td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">nodeName</span></td> 
   <td>根据节点的类型返回其名称</td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">nodeValue</span></td> 
   <td>设置或返回节点的文本值</td> 
  </tr> 
  <tr> 
   <td>nodeType</td> 
   <td>属性值是一个只读属性，返回一个数字，表示当前节点的类型。</td> 
  </tr> 
 </tbody> 
</table>

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>节点名称</td> 
   <td>nodeType</td> 
  </tr> 
  <tr> 
   <td>元素节点</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>属性节点</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>文本节点</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>注释节点</td> 
   <td>8</td> 
  </tr> 
  <tr> 
   <td>document文本节点</td> 
   <td>9</td> 
  </tr> 
  <tr> 
   <td>documentType节点</td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td>documentFragment节点</td> 
   <td>11</td> 
  </tr> 
 </tbody> 
</table>

**style属性**

语法：

HTML元素.style.样式属性＝"值"

示例：

document.getElementById("titles").style.color="#ff0000"; 
    document.getElementById("titles").style.fontSize="25px ";

#### **5、获取元素的样式** ####

**语法：**

HTML元素.style.样式属性;(这个方法只能获取写在html标签中的style属性的值)

示例：

alert(document.getElementById("adver").style.top);

语法：

document.defaultView.getComputedStyle(元素,null).属性;