Document对象中的查询方法介绍

时间:2020-10-5 作者:admin

Document中重要且常用的几个查询方法

1.document.getElementById(elementId)
通过标签的id属性查找标签dom对象,elementId是标签的id属性

2.document.getElementByName(elementName)
通过标签的name属性查找标签dom对象,elementName是标签的name属性值

3.document.getElementByTagName(tagename)
通过标签名查找标签dom对象,tagname是标签名

代码具体演示

document.getElementById(elementId)
document.getElementById(elementId)可以获取指定id的标签,当多个id相同,则永远只会获取到第一个所指定id的标签
问题描述:
当用户点击了校验按钮要获取输入框中的内容,然后验证其是否合法。
验证规则:
必须要有字母,数字,下划线组成,且长度为5到12位

1.获取输入框中的内容

<body>
		<input type="text" id="12" value="0" />
		<button onclick="b()">校检</button>
	</body>

创建一个文本输入框用来给用户提供输入;id为12;默认值为0
创建一个校检按钮,加入onclick(点击发生事件)属性

function b(){
				var obj=document.getElementById("12");
				alert(obj.value);
			}

b()函数,用obj=document.getElementById("12")获取到id为12的标签,然后obj.value可以返回obj对象(即id为12的文本输入框标签),框中的值

2.验证字符串符合规则
需要用到正则表达式的技术
正则表达式知识内容请移至 正则表达式技术

var a=obj.value;
var patt=/^\w{5,12}$/;
alert(patt.test(a));

定义一个变量a接收输入框内的返回值,然后判断a是否符合规则 然后提示

document.getElementsByName(elementName)
问题描述:
创建一个多选,并创建一个全选,一个反选,一个全不选按钮
首先有这么一个多选框和三个按钮

<body>
		兴趣爱好:
		<input type="checkbox" name="hobby"  value=java />java
		<input type="checkbox" name="hobby"  value=hadoop/>hadoop
		<input type="checkbox" name="hobby"  value=c++/>c++
		<input type="checkbox" name="hobby"  value=c/>c <br />
		<button onclick="a()">全选</button>
		<button onclick="b()">全不选</button>
		<button onclick="c()">反选</button>
	</body>
var obj=document.getElementsByName("hobby");

查找name为hobby的标签,同时返回他们的dom对象,返回值是多个标签的dom对象的集合
即此时obj是一个集合,里面有所有的name为hobby的dom对象。
这个集合的操作方法和数组一样,可以用数组的操作方法来对其操作。

obj[n]代表标签的dom对象 集合里面的顺序就是html中从上到下的顺序

alert(obj.length);//查找有几个元素
alert(obj[0].checked)
//当某一项被选中,则它的checked=true

选中是由checked=checked决定的 但是只要多选标签里面有checked,不管其值是多少,初始这项都会被选中

选中对象的checked属性并对其进行操作
当某一项被选中,则它的checked=true,当他未被选中则其checked=false。
标签的checked属性可被改变
我们可以用这个对其是否选中状态进行操作
obj[0].checked=true使第一个元素进入选中状态
obj[0].checked=false使第一个元素进入不选中状态
代码如下

var obj=document.getElementsByName("hobby");
			function a(){
				var i=0;
				while(i<4){
					obj[i].checked=true;
					i++;
				}
			}
			function b(){
				var i=0;
				while(i<4){
					obj[i].checked=false;
					i++;
				}
			}
			function c(){
				var i=0;
				while(i<4){
					if(obj[i].checked){
						obj[i].checked=false;
					}else{
						obj[i].checked=true;
					}
					i++;
				}
			}

document.getElementByTagName(tagename)
问题描述:
通过input标签获取到所有的input标签对象,并创建一个按钮,点击按钮可获取他们所有的默认值
注:input type=“text” 获取到的默认值是文本框里面的数值

<body>
		<input type="checkbox"  value=java />java
		<input type="checkbox"  value=hadoop />hadoop
		<input type="checkbox"  value=c++ />c++
		<input type="checkbox"  value=c />c <br />
		<button onclick="b()">全选</button>
	</body>

创建多选项和按钮

function b(){
				var obj=document.getElementsByTagName("input");
				//获取到input标签对象的集合
				alert(obj[0]);
				var i=0;
				do{
					console.log(obj[i].value);
					i++
				}while(i<4);
			}

document.getElementsByTagName("input")按照括号中的标签名进行查找,返回值也是符合条件的dom对象集合
其操作方法和数组一样
集合中元素顺序还是他们在html页面中从上到下的顺序

三个方法的优先使用顺序
如果有id我们优先使用document.getElementById(elementId),没有id但有name优先使用document.getElementByName(elementName),id,name都没有,那我们用document.getElementByTagName(tagename)

注意:
这三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。即,整个页面代码读取完成,形成一个dom模型,这个时候查询才能有效。所以这些查询代码需要写在函数里面供其他代码调用,或者写在window.onload=function(){}这些页面加载响应后才执行的函数里面才能有用。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。