getElementsByName方法
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>getElementsByName方法</title> <script type="text/javascript"> //全选 function checkall(){ //document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合 //该集合操作跟数组一样,集合中元素顺序是它们在html页面中从上到下的顺序 //集合中每个元素都是dom对象, var hobbys = document.getElementsByName("hobby"); //checked表示复选框的选中状态,如果选中是 true ,不选中是 false //checked 这个属性 可读,可写 for (var i = 0; i< hobbys.length; i++) { hobbys[i].checked = true; } } //全不选 function checkno(){ //document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合 //该集合操作跟数组一样,集合中元素顺序是它们在html页面中从上到下的顺序 //集合中每个元素都是dom对象, var hobbys = document.getElementsByName("hobby"); //checked表示复选框的选中状态,如果选中是 true ,不选中是 false //checked 这个属性 可读,可写 for (var i = 0; i< hobbys.length; i++) { hobbys[i].checked = false; } } //反选 function checkReverse(){ //document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合 //该集合操作跟数组一样,集合中元素顺序是它们在html页面中从上到下的顺序 //集合中每个元素都是dom对象, var hobbys = document.getElementsByName("hobby"); //checked表示复选框的选中状态,如果选中是 true ,不选中是 false //checked 这个属性 可读,可写 for (var i = 0; i< hobbys.length; i++) { /* if (hobbys[i].checked){ hobbys[i].checked = false; }else { hobbys[i].checked = true; }*/ hobbys[i].checked = !hobbys[i].checked; } } </script> </head> <body> 兴趣爱好: <input type="checkbox" name="hobby" value="c"/>C <input type="checkbox" name="hobby" value="java"/>java <input type="checkbox" name="hobby" value="python"/>python <br/> <button οnclick="checkall();">全选</button> <button οnclick="checkno();">全不选</button> <button οnclick="checkReverse();">反选</button> </body> </html>
getElementsByTagName方法
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>getElementsByTagName</title> <script type="text/javascript"> function checkall() { //document.getElementsByTagName();按照指定标签名进行查询并返回集合 //该集合的操作跟数组一样,集合中都是dom对象, //集合中元素顺序是它们在html中从上到下顺序 var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { inputs[i].checked = true; } } </script> </head> <body> 兴趣爱好: <input type="checkbox" value="c"/>C <input type="checkbox" value="java"/>java <input type="checkbox" value="python"/>python <br/> <button οnclick="checkall();">全选</button> </body> </html>
document对象三个查询方法的使用注意事项
注意:document对象的三个查询方法,如果有id属性,优先使用getElementById方法进行查询,如果没有id属性,则优先调用getElementsByName方法来进行查询,如果id属性和name属性都没有,最后按标签名查getElementsByTagName
以上三个方法都要在加载完成之后执行,才能查询到标签对象
dom对象查询练习
节点就是标签对象,节点的常用属性和方法:
方法:
通过具体的元素节点调用:
getElemensByTagName()方法,获取当前节点的指定标签名孩子节点
appendChild(oChildNode)方法,可以添加一个子节点,oChildNode是要添加的孩子节点
属性:
childNodes属性:获取当前节点的所有子节点
firstChild属性:获取当前节点的第一个子节点
lastChild属性:获取当前节点的最后一个子节点
parentNode属性:获取当前节点的父节点
nextSibling属性:获取当前节点的下一个节点
previousSibling属性:获取当前节点的上一个节点
className属性:用于获取或设置标签的class属性值
innerHTML属性:表示获取/设置起始标签和结束标签中的内容
innerText属性:表示获取/设置起始标签和结束标签中的文本
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>dom查询</title> <link rel="stylesheet" type="text/css" href="style/css.css" /> <script type="text/javascript"> window.onload = function(){ //1.查找#bj节点 document.getElementById("btn01").onclick = function (){ var bj = document.getElementById("bj"); alert(bj.innerHTML); } //2.查找所有li节点 var btn02Ele = document.getElementById("btn02"); btn02Ele.onclick = function(){ var lis = document.getElementsByTagName("li"); alert(lis.length); }; //3.查找name=gender的所有节点 var btn03Ele = document.getElementById("btn03"); btn03Ele.onclick = function(){ var gender = document.getElementsByName("gender"); alert(gender.length); }; //4.查找#city下所有li节点 var btn04Ele = document.getElementById("btn04"); btn04Ele.onclick = function(){ //1.获取id为city的节点 //2.通过city节点.getElementsByTagName按标签名查子节点 var city = document.getElementById("city"); var lis = city.getElementsByTagName("li"); alert(lis.length); }; //5.返回#city的所有子节点 var btn05Ele = document.getElementById("btn05"); btn05Ele.onclick = function(){ //1.获取id为city的节点 var city = document.getElementById("city"); //2.获取city的所有子节点 var childNodes = city.childNodes; //3.空格也算字符串 alert(childNodes.length); }; //6.返回#phone的第一个子节点 var btn06Ele = document.getElementById("btn06"); btn06Ele.onclick = function(){ //1.获取id为phone的节点 var phone = document.getElementById("phone"); //2.获取phone的第一个子节点 var firstChild = phone.firstChild; alert(firstChild.innerHTML); }; //7.返回#bj的父节点 var btn07Ele = document.getElementById("btn07"); btn07Ele.onclick = function(){ var bj = document.getElementById("bj"); var parentNode = bj.parentNode; alert(parentNode.innerHTML); }; //8.返回#android的前一个兄弟节点 var btn08Ele = document.getElementById("btn08"); btn08Ele.onclick = function(){ var android = document.getElementById("android"); var previousSibling = android.previousSibling; alert(previousSibling.innerHTML); }; //9.读取#username的value属性值 var btn09Ele = document.getElementById("btn09"); btn09Ele.onclick = function(){ var username = document.getElementById("username"); var value = username.value; alert(value); }; //10.设置#username的value属性值 var btn10Ele = document.getElementById("btn10"); btn10Ele.onclick = function(){ var username = document.getElementById("username"); username.value = "这是第十个按钮"; }; //11.返回#bj的文本值 var btn11Ele = document.getElementById("btn11"); btn11Ele.onclick = function(){ var bj = document.getElementById("bj"); var innerText = bj.innerText; }; }; </script> </head> <body> <div id="total"> <div class="inner"> <p> 你喜欢哪个城市? </p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br> <br> <p> 你喜欢哪款单机游戏? </p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br /> <br /> <p> 你手机的操作系统是? </p> <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul> </div> <div class="inner"> gender: <input type="radio" name="gender" value="male"/> Male <input type="radio" name="gender" value="female"/> Female <br> <br> name: <input type="text" name="name" id="username" value="abcde"/> </div> </div> <div id="btnList"> <div><button id="btn01">查找#bj节点</button></div> <div><button id="btn02">查找所有li节点</button></div> <div><button id="btn03">查找name=gender的所有节点</button></div> <div><button id="btn04">查找#city下所有li节点</button></div> <div><button id="btn05">返回#city的所有子节点</button></div> <div><button id="btn06">返回#phone的第一个子节点</button></div> <div><button id="btn07">返回#bj的父节点</button></div> <div><button id="btn08">返回#android的前一个兄弟节点</button></div> <div><button id="btn09">返回#username的value属性值</button></div> <div><button id="btn10">设置#username的value属性值</button></div> <div><button id="btn11">返回#bj的文本值</button></div> </div> </body> </html>
document对象补充说明
document.createElement(tagName)方法:通过给定的标签名,创建一个标签对象,tagName是要创建的标签名
appendChild(oChildNode)方法:可以添加一个子节点,oChildNode是要添加的孩子节点
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>document对象补充说明</title> <script type="text/javascript"> window.onload = function (){ //需求:需要使用js代码来创建html标签,并显示在页面上 //标签内容是:document对象补充说明 var divobj = document.createElement("div");//在内存中 divobj.innerHTML = "document对象补充说明";//在内存中 document.body.appendChild(divobj); } </script> </head> <body> </body> </html>