3.document
时间:2021-08-09
本文章向大家介绍3.document ,主要包括3.document 使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.getElementByid
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /* 当用户点击校验按钮,需要获取输出框中的内容,然后验证其是否合法 验证的规则是:必须由字母、下划线、数字组合的5到12位 */ function onclickfun() { //1.获取输入框的内容(当操作一个标签的时候,一定要先获取该标签对象) var usernameobject = document.getElementById("username"); var usernameText = usernameobject.value; //如何验证 字符串符合某个规则,需要使用正则表达式 var patt=/^\w{5,12}$/ /* getElementById方法只返回对应id值的的第一个对象 test()方法用来测试某个字符串,是否匹配规定规则 匹配就返回true,不匹配返回false innerHTML 属性 表示起始标签和结束标签的内容,该属性可读可写 */ var userspan = document.getElementById("userspan"); userspan.innerHTML ="javascript"; if(patt.test(usernameText)){ userspan.innerHTML ="用户名合法"; } else{ userspan.innerHTML ="用户名不合法"; } } </script> </head> <body> 用户名:<input type="text" id="username" /></br> <span style="color: #ff0000" id="userspan"></span> <button onclick="onclickfun();">校验</button> </body> </html>
2.正则
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /*//表示要求的字符串中,是否包含字母e //方式一:var patt = new RegExp("e"); //方式二: var patt = /e/; alert(patt);// 显示结果 /e/ var str = "abcd"; alert(patt.test(str));//false */ var patt = /[abc]/;//表示校验的字符串中,是否包含a或b或c var patt2= /[a-z]/;//表示校验的字符串中,是否包含小写字母 var patt3= /[0-9]/;//表示校验的字符串中,是否包含数字 /* \w 元字符:表示单词字符包含:a-z、A-Z、0-9、以及下划线、包含_(下划线)字符 \W 非单词字符 n+(例如:a+) 表示字符串中至少包含一个n(a) n*、n? 表示字符串中是否包含0个 或 多个n n{X} 表是字符串是否包含连续X个n n{X,Y} 表示字符串最少包含X个n,最多包含Y个n 一般应用 : ^n{X,Y}$ 表示从头到尾全匹配 n{X,} 表示字符串最少包含X个n n$ 表示字符串是否以n结尾 ^n 表示字符串是否以n开头 */ </script> </head> <body> </body> </html>
3.getElementsByName
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /* document.getElementsByName(): 是根据指定的name属性查询返回多个标签对象集合, 该集合的操作和数组一样,集合中每个元素都是dom对象 checked表示复选框的选中状态,如果选中为true,不选中为false */ function checkAll() { var hobbies = document.getElementsByName("hobby"); for(var i =0;i<hobbies.length;i++){ hobbies[i].checked = true; } } function checknone() { var hobbies = document.getElementsByName("hobby"); for(var i =0;i<hobbies.length;i++){ hobbies[i].checked = false; } } function checkReverse() { var hobbies = document.getElementsByName("hobby"); // 方式一: hobbies[i].checked = !hobbies[i].checked; for(var i =0;i<hobbies.length;i++){ if(hobbies[i].checked){ hobbies[i].checked = false; }else{ hobbies[i].checked = true; } } } </script> </head> <body> 喜爱课程: <input type="checkbox" name="hobby" value="java"/>java <input type="checkbox" name="hobby" value="javaweb"/>javaweb <input type="checkbox" name="hobby" value="oracle"/>oracle <br/> <button onclick="checkAll();">全选</button> <button onclick="checknone();">全不选</button> <button onclick="checkReverse();">反选</button> </body> </html>
4.getElementsByTagName
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /* document.getElementsByTagName(): 是按照指定标签名来指定查询并返回集合 该集合的操作跟数组一样,集合中都是dom对象 */ function checkAll() { var inputs = document.getElementsByTagName("input"); for(var i=0;i<inputs.length;i++){ inputs[i].checked = true; } } </script> </head> <body> 喜爱课程: <input type="checkbox" value="java"/>java <input type="checkbox" value="javaweb"/>javaweb <input type="checkbox" value="oracle"/>oracle <br/> <button onclick="checkAll();">全选</button> <!--节点的常用属性和方法 节点就是标签对象 方法: 通过具体的元素节点调用:getElementsTagName() :获取当前节点的之地那个标签名孩子节点 appendChildNode(ochildnode):可以添加一个子节点,ochildnode是要添加的孩子节点 属性 childNodes :获取当前节点的所有子节点 firstChild :获取当前节点的第一个子节点 lastChild :获取当前节点的最后一个子节点 parentNode:获取当前节点的父节点 nextSibling :获取当前节点的下一个节点 previewSibling :获取当前节点的上一个节点 className : 用于获取/设置标签的class属性值 innerHtml: 获取/设置起始标签和结束标签中的内容 innerText: 获取/设置起始标签和结束标签中的文本 --> </body> </html>
5.createElement
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload= function () { //需要js代码来创建html标签,并创建在页面上 //标签内容是<div>javaScript</div> var htmlDivElement = document.createElement("div");//在内存中 <div></div> htmlDivElement.innerHTML="javaScript";//在内存中 <div>javascript</div> //div需要在body标签内,给body添加子元素 document.body.appendChild(htmlDivElement); } </script> </head> <body> </body> </html>
虽不能至,心向往之
原文地址:https://www.cnblogs.com/sun1997/p/15117053.html
- 安装serverstatus监控多台服务器状态
- Windows2012搭建我的世界(Minecraft)服务器超简单
- 高效程序员的MacBook工作环境配置
- vsftpd搭建自己的ftp服务器
- Linux一键安装Transmission电影下载到服务器
- centos安装ab工具给网站进行压力测试
- ubuntu16.04安装mongodb教程
- linux压缩解压命令使用
- linux使用wc命令查看文件行数、字母、字节数命令
- 程序员偷偷深爱的 9 个不良编程习惯
- 低级程序员和高级程序员的区别
- Silverlight学习(二)
- Silverlight学习(三)
- ArcGIS for Android学习(一)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法