javascript找对象 — 7 - 筋斗云网络

1,325

阅读模式

 //用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>

javascript找对象 — 7