//用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';
<!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>

我的微信
这是我的微信扫一扫