你真的知道DOM吗（中）----（Document类型, Element类型）

阳光穿透心脏的1/2处 2022-12-11 03:25 209阅读 0赞

### 文章目录 ###

*  前言
 *  正文
 *   *  Document类型
     *   *  文档子节点
         *  文档信息
         *  查找元素
         *  文档写入
     *  Element类型
     *   *  HTML元素
         *  特性的相关方法
         *   *  document.getAttribute()
             *  document.setAttribute()
             *  document.removeAttribute()
         *  创建元素
         *  元素的子节点
 *  小结

# 前言 #

DOM（文档对象模型）是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加，移除和修改页面的某一部分。可以说，DOM是前端开发中最重要的一个渲染API，它决定了页面的样式结构的走向。

# 正文 #

## Document类型 ##

在浏览器中，document对象是HTMLDocument(继承自Document类型）的一个实例，表达整个HTML页面。而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问

### 文档子节点 ###

document.documentElement: 指向HTML页面中的html元素  
document.body: 指向HTML页面中的body元素  
![在这里插入图片描述][20200928141143713.png_pic_center]  
HTMLHtmlElement对象和HTMLBodyElement对象继承了HTMLElement接口，HTMLElement可以表示所有的接口

### 文档信息 ###

HTMLDocument的实例，相比标准的document对象还有一些所没有的属性。这些属性提供了document对象所表现的网页的一些信息。

*  title属性：包含着title标签中的文本，用于显示在浏览器窗口的标题栏或标签页上
 *  URL属性：包含页面完整的URL（即地址栏中显示的URL）
 *  domain属性：只包含页面的域名
 *  referrer属性：保存着链接到当前页面的那个页面的URL  
    ![在这里插入图片描述][20200928142903752.png_pic_center]  
           **URL是当前页面地址；referrer是来源地址，即上一个访问页面的url的地址**  
           这里有个js跨域的问题稍微提一下，JavaScript的脚本必须在同一域名下才可以互相访问，也就是在document.domain相同的时候才可以互相访问，不然就会引起跨域访问失败的问题，所以很容易理解，**直接修改document.domain让脚本之间的域名相同来实现通信便是js跨域的一个解决办法**。这里我们不细谈这个问题，感兴趣的同学可以关注我后面的文章，会有相关关于跨域更多的介绍

### 查找元素 ###

因为这个比较常见了，大家应该都不陌生，所以就不多赘述了，下面给出相关方法的用法以及代码示例，大家可以结合代码示例自己体会理解一下

*  getElementById():通过元素id来查找对应元素，返回一个htmlElement对象
 *  getElementsByTagName()：通过元素标签名来查找对应元素，返回HTMLCollections对象
 *  getElementsByName(): 通过元素name特性来查找对应元素，返回HTMLCollections对象

<html>
    	<body>
    		<input type="text" name="name" id="test_name" placeholder="请输入姓名">
    	</body>
    	<script> var element1 = document.getElementById('test_name'), element2 = document.getElementsByTagName('input'), // element2[0] == element1 element3 = docuemnt.getElementByName('name'); // element3[0] == element1 </script>
    </html>

### 文档写入 ###

document可以将输出流写入到网页中，这个能力体现在下面4个方法中：write()，writeln()，open()，close().

*  document.write():把输出流中的文本写入到网页中
 *  document.writeln():在输出流中的字符串文本末尾添加一个换行符’\\n’再写入到网页中
 *  document.open():擦除当前HTML文档的内容，开始一个新的文档，新文档用write()方法或writeln()编写  
      
      
    \- document.close()：关闭一个由document.open()方法打开的输入流

有个要注意的问题，**如果在文档加载结束后即页面被呈现之后再调用document.write().那么输出的内容会重写整个页面。**

## Element类型 ##

除了Document类型之外，Element类型就要算是Web编程中最常用的类型了，Element类型用于表现XML和HTML元素，提供了对元素标签字，子节点及特性的访问。**要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性，这两个属性会返回相同的值**  
  
  
![在这里插入图片描述][20200928155606916.png_pic_center]

### HTML元素 ###

所有HTML元素都由HTMLElement类型表示，不是直接通过这个类型，也是通过它的子类型来表示。HTMLElement类型直接继承自Element并添加了一些属性。

*  id,元素在文档中的唯一标识符
 *  title,有关元素的附加说明信息，一般通过工具提示条显示出来
 *  lang，元素内容的语言代码
 *  className,与元素的class特性对应，即为元素指定的css类

### 特性的相关方法 ###

*  getAttribute()方法：获取特性
 *  setAttribute()方法：设置特性
 *  removeAttribute()方法：移除特性

#### document.getAttribute() ####

有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过getAttribute()返回的值并不相同。  
       第一类特性是style，getAttribute()访问时，**返回的style特性值是css文本，而通过属性来访问它则会返回一个对象。**  
![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20200928164931713.png\#pic\_center][https_img-blog.csdnimg.cn_20200928164931713.png_pic_center]

第二类特性是像onclick这样的事件处理程序，**如果是通过属性访问，返回的是一个js函数，如果是通过getAttribute()访问，则会返回相应代码的字符串**  
由于存在这些差别，在通过js以编程方式操作DOM时，开发人员经常不使用getAttribute()，而是只使用对象的属性。只有在取得自定义特性值的情况下，才会使用getAttribute()方法

#### document.setAttribute() ####

用于设置特性，通过这个方法设置的特性名会被统一转换为小写形式  
       **所有特性都是属性，所以直接给属性赋值可以设置特性的值**。但是为DOM元素添加一个自定义属性，该属性不会自动成为元素的特性。  
![在这里插入图片描述][20200928232024347.png_pic_center]

#### document.removeAttribute() ####

这个方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性。

### 创建元素 ###

使用document.createElement()方法可以创建新元素，传入一个参数表示要创建的标签名，这个标签名在HTML文档中不区分大小写

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

### 元素的子节点 ###

元素可以有任意数目的子节点，元素的childNodes属性包含了所有的节点

如果是在IE中解析，ul的childNodes有3个子节点，分别是3个li节点，如果是在其他浏览器，应该为3个li节点和4个文本节点（元素之间的空白）

如果像这样将空白符删除，那么所有的浏览器都会返回相同数目的子节点

# 小结 #

1、document类型表示整个文档，是一组分层节点的根节点  
       2、element节点表示文档中的所有HTML或XML元素，可以用来操作这些元素的内容和特性

小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]

[20200928141143713.png_pic_center]: /images/20221123/08291739211a4b3f86421c4a8c5e9ed3.png
[20200928142903752.png_pic_center]: /images/20221123/74bdfa60cb45496ab1bc77bd281aaeda.png
[20200928155606916.png_pic_center]: /images/20221123/2d5f32bf3a6b4f1092b09fc83ce9f7cc.png
[https_img-blog.csdnimg.cn_20200928164931713.png_pic_center]: /images/20221123/2ec6c39f1e494a9495d4f89bdd58c5dd.png
[20200928232024347.png_pic_center]: /images/20221123/b8ed21a685274b01aee0469c48bfbf21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/508ed37d9a8a484aa8aac64bf4959626.png