|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//用id来查询，返回“对象”！ console.log(document.getElementById('text1')); //用标签查询，返回值“对象的集合”，即使一个对象也会包装为“对象集合”返回。 //alert(document.getElementsByTagName('P').length); //TagName标签查询.lenght对象数 ps = document.getElementsByTagName('P'); ps[1].style.background = 'green'; //对于表单元素，可以用name来查询，返回值是对象集合！ alert(document.getElementsByName('username')[0].value); document.getElementsByName('username')[0].value = 'lucy'; //按照类名查找，返回对象集合 document.getElementsByClassName('text2')[0].style.background = 'gray'; //找子节点 //alert(document.getElementById('text1').childNodes.length); 7个节点含空白节点 alert(document.getElementById('text1').children.length); //3 children非标准属性，但兼容性更好，它不含空白节点！！！ //找父节点 document.getElementsByTagName('p')[2].parentNode.style.border = '1px solid green'; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>找对象</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="布尔教育 http://www.itbool.com" /> </head> <body> <h1></h1> <div id = "text1"> <p>p1</p> <p>p2</p> <p>p3</p> </div> <div>class text2</div> <input type="text" name="username" id="" value="polt"/> </body> <script> //用id来查询，返回“对象”！ console.log(document.getElementById('text1')); //用标签查询，返回值“对象的集合”，即使一个对象也会包装为“对象集合”返回。 //alert(document.getElementsByTagName('P').length); //TagName标签查询.lenght对象数 ps = document.getElementsByTagName('P'); ps[1].style.background = 'green'; //对于表单元素，可以用name来查询，返回值是对象集合！ alert(document.getElementsByName('username')[0].value); document.getElementsByName('username')[0].value = 'lucy'; //按照类名查找，返回对象集合 document.getElementsByClassName('text2')[0].style.background = 'gray'; //找子节点 //alert(document.getElementById('text1').childNodes.length); 7个节点含空白节点 alert(document.getElementById('text1').children.length); //3 children非标准属性，但兼容性更好，它不含空白节点！！！ //找父节点 document.getElementsByTagName('p')[2].parentNode.style.border = '1px solid green'; </script> </html> |
我的微信
把最实用的经验，分享给最需要的读者，希望每一位来访的朋友都能有所收获！
