【LSP】Document对象中的查询方法介绍

小逗比‭‭‭‭‭   ·   发表于 20天前   ·   编程代码
Document中重要且常用的几个查询方法

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

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

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

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

1.获取输入框中的内容

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

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

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

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

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

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

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

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

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

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

5 Reply   |  Until 20天前 | 3605 View

1427417289
发表于 20天前

创建多选项和按钮

评论列表

  • 加载数据中...

编写评论内容

klmk
发表于 20天前

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

评论列表

  • 加载数据中...

编写评论内容

pole资源网
发表于 20天前

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

评论列表

  • 加载数据中...

编写评论内容

143242
发表于 20天前

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

评论列表

  • 加载数据中...

编写评论内容

【LSP】流梦
发表于 20天前

好[滑稽][大拇指]

评论列表

  • 加载数据中...

编写评论内容
LoginCan Publish Content