原生DOM的Document对象

最新推荐文章于 2022-09-18 20:32:48 发布

一碗周.

最新推荐文章于 2022-09-18 20:32:48 发布

阅读量250

点赞数

分类专栏：从头学前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_46163658/article/details/121820989

版权

从头学前端专栏收录该内容

55 篇文章 21 订阅

订阅专栏

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第四十一篇-《Document对象》

概述

Document对象是什么

Document对象是DOM的标准规范中比较重要的对象之一。该对象提供了访问和更新HTML页面内容的属性和方法。

Document对象作为DOM访问和更新HTML页面内容的入口。简单的说，可以把Document对象理解为在DOM的标准规范中代码HTML页面。

Document对象提供的属性和方法，可以实现定位HTML页面中的元素，或者创建新的元素等功能。

现在我们来测试一下Document对象，HTML代码如下所示：

<body>
  <script>
    /*
      document 对象
      * DOM预定义 -> 已经被创建完毕，可以直接使用，无需创建
      * 如果直接打印得到的是 HTML 页面的源代码 -> 该对象代表当前 HTML 页面
    */
    console.log(document) // 得到当前 HTML 页面的源代码
    // 检测 document 是否是一个对象
    console.log(document instanceof Object) // true
    // document对象的属性和方法被定义在原型上
    console.log(Document.prototype) // 得到其属性和方法
  </script>
</body>

继承链关系

Document对象是继承与Node对象的。Node对象也是DOM的标准规范中的非常重要的对象之一，而Node对象又是继承与EventTarget对象。

示例代码如下：

<body>
  <script>
    console.log(Document.prototype instanceof Node)         // true
    console.log(Node.prototype instanceof EventTarget)      // true

    console.log(Document.prototype instanceof EventTarget)  // true
  </script>
</body>

Document对象的属性和方法多是继承于Node对象和EventTarget对象的。当然，也有一部分属性和方法是实现了HTMLDocument接口的。

定位页面元素

Document对象提供了属性和方法实现定位元素功能，这也是DOM的标准规范中Document对象的主要应用之一。

Document对象提供实现定位页面元素的方法具有如下几种

方法	描述
`getElementById()`	通过页面元素的id属性值定位元素。
`getElementsByName()`	通过页面元素的name属性值定位元素。
`getElementByTagName()`	通过页面元素名称定位元素。
`getElementByClassName()`	通过页面元素的class属性值定位元素。
`querySelector()`	通过CSS选择器定义第一个匹配的元素
`querySelectorAll()`	通过CSS选择器定义匹配的所有元素

ID属性值定位元素

HTML页面元素的id属性的特点是唯一、不可重复的，所以通过这种方式定位的HTML页面元素也是唯一的。语法结构如下

var element = document.getElementById(id);

参数

element：一个Element对象。
id：大小写敏感的字符串，代表了所要查找的元素的唯一ID。

返回值

返回一个匹配到ID的DOM Element对象。若在当前Document下没有找到，则返回null。

示例代码

<body>
  <div id="div1"></div>
  <script>
    // 通过Document对象的getElementById()方法定义元素
    var div1 = document.getElementById('div1')
    // 测试打印结果 -> 结果为对象元素的 HTML 代码
    console.log(div1)
    // 在DOM中无论是使用的还是得到的结果都应该是一个对象
    console.log(div1 instanceof Object) // true
    // DOM 中提供了一系列对象，对应 HTML 页面的每一个元素。
    // <div> 元素对应具有HTMLDivElement对象
    console.log(div1 instanceof HTMLDivElement) // true
  </script>
</body>

name属性定位元素

由于name属性不唯一，得到的结果可能是多个，也有可能是一个

语法结构如下

var elements = document.getElementsByName(name)

参数

elements：一个实时更新的NodeList集合。
name：元素的name属性的值。

返回值

一个NodeList集合，是一个类数组，如果想要得到某个元素的话，需要使用索引值

示例代码

<body>
  <div name="divs"></div>
  <div name="divs"></div>
  <div name="divs"></div>
  <script>
    // name 属性不唯一，得到的结果可能是多个，也有可能是一个
    var divs = document.getElementsByName('divs')
    // 得到的是一个 NodeList 集合， 是一个类数组对象。如果想要得到某个元素的话，需要使用索引值
    console.log(divs instanceof NodeList) // true
    console.log(divs[0])
  </script>
</body>

元素名定位元素

使用元素名定位属性的话类似于使用name属性的值定位属性，不同的是getElementsByTagName()返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection。

语法结构如下

var elements = document.getElementsByTagName(name);

参数

elements：一个由发现的元素出现在树中的顺序构成的动态的HTML集合HTMLCollection。
name：一个代表元素的名称的字符串。特殊字符"*"代表了所有元素。

示例代码

<body>
  <div></div>
  <div></div>
  <div></div>
  <script>
    var boxes = document.getElementsByTagName('div')
    // 得到的是一个 HTMLCollection 集合， 是一个类数组对象。如果想要得到某个元素的话，需要使用索引值
    console.log(boxes)
    console.log(boxes[0])
  </script>
</body>

class属性定位元素

语法结构

var elements = document.getElementsByClassName(names);

参数

elements：一个实时集合，包含了找到的所有元素。
names：一个字符串，表示要匹配的类名列表；类名通过空格分隔

示例代码

<body>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <script>
    var divs = document.getElementsByClassName('boxes')
    // 得到的是一个 HTMLCollection 集合， 是一个类数组对象。如果想要得到某个元素的话，需要使用索引值
    console.log(boxes) 
    console.log(boxes[0])
  </script>
</body>

值得说一下的是，getElementsByClassName()的参数可以是多个class属性值，示例代码如下：

var div = document.getElementsByClassName('boxes cls')

querySelector()方法

querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个HTML元素Element。如果找不到匹配项，则返回null。

语法结构如下

var element = document.querySelector(selectors);

参数说明：

selectors：表示选择器，可以包含一个或者多个CSS选择器，多个使用逗号分隔；如果不是选择器，则引发SYNTAX_ERR异常。

示例代码如下

<body>
  <button id="btn">按钮</button>
  <button class="btns">按钮</button>
  <button class="btns">按钮</button>
  <button class="btns">按钮</button>
  <script>
    var btn = document.querySelector('#btn')
    console.log(btn)
    // 仅仅返回第一个匹配的元素
    var btns = document.querySelector('.btns')
    console.log(btns)
  </script>
</body>

querySelectorAll()方法

querySelectorAll()方法与querySelector()方法不同的是，此方法返回的是一个静态的NodeList，包含一个与至少一个指定选择器匹配的元素的Element对象，或者在没有匹配的情况下为空NodeList。

语法结构如下

var NodeList = document.querySelectorAll(selectors);

参数说明：

selectors：表示选择器，可以包含一个或者多个CSS选择器，多个使用逗号分隔；如果不是选择器，则引发SYNTAX_ERR异常。

示例代码如下

<body>
  <button id="btn">按钮</button>
  <button class="btns">按钮</button>
  <button class="btns">按钮</button>
  <button class="btns">按钮</button>
  <script>
    var btn = document.querySelectorAll('#btn')
    console.log(btn)
    // 返回一个 NodeList 包含所有匹配的元素。
    var btns = document.querySelectorAll('.btns')
    console.log(btns)
  </script>
</body>

定位页面元素的属性

Document对象也提供了一些属性，来定位HTML页面中一些比较特殊的元素。

属性	描述
`document.documentElement`	获取HTML页面中的`<html>`元素
`document.head`	获取HTML页面中的`<head>`元素
`document.title`	获取HTML页面中的`<title>`元素
`document.body`	获取HTML页面中的`<body>`元素
`document.links`	获取HTML页面中的`<a>`元素
`document.images`	获取HTML页面中的`<img>`元素

示例代码如下

<body>
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
  <script>
    console.log(document.documentElement)   // <html>
    console.log(document.head)              // <head>
    console.log(document.body)              // <body>
    
    // 与其他几个不同的是 images 这个属性，他返回的是一个集合
    console.log(document.images)
  </script>
</body>

创建页面元素

创建元素节点

Document对象提供了createElement()方法创建元素节点，其语法结构如下：

var element = document.createElement(tagName);

tagName：表示要创建的元素名称。

该方法返回一个新的元素。

示例代码如下

<body>
  <script>
      // 创建一个 <button> 元素
      var btn = document.createElement('button')
      // 获取父级元素
      var body = document.body
      // 向父级添加子节点
      body.appendChild(btn)
  </script>
</body>

appendChild() 方法是向HTML页面添加节点

创建文本节点

Document对象提供了createTextNode()方法创建文本节点，其语法结构如下

var text = document.createTextNode(data);

data：是一个字符串，包含了要放入文本节点的内容。

返回值是创建的文本节点

示例代码如下

<body>
  <script>
      // 创建一个 <button> 元素
      var btn = document.createElement('button')
      // 创建文本节点
      var text = document.createTextNode('按钮')
      // 向<button>元素添加子节点
      btn.appendChild(text)
      // 获取父级元素
      var body = document.body
      // 向父级添加子节点
      body.appendChild(btn)
  </script>
</body>

创建属性节点

Document对象提供了createAtrribute()方法创建属性节点，其语法结构如下；

var attributeNode = document.createAttribute(name);

name：表示属性的名称

返回值是一个创建的属性节点

注意：创建属性节点方法只具有属性名称，没有属性值。想要设置属性值需要通过nodeValue()属性完成。

由于属性节点不是元素节点的子节点，不能使用添加子节点方式操作属性节点。想要添加属性节点需要通过 setAttributeNode()方法完成。

示例代码如下

<body>
  <script>
      // 创建一个 <button> 元素
      var btn = document.createElement('button')
      // 创建文本节点
      var text = document.createTextNode('按钮')
      // 向<button>元素添加子节点
      btn.appendChild(text)
      // 创建属性节点
      var attrNode = document.createAttribute('id')
      // 为属性节点设置值
      attrNode.nodeValue = 'btn'
      // 为<button>设置属性节点
      btn.setAttributeNode(attrNode)
      // 获取父级元素
      var body = document.body
      // 向父级添加子节点
      body.appendChild(btn)
  </script>
</body>

{完}

写在最后

你如果看到这里，我感到很荣幸，如果你喜欢这篇文章，你可以为这篇文章点上一个小赞；你如果喜欢这个专栏，我会一直更新到百篇以上，可以点一下后面的链接从头学前端 - 一碗周的专栏进入之后给个关注。

最后也可以给我点个关注，万分荣庆。

往期推荐

一碗周.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生DOM的Document对象

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~这是【从头学前端】系列文章的第四十一篇-《Document对象》本系列文章在掘金首发，编写不易转载请获得允许概述Document对象是什么Document对象是DOM的标准规范中比较重要的对象之一。该对象提供了访问和更新HTML页面内容的属性和方法。Document对象作为DOM访问和更新HTML页面内容的入口。简单的说，可以把Document对象理解为在DOM的标准规范中代码HTML页面。Do.
复制链接

扫一扫