zoukankan      html  css  js  c++  java
  • js 的常用选择器

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>$永远保存学习的心态$</title>
    </head>
    
    <body>
        <div>我是通过标签获取(紫色)</div>
        <div id="box">我是通过id获取(橙色)</div>
        <div class="box1">我是通过class获取(黄色)</div>
        <form action="" name="box2">
            我是通过name获取(绿色)
        </form>
        <div class="box3">
            我是通过querySelector获取(青色)
        </div>
        <div class="box4">我通过querySelectorAll获取(蓝色)</div>
        <script src="common.js"></script>
        <script>
            var div = document.getElementsByTagName("div")[0];
            //根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
            //document.getElementsByTagName("标签名字");
    
            var box = document.getElementById("box");
            //根据id属性的值获取元素,返回来的是一个元素对象
            //document.getElementById("id属性的值");
    
    
            var box1 = document.getElementsByClassName("box1")[0];
            //根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持)
            //document.getElementsByName("name属性的值")
    
            var box2 = document.getElementsByName("box2")[0];
            //根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持)
            //document.getElementsByClassName("类样式的名字")
    
            var box3 = document.querySelector('.box3');
            //根据选择器获取元素,返回来的是一个元素对象 (有的浏览器不支持)IE8以上支持
            //document.querySelector("选择器的名字");

    var box4 = document.querySelectorAll('.box4')[0]; //根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持)IE8以上支持 //document.querySelectorAll("选择器的名字") div.style.color = '#8B00FF'; box.style.color = '#ff7f00'; box1.style.color = '#ff0'; box2.style.color = '#00ff00'; box3.style.color = '#0ff'; box4.style.color = '#00f'; </script> </html> </script> </body> </html>
  • 相关阅读:
    【转】Linux进程间通信——管道及有名管道
    【转】linux进程间通信——信号(上)
    【转】Linux进程间通信—— 共享内存(下)
    【转】linux进程间通信——信号(下)
    python 文件
    文本分类入门(转)
    五大主流数据库模型 (转)
    使用libSVM
    Python编程之前戏——Python环境搭建与编译器的选择 Java(转)
    最棒的10款MySQL GUI工具 (转)
  • 原文地址:https://www.cnblogs.com/wanguofeng/p/10531767.html
Copyright © 2011-2022 走看看