Document常见方法属性

于 2024-01-05 15:33:22 发布
阅读量1.7k 收藏 31
点赞数 37
文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tdx03/article/details/135410598
版权
本文详细介绍了Document对象在前端开发中的作用，包括其主要属性（如title、URL、domain等）和常用方法（如getElementById、getElementsByTagName等），展示了如何通过这些工具实现网页的动态交互。
摘要由CSDN通过智能技术生成

文章目录

DOM概述

在前端开发中，DOM（文档对象模型）扮演着重要的角色。它允许我们使用JavaScript来与网页文档进行交互，实现动态的网页效果。DOM的核心部分之一就是Document对象，它代表了整个HTML文档。在本篇博客中，我们将深入探讨Document对象，包括它的属性、方法以及如何使用它来操纵网页内容。

什么是Document对象

Document对象是DOM的根节点，代表整个HTML文档。通过Document对象，您可以访问和操纵HTML文档的各个部分，包括元素、属性、文本内容等。以下是一些Document对象的常见属性和方法：

属性方法解释
document.getElementById(id):通过元素的id属性获取元素。
document.getElementsByTagName(tagName):通过标签名获取元素的集合。
document.createElement(tagName):创建一个新的HTML元素。
document.querySelector(selector):通过CSS选择器获取元素。
document.write(text):将文本写入文档。
document.body:获取文档的元素。
document.title:获取或设置文档的标题

document对象层次结构如图所示：
在这里插入图片描述

Document常用属性

代码演示：

document 常用属性:

1. document.title：获取或设置页面标题。

<script>
  // 获取或设置文档的标题
  document.title = "新的标题";
  console.log(document.title); // 输出： "新的标题"
</script>

2. document.URL：获取当前页面的完整 URL。

<script>
  alert(document.URL); // 弹窗显示当前页面的完整 URL
</script>

3. document.domain：获取当前页面的域名。

<script>
	console.log(document.domain); // 输出当前页面的域名
</script>

4. document.body：获取页面的 body 元素。

<script>
	console.log(document.body); // 输出页面的 body 元素
</script>

5. document.head：获取页面的 head 元素。

<script>
	console.log(document.head); // 输出页面的 head 元素
</script>

6. document.documentElement：获取页面的根元素（html 元素）。

<script>
	console.log(document.documentElement); // 输出页面的根元素
</script>

7. document.forms：获取页面中的所有表单元素。

<form action="#" method="get">
  <p>
    <input type="text" value="文本">
  </p>
    <p>
      input: <input type="password">
    </p>
</form>

<script>
  var forms = document.forms;
  console.log(forms.length); // 输出页面中表单元素的数量
  console.log(forms[0]); // 输出第一个表单元素
</script>

8.document.links：获取页面中所有的链接元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<a href="#">链接1</a>
<a href="#">链接2</a>
<script>
  var links = document.links;
  console.log(links.length); // 输出页面中链接元素的数量
  console.log(links[0]); // 输出第一个链接元素
</script>
</body>
</html>

9.document.images：获取页面中所有的图片元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<img src="上课内容/rose(2).jpg" height="150" width="250"/>
<img src="上课内容/rose.jpg" height="280" width="250"/>
<script>
  var images = document.images;
  console.log(images.length); // 输出页面中图片元素的数量
  console.log(images[0]); // 输出第一个图片元素
</script>
</body>
</html>

10.document.scripts：获取页面中所有的脚本元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script></script>  <!--  脚本1-->
  <script></script>  <!--  脚本2-->
</head>
<body>
<script>
  var scripts = document.scripts;
  console.log(scripts.length); // 输出页面中脚本元素的数量
  console.log(scripts[0]); // 输出第一个脚本元素
</script> <!--脚本3-->                                                                                                          
</body>
</html>

document 常用方法:

方法解释
document.getElementById()：通过Id来获取相对应的数据
document.getElementByName();通过name来获取相对应的数据
document.getElementByTagName();通过标签名来返回标签里所有的数据

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="div1">文本1</div>
<div name="div2">文本2</div>
<p>文本3</p>
<script>
  var div1 = document.getElementById("div1");
  console.log(div1.innerText)  //输出 id为div1 里的文本内容

  var div2 = document.getElementsByName("div2");
  console.log(div2[0].innerText)  //输出 name为div2 里的文本内容
  
  var p=document.getElementsByTagName("p");
  console.log(p[0].innerText)  //输出标签为p 里的文本内容
</script>
</body>
</html>

效果图：

在这里插入图片描述

总结

Document对象是DOM的核心，代表整个HTML文档。通过Document对象，您可以获取元素、创建新元素、写入文本、处理事件以及修改元素的样式。这些功能使JavaScript能够与网页内容互动，实现动态和交互性的网页。无论是更改文本内容、更新样式、添加交互事件，还是创建新的元素，Document对象都是前端开发不可或缺的工具之一。

花落残月时
关注
  • 37
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
document的属性与方法小结
weixin_30808253的博客
05-26 1254
document节点是文档的根节点，每张网页都有自己的document节点。属性：1：document.doctype----它是一个对象，包含了当前文档类型 （Document Type Declaration，简写DTD）信息。2：document.documentElement----返回当前文档的根节点，对于HTML网页，该属性返回<html>节点。3：document.def...
document 常用属性方法总结
最新发布
g841805的博客
04-10 1343
【代码】document 常用属性方法总结。
js基础之DOM中document对象的常用属性方法详解
11-29
—–引入 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 属性 1  document.anchors  返回对文档中所有 Anchor 对象的引用。还有document.links/document.forms/document.images等 2  document.URL       返回当前文档的url 3  document.title       返回当前文档的标题 4  document.body    返回body元素节点 方法 1  document.close()    
Document-对象属性和常用的对象方法
weixin_30797027的博客
10-30 448
Document-对象属性和常用的对象方法 对象属性 document.title 　　　　　　 //设置文档标题等价于HTML的title标签 document.bgColor 　　　　 //设置页面背景色 document.fgColor 　　　　 ...
javascript 与 DOM
menjoy的专栏
12-27 1303
主要概述一些有用的基础的DOM的方法以及怎样用使用javascript使用它们。可以实现比如动态地新建控制移动HTML元素。Document 对象的常用方法 1、getElementById(id)  通过元素的ID访问元素，这是DOM一个基础的访问页面元素的方法，我们要经常用到它.  例如下面的例子，我们可以同DIV的ID迅速的访问到它，而不必通过DOM层层遍历，
document方法大全
12-01
js的document方法大全， 比较全， 比较详细。
Document的属性和方法
mch0311的博客
09-05 2535
documentElement html元素 body body元素 doctype title 标题 URL 统一资源定位符，获取路径 domain 域名 referrer 前一个页面的URL images 所有img标签 forms ...
Document 对象的常用方法
09-05
本文将深入探讨Document对象的常用方法，这些方法在DOM（文档对象模型）操作中至关重要。 首先，我们来看`getElementById(id)`方法。此方法根据指定的ID值来查找页面中的元素。例如，如果你有一个ID为'divid'的`...
IE中document.createElement的iframe无法设置属性name的解决方法
09-03
然而，一个常见的问题是在Internet Explorer（IE）浏览器中，通过`document.createElement`创建的`iframe`元素无法设置`name`属性，这可能导致一些功能无法正常工作，例如链接或表单的目标定位。 `name`属性对于`...
Document的常用属性
2302_77874940的博客
01-01 671
Document对象是DOM的核心，代表整个HTML文档。通过Document对象，您可以获取元素、创建新元素、写入文本、处理事件以及修改元素的样式。这些功能使JavaScript能够与网页内容互动，实现动态和交互性的网页。无论是更改文本内容、更新样式、添加交互事件，还是创建新的元素，Document对象都是前端开发不可或缺的工具之一。
document属性及方法
Starr_Y的博客
04-01 557
function doBgcolor(){ //设置背景颜色 document.bgcolor = "red"; } function doWrite(){ var window2 = window.open(); //在新的网页中打印hello window2.document.write("hello"); } getElementById()//获取id所在位置的内容，获得...
document方法总结
飞鹰
05-02 4385
代表给定浏览器窗口中的 HTML 文档。 成员表 下面的表格列出了 document 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。 属性 显示: 属性 集合 事件 方法 对象 样式 属性 描述 activeElement 获取当父 document 拥有焦点时获得焦点的对象。 alin...
document常用方法
qq_38173718的博客
05-27 612
属性
document方法汇总
MAZN
03-28 3014
document方法汇总原文http://www.nowamagic.net/librarys/veda/detail/665document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) document.linkColor //未点击过的链
Document对象方法集合
IT部落
10-14 773
<br />document.title //设置文档标题等价于HTML的title标签 <br />document.bgColor //设置页面背景色 <br />document.fgColor //设置前景色(文本颜色) <br />document.linkColor //未点击过的链接颜色 <br />document.alinkColor //激活链接(焦点在此链接上)的颜色 <br />document.vlinkColor //已点击过的链接颜色 <br />document.URL //
document常用属性及属性集合
蜗牛学习笔记
03-07 3067
上一篇博文说删除结点信息时，有一行代码document.body.removeChild(deleteNode)，那document.body是什么呢？body跟document什么关系呢？今天说说常用的document属性和集合属性。所谓document属性是指那些单的属性信息，它指代的是单个的对象；集合属性指的是document对象里面的那些可以归为集合的子对象。
document对象属性与方法
dangerYe的专栏
04-20 6936
document 文挡对象 - JavaScript脚本语言描述 --------------------------------------------------------------------- 注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写    否则会提示你一个错误信息 "引用的元素为空或者不是对象" ----------------------
document属性和操作
ruler1112的博客
07-18 617
document属性 1.document.documentElement指向的是html，不是body * document.domain:返回域名 * document.url:返回地址url * document.referrer:返回链接到此页面的url * (注:除了domain别的只是可读，不可写,而domain也只能设置为子域名如:www.baidu.com就只能设置
document对象常用属性方法总结
m0_45899013的博客
06-16 3457
一、document对象的属性 1.document.title //设置文档的标题（HTML的title标签） 2.document.bgColor //设置背景页面的颜色 3.document.fgColor //设置前景色（文本颜色） 4.documen.URL //设置URL属性在同一个窗口打开其他页面 5.document.linkColor //未点击过的链接颜色 6.document.cookie //设置和读出cookie 7.document.fileSize //设置文件大写，（注：只读
document对象的属性
06-09
document对象是代表整个HTML文档的根节点，它具有许多属性，以下是一些常用的属性： 1. document.title：获取或设置当前文档的标题。 2. document.URL：获取当前文档的完整URL。 3. document.domain：获取或设置当前文档的域名。 4. document.body：获取当前文档的<body>元素。 5. document.head：获取当前文档的<head>元素。 6. document.documentElement：获取当前文档的<html>元素。 7. document.cookie：获取或设置当前文档的Cookie。 8. document.forms：获取当前文档中所有的表单元素。 9. document.images：获取当前文档中所有的图像元素。 10. document.links：获取当前文档中所有的链接元素。 11. document.scripts：获取当前文档中所有的<script>元素。 12. document.styleSheets：获取当前文档中所有的样式表元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值