Document对象中的查询方法介绍

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(){}这些页面加载响应后才执行的函数里面才能有用。

来源：oschina

链接：https://my.oschina.net/u/4361381/blog/4660399

标签

HOBBY