Javascript中的DOM(二) DOM中的对象类型

落日映苍穹つ 2021-12-24 01:11 305阅读 0赞

在上一节主要讲了DOM节点，涉及到的DOM对象主要是Element 对象,这一节将介绍文档对象模型中的其他对象。

# document对象 #

每个载入浏览器的 HTML 文档都会成为 document对象。document对象是HTML文档的根节点，可以使我们从脚本中对HTML页面中的所有元素进行访问。document对象是宿主对象，Window 对象的一部分，可通过 window.document 属性对其进行访问,因为window是全局对象，window可以省略。

document作为根节点继承节点对象的所有属性和方法，但有些节点对象的属性对document对象来说没有意义。

document对象有很多属性和方法，比如我们前面用到的getElementById就是document对象的方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>document.activeElement</td> 
   <td>返回当前获取焦点元素</td> 
  </tr> 
  <tr> 
   <td>document.anchors</td> 
   <td>返回对文档中所有 Anchor 对象的引用。</td> 
  </tr> 
  <tr> 
   <td>document.baseURI</td> 
   <td>返回文档的绝对基础 URI</td> 
  </tr> 
  <tr> 
   <td>document.body</td> 
   <td>返回文档的body元素</td> 
  </tr> 
  <tr> 
   <td>document.cookie</td> 
   <td>设置或返回与当前文档有关的所有 cookie。</td> 
  </tr> 
  <tr> 
   <td>document.doctype</td> 
   <td>返回与文档相关的文档类型声明 (DTD)。</td> 
  </tr> 
  <tr> 
   <td>document.documentElement</td> 
   <td>返回文档的根节点</td> 
  </tr> 
  <tr> 
   <td>document.documentMode</td> 
   <td>返回用于通过浏览器渲染文档的模式</td> 
  </tr> 
  <tr> 
   <td>document.documentURI</td> 
   <td>设置或返回文档的位置</td> 
  </tr> 
  <tr> 
   <td>document.domain</td> 
   <td>返回当前文档的域名。</td> 
  </tr> 
  <tr> 
   <td>document.embeds</td> 
   <td>返回文档中所有嵌入的内容（embed）集合</td> 
  </tr> 
  <tr> 
   <td>document.forms</td> 
   <td>返回对文档中所有 Form 对象引用。</td> 
  </tr> 
  <tr> 
   <td>document.images</td> 
   <td>返回对文档中所有 Image 对象引用。</td> 
  </tr> 
  <tr> 
   <td>document.implementation</td> 
   <td>返回处理该文档的 DOMImplementation 对象。</td> 
  </tr> 
  <tr> 
   <td>document.inputEncoding</td> 
   <td>返回用于文档的编码方式（在解析时）。</td> 
  </tr> 
  <tr> 
   <td>document.lastModified</td> 
   <td>返回文档被最后修改的日期和时间。</td> 
  </tr> 
  <tr> 
   <td>document.links</td> 
   <td>返回对文档中所有 Area 和 Link 对象引用。</td> 
  </tr> 
  <tr> 
   <td>document.readyState</td> 
   <td>返回文档状态 (载入中……)</td> 
  </tr> 
  <tr> 
   <td>document.referrer</td> 
   <td>返回载入当前文档的文档的 URL。</td> 
  </tr> 
  <tr> 
   <td>document.scripts</td> 
   <td>返回页面中所有脚本的集合。</td> 
  </tr> 
  <tr> 
   <td>document.strictErrorChecking</td> 
   <td>设置或返回是否强制进行错误检查。</td> 
  </tr> 
  <tr> 
   <td>document.title</td> 
   <td>返回当前文档的标题。</td> 
  </tr> 
  <tr> 
   <td>document.URL</td> 
   <td>返回文档完整的URL</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>document.addEventListener()</td> 
   <td>向文档添加句柄</td> 
  </tr> 
  <tr> 
   <td>document.adoptNode(node)</td> 
   <td>从另外一个文档返回 adapded 节点到当前文档。</td> 
  </tr> 
  <tr> 
   <td>document.close()</td> 
   <td>关闭用 document.open() 方法打开的输出流，并显示选定的数据。</td> 
  </tr> 
  <tr> 
   <td>document.createAttribute()</td> 
   <td>创建一个属性节点</td> 
  </tr> 
  <tr> 
   <td>document.createComment()</td> 
   <td>createComment() 方法可创建注释节点。</td> 
  </tr> 
  <tr> 
   <td>document.createDocumentFragment()</td> 
   <td>创建空的 DocumentFragment 对象，并返回此对象。</td> 
  </tr> 
  <tr> 
   <td>document.createElement()</td> 
   <td>创建元素节点。</td> 
  </tr> 
  <tr> 
   <td>document.createTextNode()</td> 
   <td>创建文本节点。</td> 
  </tr> 
  <tr> 
   <td>document.getElementsByClassName()</td> 
   <td>返回文档中所有指定类名的元素集合，作为 NodeList 对象。</td> 
  </tr> 
  <tr> 
   <td>document.getElementById()</td> 
   <td>返回对拥有指定 id 的第一个对象的引用。</td> 
  </tr> 
  <tr> 
   <td>document.getElementsByName()</td> 
   <td>返回带有指定名称的对象集合。</td> 
  </tr> 
  <tr> 
   <td>document.getElementsByTagName()</td> 
   <td>返回带有指定标签名的对象集合。</td> 
  </tr> 
  <tr> 
   <td>document.importNode()</td> 
   <td>把一个节点从另一个文档复制到该文档以便应用。</td> 
  </tr> 
  <tr> 
   <td>document.normalize()</td> 
   <td>删除空文本节点，并连接相邻节点</td> 
  </tr> 
  <tr> 
   <td>document.normalizeDocument()</td> 
   <td>删除空文本节点，并连接相邻节点的</td> 
  </tr> 
  <tr> 
   <td>document.open()</td> 
   <td>打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。</td> 
  </tr> 
  <tr> 
   <td>document.querySelector()</td> 
   <td>返回文档中匹配指定的CSS选择器的第一元素</td> 
  </tr> 
  <tr> 
   <td>document.querySelectorAll()</td> 
   <td>返回文档中匹配的CSS选择器的所有元素节点列表（ HTML5）</td> 
  </tr> 
  <tr> 
   <td>document.removeEventListener()</td> 
   <td>移除文档中的事件句柄(由 addEventListener() 方法添加)</td> 
  </tr> 
  <tr> 
   <td>document.renameNode()</td> 
   <td>重命名元素或者属性节点。</td> 
  </tr> 
  <tr> 
   <td>document.write()</td> 
   <td>向文档写 HTML 表达式 或 JavaScript 代码。</td> 
  </tr> 
  <tr> 
   <td>document.writeln()</td> 
   <td>等同于 write() 方法，不同的是在每个表达式之后写一个换行符。</td> 
  </tr> 
 </tbody> 
</table>

# Element 对象 #

Element 元素对象代表着一个 HTML 元素。元素可包含属性、其他元素或文本。如果元素含有文本，则在文本节点中表示该文本。  
Element 对象是标签对象

<button id="btn">按钮</button>
    <script type="text/javascript"> var btn=document.getElementById('btn'); console.dir(btn); </script>

在上一节中已经介绍了元素对象的常用属性，下面是Element 的方法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>element.addEventListener()</td> 
   <td>向指定元素添加事件句柄</td> 
  </tr> 
  <tr> 
   <td>element.appendChild()</td> 
   <td>为元素添加一个新的子元素</td> 
  </tr> 
  <tr> 
   <td>element.cloneNode()</td> 
   <td>克隆某个元素</td> 
  </tr> 
  <tr> 
   <td>element.compareDocumentPosition()</td> 
   <td>比较两个元素的文档位置。</td> 
  </tr> 
  <tr> 
   <td>element.focus()</td> 
   <td>设置文档或元素获取焦点</td> 
  </tr> 
  <tr> 
   <td>element.getAttribute()</td> 
   <td>返回指定元素的属性值</td> 
  </tr> 
  <tr> 
   <td>element.getAttributeNode()</td> 
   <td>返回指定属性节点</td> 
  </tr> 
  <tr> 
   <td>element.getElementsByTagName()</td> 
   <td>返回指定标签名的所有子元素集合。</td> 
  </tr> 
  <tr> 
   <td>element. getElementsByClassName()</td> 
   <td>返回文档中所有指定类名的元素集合，作为 NodeList 对象。</td> 
  </tr> 
  <tr> 
   <td>element.getFeature()</td> 
   <td>返回指定特征的执行APIs对象。</td> 
  </tr> 
  <tr> 
   <td>element.getUserData()</td> 
   <td>返回一个元素中关联键值的对象。</td> 
  </tr> 
  <tr> 
   <td>element.hasAttribute()</td> 
   <td>如果元素中存在指定的属性返回 true，否则返回false。</td> 
  </tr> 
  <tr> 
   <td>element.hasAttributes()</td> 
   <td>如果元素有任何属性返回true，否则返回false。</td> 
  </tr> 
  <tr> 
   <td>element.hasChildNodes()</td> 
   <td>返回一个元素是否具有任何子元素</td> 
  </tr> 
  <tr> 
   <td>element.insertBefore()</td> 
   <td>现有的子元素之前插入一个新的子元素</td> 
  </tr> 
  <tr> 
   <td>element.isDefaultNamespace()</td> 
   <td>如果指定了namespaceURI 返回 true，否则返回 false。</td> 
  </tr> 
  <tr> 
   <td>element.isEqualNode()</td> 
   <td>检查两个元素是否相等</td> 
  </tr> 
  <tr> 
   <td>element.isSameNode()</td> 
   <td>检查两个元素所有有相同节点。</td> 
  </tr> 
  <tr> 
   <td>element.isSupported()</td> 
   <td>如果在元素中支持指定特征返回 true。</td> 
  </tr> 
  <tr> 
   <td>element.normalize()</td> 
   <td>使得此成为一个"normal"的形式，其中只有结构（如元素，注释，处理指令，CDATA节和实体引用）隔开Text节点，即元素（包括属性）下面的所有文本节点，既没有相邻的文本节点也没有空的文本节点</td> 
  </tr> 
  <tr> 
   <td>element.querySelector()</td> 
   <td>返回匹配指定 CSS 选择器元素的第一个子元素</td> 
  </tr> 
  <tr> 
   <td>document.querySelectorAll()</td> 
   <td>返回匹配指定 CSS 选择器元素的所有子元素节点列表</td> 
  </tr> 
  <tr> 
   <td>element.removeAttribute()</td> 
   <td>从元素中删除指定的属性</td> 
  </tr> 
  <tr> 
   <td>element.removeAttributeNode()</td> 
   <td>删除指定属性节点并返回移除后的节点。</td> 
  </tr> 
  <tr> 
   <td>element.removeChild()</td> 
   <td>删除一个子元素</td> 
  </tr> 
  <tr> 
   <td>element.removeEventListener()</td> 
   <td>移除由 addEventListener() 方法添加的事件句柄</td> 
  </tr> 
  <tr> 
   <td>element.replaceChild()</td> 
   <td>替换一个子元素</td> 
  </tr> 
  <tr> 
   <td>element.setAttribute()</td> 
   <td>设置或者改变指定属性并指定值。</td> 
  </tr> 
  <tr> 
   <td>element.setAttributeNode()</td> 
   <td>设置或者改变指定属性节点。</td> 
  </tr> 
  <tr> 
   <td>element.setIdAttribute()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>element.setIdAttributeNode()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>element.setUserData()</td> 
   <td>在元素中为指定键值关联对象。</td> 
  </tr> 
  <tr> 
   <td>element.toString()</td> 
   <td>一个元素转换成字符串</td> 
  </tr> 
 </tbody> 
</table>

# Attr 对象 #

在 HTML DOM 中, Attr 对象 代表一个 HTML节点属性。  
使用Element.getAttributeNode()，返回指定元素的指定属性， 返回值是 Attr 节点类型

<table> 
 <thead> 
  <tr> 
   <th>属性 / 方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>attr.isId</td> 
   <td>如果属性是 ID 类型，则 isId 属性返回 true，否则返回 false。</td> 
  </tr> 
  <tr> 
   <td>attr.name</td> 
   <td>返回属性名称</td> 
  </tr> 
  <tr> 
   <td>attr.value</td> 
   <td>设置或者返回属性值</td> 
  </tr> 
  <tr> 
   <td>attr.specified</td> 
   <td>如果属性被指定返回 true ，否则返回 false</td> 
  </tr> 
  <tr> 
   <td>nodemap.getNamedItem()</td> 
   <td>从节点列表中返回的指定属性节点。</td> 
  </tr> 
  <tr> 
   <td>nodemap.item()</td> 
   <td>返回节点列表中处于指定索引号的节点。</td> 
  </tr> 
  <tr> 
   <td>nodemap.length</td> 
   <td>返回节点列表的节点数目。</td> 
  </tr> 
  <tr> 
   <td>nodemap.removeNamedItem()</td> 
   <td>删除指定属性节点</td> 
  </tr> 
  <tr> 
   <td>nodemap.setNamedItem()</td> 
   <td>设置指定属性节点(通过名称)</td> 
  </tr> 
 </tbody> 
</table>

## 类数组对象 ##

在DOM中有些特殊的对象，它们是对象，却有length属性；像数组，元素属性名是索引值，又没有数组的方法,下面通过一个类数组对象来看一下它的特点：

var likeArrObj={ 1:1,2:2,3:3,length:3};   
      var arr=[1,2,3];
      console.log(likeArrObj[1]);   //1
      console.log(arr[1]);          //2
      likeArrObj.a=4;   //不支持数组的push方法
      arr.push(4);     
      console.log(likeArrObj.length);   //3,不会动态变化
      console.log(arr.length);          //4,动态变化

类数组对象是个看起来像数组的有length属性的对象。

#### DOM中的类数组对象： ####

下面通过一段代码，来获取几种类数组对象

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]

###### 1、NodeList ######

通过通过下面的这些代码可以返回类型为NodeList的对象：  
NodeList 对象代表了节点列表，类似于 HTML元素的子节点集合。

1.  element.childNodes
2.  document.getElementsByClassName(className)

###### 2、HTMLCollection ######

通过下面的这些代码可以返回类型为HTMLCollection的对象：

1.  document.getElementsByTagName(tagName)
2.  document.images 所有img元素
3.  document.links 所有带href属性的a元素和area元素
4.  document.anchors 所有带name属性的a元素
5.  document.forms 所有form元素
6.  document.scripts 所有script元素
7.  tBodies(table元素)
8.  rows(table、tbody、thead、tfoot元素)
9.  cells(tr元素)

<table> 
 <thead> 
  <tr> 
   <th>属性/方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>length</td> 
   <td>返回节点列表中的节点数量。</td> 
  </tr> 
  <tr> 
   <td>item(index)</td> 
   <td>返回节点列表中指定索引号的节点。</td> 
  </tr> 
  <tr> 
   <td>namedItem(name)</td> 
   <td>返回集合中 name 属性或 id 属性具有指定值的元素（节点）</td> 
  </tr> 
 </tbody> 
</table>

###### 3、NamedNodeMap ######

在 HTML DOM 中，NamedNodeMap 对象表示元素属性节点的无序集合。  
NamedNodeMap 中的节点可通过名称或索引（数字）来访问。  
通过下面的代码可以返回类型为NamedNodeMap的对象  
element.attributes

<table> 
 <thead> 
  <tr> 
   <th>属性/方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>length</td> 
   <td>返回列表中节点的数量。</td> 
  </tr> 
  <tr> 
   <td>getNamedItem()</td> 
   <td>返回指定的节点（通过名称）。</td> 
  </tr> 
  <tr> 
   <td>getNamedItemNS()</td> 
   <td>返回指定的节点（通过名称和命名空间）。</td> 
  </tr> 
  <tr> 
   <td>item()</td> 
   <td>返回指定索引号的节点。</td> 
  </tr> 
  <tr> 
   <td>removeNamedItem()</td> 
   <td>删除指定的节点（通过名称）。</td> 
  </tr> 
  <tr> 
   <td>removeNamedItemNS()</td> 
   <td>删除指定的节点（通过名称和命名空间）。</td> 
  </tr> 
  <tr> 
   <td>setNamedItem()</td> 
   <td>设置指定的节点（通过名称）。</td> 
  </tr> 
  <tr> 
   <td>setNamedItemNS()</td> 
   <td>设置指定的节点（通过名称和命名空间）。</td> 
  </tr> 
 </tbody> 
</table>

###### 4、 CSS 样式声明对象(CSSStyleDeclaration) ######

通过下面的代码可以返回类型为CSSStyleDeclaration的对象  
element.style

<table> 
 <thead> 
  <tr> 
   <th>属性/方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>cssText</td> 
   <td>设置或返回样式声明文本，cssText 对应的是 HTML 元素的 style 属性。</td> 
  </tr> 
  <tr> 
   <td>length</td> 
   <td>返回样式中包含多少条声明。</td> 
  </tr> 
  <tr> 
   <td>parentRule</td> 
   <td>返回包含当前规则的规则。</td> 
  </tr> 
  <tr> 
   <td>getPropertyPriority()</td> 
   <td>返回指定的 CSS 属性是否设置了 “important!” 属性。</td> 
  </tr> 
  <tr> 
   <td>getPropertyValue()</td> 
   <td>返回指定的 CSS 属性值。</td> 
  </tr> 
  <tr> 
   <td>item()</td> 
   <td>通过索引方式返回 CSS 声明中的 CSS 属性名。</td> 
  </tr> 
  <tr> 
   <td>removeProperty()</td> 
   <td>移除 CSS 声明中的 CSS 属性。</td> 
  </tr> 
  <tr> 
   <td>setProperty()</td> 
   <td>在 CSS 声明块中新建或者修改 CSS 属性。</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: /images/20211223/fb58c4c40735489eadd76c97d6a277cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]: /images/20211223/26a8db78f83f4005bee8ce12df4a5771.png