手记 / 6种选择器学习和总结

6种选择器学习和总结

2天前8浏览0评论

根据id选择元素

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>根据id选择元素</title>
</head>
<body>
    <ul id="lists">
     <li id="item1">列表项1</li>
     <li>列表项2</li>
     <li id="item3">列表项3</li>
     <li>列表项4</li>
     <li id="item5">列表项5</li>
    </ul>
    <script type="text/javascript">
     //使用id选择元素
     //document是Document对象的一个引用,是一个全局变量
     var item1 = document.getElementById('item1');
     var item3 = document.getElementById('item3');
     var item5 = document.getElementById('item5');
        //设置元素的样式
         item1.style.backgroundColor='yellow';
         item3.style.backgroundColor='yellow';
         item5.style.backgroundColor='yellow';
         //通过函数简化以上操作
         function getElement(){//参数是多个id的字符串
          var elements={};//保存获取到的dom对象元素
          for(var i=0;i<arguments.length;i++){
                var id=arguments[i];//获取参数id
                var elt=document.getElementById(id);//根据id获取字符串
                if (elt === null) {
                 throw new Error('没有找到元素'+id);//抛出异常
                }
                elements[id]=elt; //将获取的元素保存到结果集合中
          }
          return elements;  //将获取的元素返回
         }
        //根据id获取页面傻瓜的绑定元素,返回一个关联数组对象,键名就是id
        var elements = getElement('item1','item3','item5');
        // console.log(elements)
        for(var key in elements){
           elements[key].style.backgroundColor = 'coral';
        }
    </script>
</body>
</html>

根据name属性选择元素

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>根据name属性选择元素</title>
</head>
<body>
    <!--name属性并不是所有元素都有,只有一些特定的元素会有,表单,表单内的元素,图像,iframe-->
    <form  action=""  name="login">
        <input type="text" name="username">
        <input type="passname" name="passname">
        <button name="button">提交</button>
    </form>
    <script type="text/javascript">
        //getElementsByName()返回一个节点列表数组,Nodelist
        var login = document.getElementsByName('login')[0];
        console.log(login);
        login.style.backgroundColor='yellow';
        //我们可以把name属性当成document对象的属性来用
        var login1 = document.login;
        console.log(login1);
        login1.style.backgroundColor='green';
    </script>
</body>
</html>

根据Tag标签名选择元素

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>根据Tag标签名选择元素</title>
</head>
<body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ul>
    <script type="text/javascript">
        //返回是一个元素的集合,就有一个length
        var ul = document.getElementsByTagName('ul')[0];
        ul.style.backgroundColor='lightyellow';
        // console.log(document.getElementsByTagName('ul').length)
        //元素集合其实是一个对象,他的上面有一个方法:item()
        var ul1 = document.getElementsByTagName('ul').item(0);
        ul1.style.backgroundColor='lightblue';
        var lists = document.getElementsByTagName('li');
        console.log(lists.length);
        console.log(lists);
        for(var i=0;i<lists.length;i++){
            lists[i].style.backgroundColor='lightpink';
        }
        //该方法不仅定义在document对象上,还在元素对象上也有定义
        var ul2 = document.getElementsByTagName('ul').item(0);
        let item2 =ul2.getElementsByTagName('li').item(1);
        item2.style.backgroundColor='green';
    </script>
</body>
</html>

使用标签名和name属性获取元素的快捷方式

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>使用标签名和name属性获取元素的快捷方式</title>
</head>
<body>
    <img src="1.jpg" alt="" name="pic">
    <form action="" name="register">
        <input type="text" placeholder="用户名">
        <input type="password" placeholder="密码不能少于8位" >
        <button>提交</button>
    </form>
    <p><a href="http://www.php.cn" name="php">php中文网</a></p>
    <script type="text/javascript">
        //以文档对象的方式来访问这些特定的元素集合
        //document.images: 获取所有的<img>元素,返回一个数组
        document.images[0].style.width="200px";  //1.标签的数字索引
        document.images['pic'].style.width="300px"; //2.name属性
        //如果将images看成对象,name就看成属性
        document.images.pic.style.width="250px";  //3.name作为images对象的属性
        //forms属性:获取到页面中的所有的<form>
        document.forms[0].style.backgroundColor = 'lightgreen'; //1.索引
        document.forms['register'].style.backgroundColor = 'lightblue'; //2.name属性值
        document.forms.register.style.backgroundColor = 'lightgreen'; //3.name作为forms对象的属性
        document.forms.item(0).style.backgroundColor = 'red'; //4.使用元素集合的item()方法
        //links链接<a>
        document.links[0].style.backgroundColor = 'lightgreen';
        document.links['php'].style.backgroundColor = 'lightblue';
        document.links.php.style.backgroundColor = 'lightred';
        document.links.item(0).style.backgroundColor = 'lightgreen';
        
        //body:<body>
        document.body.style.backgroundColor = 'wheat';
        
        //head:<head>
        var style = document.createElement('style');
        document.head.appendChild(style);
        //documentElement:<html>
        console.log(document.documentElement);
        //doctype : 文档类型
        console.log(document.doctype);
    </script>
</body>
</html>

通过class属性获取元素

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>通过class属性获取元素</title>
</head>
<body>
    <ul class="ul">
        <li class="red">列表项1</li>
        <li>列表项2</li>
        <li class="green">列表项3</li>
        <li>列表项4</li>
        <li class="coral large">列表项5</li>
    </ul>
    <script type="text/javascript">
       //根据class来获取元素
       var red = document.getElementsByClassName('red')[0];
       // console.log(red);
       red.style.backgroundColor='red';
       //该方法不仅可以在document对象上调用,也可以在元素上调用,一般是在父元素上调用
       document.getElementsByClassName('ul').item(0)
               .getElementsByClassName('green').item(0)
               .style.backgroundColor='green';
       //class支持多值
       var large=document.getElementsByClassName('coral large')[0];
           large.style.backgroundColor='coral';
           large.style.fontSize='1.5rem';
    </script>
</body>
</html>

通过css选择器来获取元素

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>通过css选择器来获取元素</title>
</head>
<body>
    <ul id="ul">
        <li class="red">列表项1</li>
        <li>列表项2</li>
        <li class="green">列表项3</li>
        <li class="green">列表项4</li>
        <li class="coral large">列表项5</li>
    </ul>
    <script type="text/javascript">
        //选择页面元素最简单的方式就是用css的选择器:.red -->class='red'
        var lists = document.querySelectorAll('li');//根据标签选择器:li来获取
        console.log(lists);
        lists[0].style.backgroundColor='coral';
        lists.item(1).style.backgroundColor='lightcoral';
        //该方法也可以在元素上调用
        var ul=document.querySelector('#ul');//返回满足条件的第一个
        //等效语句
        //document.querySelectorAll('#ul')[0];
        console.log(ul);
        var li = ul.querySelectorAll('.green');
        console.log(li);
        for(var i=0;i<li.length;i++){
            li[i].style.backgroundColor='yellow';
        }
    </script>
</body>
</html>

主要是这6种方式选择document文档中元素,id选择器是document.getElementById(id),没有s的,因为id是唯一的,tag标签选取元素、name属性获取元素、class属性获取元素、css选择器来获取元素、使用标签名和name属性获取元素获取的都是数组对象,需要加索引才能获取元素。

相关标签:HTMLJavaScript
    0推荐

      吴勇文

      PHP开发工程师加油!努力!奋斗!

      作者的热门手记

      PHP中文网

      未登录