【JavaScript】document对象的方法

1.getElementById方法

Document.getElementById(ElementId)

通过标签的id属性查找标签dom对象，elementId是标签的id属性值。

例子：用户名必须有数字，字母，下划线组成；并且长度是5-12位。

如何验证字符串是否符合某个规则，需要使用正则表达式。test()方法用于测试某个字符串，是不是匹配规则，匹配就返回true,不匹配就返回false。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">function onClickFun(){var obj=document.getElementById("username");var usernameText=obj.value;var patt=/^\w{5,12}$/;if(patt.test(usernameText)){alert("用户名合法!")}else{alert("用户名不合法!")}   }</script></head><body>用户名：<input type="text" value="请输入用户名" id="username"><button onclick="onClickFun();">注册</button></body></html>

2. getElementsByName

document.getElementsByName是根据指定的name属性查询返回多个标签对象集合,集合中每个元素都是dom对象，这个集合中的元素顺序是他们在html页面上从上到下的顺序；

checked表示复选框的选中状态，如果选中是true,不选中是false,这个属性可读可写。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">function checkAll(){var hobbies=document.getElementsByName("hobby");for(var i=0;i<hobbies.length;i++){hobbies[i].checked=true;}}function checkNo(){var hobbies=document.getElementsByName("hobby");for(var i=0;i<hobbies.length;i++){hobbies[i].checked=false;}}function checkReverse(){var hobbies=document.getElementsByName("hobby");for(var i=0;i<hobbies.length;i++){hobbies[i].checked=!hobbies[i].checked;}}</script></head><body>兴趣爱好:<input type="checkbox" value="java" name="hobby" checked="checked">Java<input type="checkbox" value="cpp" name="hobby" >C++<input type="checkbox" value="js" name="hobby" >JavaScript<br><button onclick="checkAll()">全选</button><button onclick="checkNo()">全不选</button><button onclick="checkReverse()">反选</button></body></html>

3.getElementsByTagName

document.getElementsByTagName是按照指定标签名来进行查询并返回集合，集合中都是dom对象，集合中元素顺序是他们在html页面中从上到下的顺序。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title><script type="text/javascript">function checkAll(){var hobbies=document.getElementsByTagName("input");for(var i=0;i<hobbies.length;i++){hobbies[i].checked=true;}}</script>
</head><body>兴趣爱好:<input type="checkbox" value="java" checked="checked">Java<input type="checkbox" value="cpp" >C++<input type="checkbox" value="js" >JavaScript<br><button onclick="checkAll()">全选</button>
</body>
</html>

document对象的三个查询方法，如果有id属性，优先使用getElementById方法来进行查询，

如果没有id属性，则优先使用getElementsByName方法来进行查询，

如果id属性和name属性都没有最后在按标签名查getElementsByTagName。

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

4.createElement(tagName)方法

通过给定的标签名，创建一个标签对象，tagName是要创建的标签名。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">window.onload=function(){var divObj=document.createElement("div");//在内存中<div></div>//divObj.innerHTML="今天下雨了"  //第一种方法var textObj=document.createTextNode("今天下雨了");//第二种方法divObj.appendChild(textObj);document.body.appendChild(divObj);}</script></head><body></body></html>

【JavaScript】document对象的方法相关推荐

JavaScript字符串对象的方法详解
JavaScript字符串对象的方法详解前面的博客我们说到了字符串对象的创建,属性及字符串的拼接.现在来详细讲一下字符串的方法. 1.ES6之前的方法 // js字符串的方法var str=&quo ...
JavaScript Document对象DOM
Document对象 DOM 描述每个载入浏览器的HTML文档都会成为Document对象 Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问 Document 对象是 Win ...
Javascript Array对象 sort()方法，记忆方法，方法扩展
相信有很多同仁们,尤其是初学者,在记住 Array对象 sort() 方法的排序,规则上,有点困难: 其实sort()方法已经在实际工作中用到很多遍了,可当我仔细推敲,这个sort()方法,什么时 ...
javascript document对象第21节
<html> <head><title>DOM对象</title><style type="text/css">tabl ...
JavaScript Document 对象
Document 对象的理解: 第一点:Document 它管理了所有的 HTML 文档内容. 第二点:document 它是一种树结构的文档.有层级关系. 第三点:它让我们把所有的标签都都对象 ...
jQuery获取iframe的document对象的方法
2019独角兽企业重金招聘Python工程师标准>>> 获取iframe的document对象的目的就是进行dom的操作 $(function() { var result = $( ...
Javascript document对象常用的方法和属性
对象属性: document.title //设置文档标题等价于HTML的<title>标签 document.bgColor ...
javascript:document对象的常用属性和方法
属性意义 anchors[] anchors对象数组,每一个都代表文档中出现的一个锚地 applets[] applet对象数组,代表文档中 ...
Javascript基础对象与方法的识别
2019独角兽企业重金招聘Python工程师标准>>> 最佳的方法是你先确定某一段代码具备什么功能,然后搞清楚浏览器具备什么功能. 例如,我们知道有些浏览器支持图片替换,有些则不 ...

【JavaScript】document对象的方法

【JavaScript】document对象的方法相关推荐

最新文章

热门文章