【JavaScript】document对象的方法

最新推荐文章于 2024-05-14 00:52:41 发布
最新推荐文章于 2024-05-14 00:52:41 发布
阅读量3.5k 收藏 8
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangke1998/article/details/122941488
版权

1.getElementById方法

Document.getElementById(ElementId)

通过标签的id属性查找标签dom对象，elementId是标签的id属性值。

例子：用户名必须有数字，字母，下划线组成；并且长度是5-12位。

如何验证字符串是否符合某个规则，需要使用正则表达式。test()方法用于测试某个字符串，是不是匹配规则，匹配就返回true,不匹配就返回false。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

  function onClickFun(){

  var obj=document.getElementById("username");

  var usernameText=obj.value;

  var patt=/^\w{5,12}$/;

  if(patt.test(usernameText)){

  alert("用户名合法!")

  }else{

  alert("用户名不合法!")

  }   

  }

</script>

</head>

<body>

     用户名：<input type="text" value="请输入用户名" id="username">

       <button onclick="onClickFun();">注册</button>

</body>

</html>

2. getElementsByName

       document.getElementsByName是根据指定的name属性查询返回多个标签对象集合,集合中每个元素都是dom对象，这个集合中的元素顺序是他们在html页面上从上到下的顺序；   

       checked表示复选框的选中状态，如果选中是true,不选中是false,这个属性可读可写。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

    function checkAll(){

     var hobbies=document.getElementsByName("hobby");

     for(var i=0;i<hobbies.length;i++){

     hobbies[i].checked=true;

     }

    }

    function checkNo(){

     var hobbies=document.getElementsByName("hobby");

     for(var i=0;i<hobbies.length;i++){

     hobbies[i].checked=false;

     }

    }

    function checkReverse(){

     var hobbies=document.getElementsByName("hobby");

     for(var i=0;i<hobbies.length;i++){

     hobbies[i].checked=!hobbies[i].checked;

     }

    }

</script>

</head>

<body>

 兴趣爱好:

 <input type="checkbox" value="java" name="hobby" checked="checked">Java

 <input type="checkbox" value="cpp" name="hobby" >C++

 <input type="checkbox" value="js" name="hobby" >JavaScript

 <br>

 <button onclick="checkAll()">全选</button>

 <button onclick="checkNo()">全不选</button>

 <button onclick="checkReverse()">反选</button>

</body>

</html>

3.getElementsByTagName

      document.getElementsByTagName是按照指定标签名来进行查询并返回集合，集合中都是dom对象，集合中元素顺序是他们在html页面中从上到下的顺序。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function checkAll(){
     var hobbies=document.getElementsByTagName("input");
     for(var i=0;i<hobbies.length;i++){
     hobbies[i].checked=true;
     }
    }
   
</script>
</head>

<body>
 兴趣爱好:
 <input type="checkbox" value="java" checked="checked">Java
 <input type="checkbox" value="cpp" >C++
 <input type="checkbox" value="js" >JavaScript
 <br>
 <button onclick="checkAll()">全选</button>
</body>
</html>

 document对象的三个查询方法，如果有id属性，优先使用getElementById方法来进行查询，

如果没有id属性，则优先使用getElementsByName方法来进行查询，

如果id属性和name属性都没有最后在按标签名查getElementsByTagName。

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

4.createElement(tagName)方法

通过给定的标签名，创建一个标签对象，tagName是要创建的标签名。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>



<script type="text/javascript">

    window.onload=function(){

        var divObj=document.createElement("div");//在内存中<div></div>

        //divObj.innerHTML="今天下雨了"  //第一种方法

        var textObj=document.createTextNode("今天下雨了");//第二种方法

        divObj.appendChild(textObj);

        document.body.appendChild(divObj);

    }

</script>

</head>

<body>

</body>

</html>

言曦
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中document对象使用详解
10-24
主要介绍了JavaScript中document对象使用详解,总结的十分详尽，需要的朋友可以参考下
Document 对象的常用方法
09-05
总的来说，熟练掌握Document对象和Element对象的这些方法对于JavaScript开发者来说至关重要，它们是构建动态交互网页的基础。理解这些方法的工作原理和用法，能够帮助开发者更有效地操纵DOM，提升网站的用户体验和...
JS document对象详解
大河之犬的博客
02-02 2526
document对象其实是window对象下的一个子对象，它操作的是HTML文档里所有的内容。实际上，浏览器每次打开一个窗口，就会为这个窗口生成一个window对象，并且会为这个窗口内部的页面（即HTML文档）自动生成一个document对象，这样我们就可以通过document对象来操作页面中所有的元素了window是浏览器为每个窗口创建的对象。通过window对象，我们可以操作窗口，如打开窗口、关闭窗口、浏览器版本等，这些操作又被统称为“BOM（浏览器对象模型）”
JavaScript中document的四种方法
热门推荐
qiangzhogshou的博客
11-26 1万+
1、document的getElementById()方法 <body> <a id="first">a标签链接</a> <script> var element = document.getElementById("first"); console.log(element); </script> </body>...
JavaScript编程：常用document对象的方法
最新发布
高性价比服务器就选：蓝易云
05-14 261
就像一个手电筒，照亮了DOM模型（Document Object Model，文档对象模型）的每一个角落，让你在编程操作中能够像玩乐高积木一样，有效读取、创建、更新和删除HTML元素。createElement('tag')可以创造一个新的HTML元素，createTextNode('text')创造一段新的文本，而appendChild()则将新的节点添加到指定的元素中。例如，document.getElementById("demo")，就等于找到ID为"demo"的元素，迅速地拿到手。
Document对象中的方法介绍
你好牛蛙！
10-04 4719
Document中重要且常用的几个方法 1.document.getElementById(elementId) 通过标签的id属性查找标签dom对象，elementId是标签的id属性 2.document.getElementByName(elementName) 通过标签的name属性查找标签dom对象，elementName是标签的name属性值 3.document.getElementByTagName(tagename) 通过标签名查找标签dom对象，tagname是标签名 4.d
前端研习录（27）——JavaScript document方法讲解及示例分析
清风不渡
08-11 1658
重拾前端记忆，记录学习笔记，现在进入JavaScript document方法部分
JS中Document对象
m0_73030012的博客
09-13 1483
JS中Document对象
document对象常用的属性和方法
weixin_44237840的博客
05-05 1万+
一、对象的属性 1.document.title //设置文档的标题（HTML的title标签） 2.document.bgColor //设置背景页面的颜色 3.document.fgColor //设置前景色（文本颜色） 4.documen.URL //设置URL属性在同一个窗口打开其他页面 5.document.linkColor //未点击过的链接颜色 6....
JavaScript中的Document文档对象
10-30
JavaScript中的Document文档对象
javascript引用对象的方法代码
10-30
JavaScript 引用对象的方法代码详解 在 JavaScript 中，引用对象的方法代码是指通过不同的方式来获取页面中的元素对象引用。下面将对各种方法进行详细的介绍和说明。 使用 ID 使用 ID 来获取元素对象引用是最常见...
javascript document 对象的用法大全
08-30
### JavaScript Document 对象详解 #### 一、Document 对象简介 在Web开发中，`document`对象是浏览器提供的一种能够操作HTML文档的方式。它属于浏览器的`window`对象的一个属性，可以通过`window.document`或者...
JavaScript document对象
weixin_47782618的博客
04-23 3653
1. 什么是document对象 document对象是文档的根节点，每张网页都有自己的document对象只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。 2. document对象的属性 2.1 document.doctype document.doctype，指向<doctype>节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成<!DOCTYPE HTML>。如果网页没有声明
JavaScript之document对象最常用相关知识总结
熊凯瑞的博客
09-04 3558
浏览器对外提供的支持js的用来操作HTML文档的一个document对象，此对象封存的HTML文档的所有信息，浏览器在执行时，到达有document代码这一行，操作的不是原HTML文档，而是事先封装的document对象。 1.2 通过name 1.3 通过标签名 1.4 通过class属性值 1.5 相关实例一 2、间接方式获取HTML元素对象 2.1 父子关系 2.2 子父关系 2.3 兄弟关系 2.4 相关实例二 三、JS操作HTML元素属性 1、 获取元素属性 1.1 场
javascript的Document对象——方法
挨踢人士
10-28 2231
   方法captureEventsSets the document to capture all events of the specified type.方法源 document 实现版本 Navigator 4.0    语法captureEvents(eventType) 参数eventType The type of event to
javascript当中document方法
mark_to_win的专栏
03-19 719
2.document方法例 2.1（documentBodyEventIEFF.html）<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><head> <meta http-equiv="content-type" content="text/html; char...
JavaScript中document的用法
My 部落格
07-08 3465
详细讲解JavaScript脚本语言的 document 对象者：整理对象属性代码document.title              //设置文档标题等价于HTML的标签   document.bgColor            //设置页面背景色   document.fgColor            //设置前景色(文本颜色)   document.linkColor      
document对象属性与方法
dangerYe的专栏
04-20 6936
document 文挡对象 - JavaScript脚本语言描述 --------------------------------------------------------------------- 注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写    否则会提示你一个错误信息 "引用的元素为空或者不是对象" ----------------------
JavaScript Document对象属性详解
在JavaScript中，Document对象是网页内容的顶级表示，它包含了一系列属性和方法，用于访问和操作网页的各种元素。以下是一些主要的Document对象属性： 1. **Forms数组**：这个属性是一个数组，包含了页面中所有的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值