html获取java对象属性,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.获取输入框中的内容

校检

创建一个文本输入框用来给用户提供输入；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)

问题描述：

创建一个多选，并创建一个全选，一个反选，一个全不选按钮

首先有这么一个多选框和三个按钮

兴趣爱好：

java

hadoop

c++

c

全选

全不选

反选

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” 获取到的默认值是文本框里面的数值

java

hadoop

c++

c

全选

创建多选项和按钮

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