dom笔记

谁借莪１个温暖的怀抱￠ 2022-05-31 05:12 117阅读 0赞

#  #

# （一）HTMLDocument接口 #

操作HTML文档的第一步就是获取对文档元素的引用，每一个元素在DOM中就是一个节点，所有的元素在DOM中构成一个节点树。

用于获取元素节点定义的方法定义于HTMLDocument接口，window.document方法用于实现该接口，其定义的常用方法和属性如下：

另外，HTMLDocument接口也继承了Core DOM的Document接口，继承的属性和方法如下：

# （二）：Node接口 #

所有的节点都使用Node接口来表示，可以使用很多方法去获取节点，如document.getElementsByTagName()、document.getElementsByName()等均返回一个NodeList对象，然后获取其中的节点。

节点对应的属性和放大均在Node接口予以定义：

**1、Node接口常见的属性列表**

**2、Node接口常见的方法列表**

**3、Node类型**

在DOM文档中，每一个节点都属于一种类型，可以使用Node.nodeType属性获取节点的类型。DOM规范规定了12种节点类型，可以使用Node接口定义的常量表示，也可以用数字表示。

# 三）：Element接口和HTMLElement接口 #

一、Element接口

Element接口表示一个元素，该接口扩展自Node接口，自然继承了Node接口的属性和方法，也有一套针对元素的属性和方法。

Element接口常见的属性比较少，常用的就是一个只读的tagName属性，该属性返回元素名，数据类型是DOMString。

Element接口定义的方法也主要是针对属性操作，常见方法如下：

二、HTMLElement接口

该接口继承自Element接口，同样用于表示一个HTML元素，拥有自定义的属性和方法。

1、属性列表

<table style="border:1px solid rgb(221,221,221);color:rgb(0,0,0);font-family:'Helvetica Neue', Helvetica, STHeiTi, 'Microsoft YaHei';font-size:16.96px;"> 
 <tbody> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">属性名</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">数据类型</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">只读</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">说明</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">innerHTML</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMString</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">&nbsp;</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">获取或设置HTML内容</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">outerHTML</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMString</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">&nbsp;</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">设置或获取对象的纯文本形式</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">id</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMString</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">&nbsp;</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的id属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">title</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMString</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">&nbsp;</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的title属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">lang</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMString</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">&nbsp;</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的lang属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">dir</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMString</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">&nbsp;</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的dir属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">className</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMString</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">&nbsp;</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的class属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">classList</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMTokeList</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">Y</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">返回元素的class属性作为DOMTokenList对象</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">dataset</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMStringMap</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">Y</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">返回自定义的data-*属性集合</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">hidden</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">Boolean</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">&nbsp;</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的hidden属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">tabIndex</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">long</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">&nbsp;</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的tabIndex属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">accessKey</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMString</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">&nbsp;</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的accessKey属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">accessKeyLabel</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMString</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">Y</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">返回热键组合</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">draggable</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">Boolean</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">&nbsp;</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的draggable属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">contentEditable</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMString</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">&nbsp;</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的contentEditable属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">isContentEditable</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">Boolean</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">Y</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">判断元素是否可用编辑</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">contextMenu</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">HTMLMenuElement</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">&nbsp;</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的contextMenu属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">spellcheck</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMString</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">&nbsp;</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的spellcheck属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">commandType</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMString</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">Y</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的commandType属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">label</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMString</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">Y</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的label属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">icon</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">DOMString</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">Y</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的icon属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">disabled</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">Boolean</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">Y</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的disabled属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">checked</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">Boolean</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">Y</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的checked属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border-spacing:0px;">style</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">CSSStyleDeclaration</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">Y</td> 
   <td style="border-collapse:collapse;border-spacing:0px;">对应元素的style属性</td> 
  </tr> 
 </tbody> 
</table>

2、方法列表

# （四）：HTML 5 DOM复杂数据类型 #

HTML 5 DOM定义了一下集合、列表等复杂的数据类型用于实现便捷的操作。相对于HTML 4 DOM，HTML 5 DOM增加了HTMLCollection、DOMTokenList、DOMStringMap、HTMLAllCollection、HTMLFormControlsCollection等。

一、HTMLCollection、HTMLAllCollection和HTMLFormControlsCollection

三个接口均用于表示一组元素组成的列表。HTMLAllCollection和HTMLFormControlsCollection均继承自HTMLCollection接口，对HTMLCollection接口中定义的namedItem()方法进行了重写。在[DOM笔记（一）：HTMLDocument接口][DOM_HTMLDocument]，利用document.forms(/images/embeds等)返回一个HTMLCollection对象，document.all则返回一个HTMLAllCollection对象，document.forms.elements则返回一个HTMLFormControlsCollection对象，该对象包含了form中的所有表单元素。

# （五）：JavaScript的常见事件和Ajax小结 #

**一、常见事件类型**

1、鼠标事件

ps:当单击一次鼠标左键的时候，将同时触发onclick、onmousedown、onmouseup三个事件，事件处理程序执行的先后顺序为：onmousedown>onmouseup>onclick.因为按下鼠标产生的动作肯定是在释放鼠标之前的，而一次按下加上一次释放，才代表一次单击，所以onclick最后执行。

2、键盘事件

ps:对键盘的操作也会同时触发这三个事件，其处理程序执行的先后顺序是onkeydown>onkeypress>onkeyup.原因参见鼠标事件。

3、页面事件

4、表单事件

**二、JavaScript Ajax小结**

1.创建XHR对象

2、XHR对象的属性和方法

3、readyState属性

[DOM_HTMLDocument]: http://ju.outofmemory.cn/entry/118763