<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         div {

             width: 100px;

             height: 100px;

             background-color: tomato;

             margin: 10px;

         }

     </style>

 </head>

 <body>

     <div></div>

     <div class="box"></div>

     <div id="box"></div>

     <div class="box"></div>

     <div></div>

     <script>

         //简单版

         // getEle("#box").style.backgroundColor = "lemonchiffon";

         // var claArr = getEle(".box");

         // for (var i = 0; i < claArr.length; i++) {

         //     claArr[i].style.backgroundColor = "yellow";

         // }

         // var divArr = getEle("div");

         // for (var i = 0; i < divArr.length; i++) {

         //     divArr[i].style.border = "2px solid #ddd";

         // }

         // //封装一个方法，然后判断第一个字符，如果是#用id，如果是.用className,否则用tagName

         // function getEle(str){

         //     var str1 = str.charAt(0);

         //     if (str1 ==="#") {

         //         return document.getElementById(str.slice(1));

         //     }else if (str1 ===".") {

         //         return document.getElementsByClassName(str.slice(1));

         //     }else{

         //         return document.getElementsByTagName(str);

         //     }

         // }

         //最终版

         $("#box").style.backgroundColor = "lemonchiffon";

         var claArr = $(".box");

         for (var i = 0; i < claArr.length; i++) {

             claArr[i].style.backgroundColor = "gold";

         }

         var divArr = $("div");

         for (var i = 0; i < divArr.length; i++) {

             divArr[i].style.border = "2px solid #ccc";

         }

         function $(str){

             var str1 = str.charAt(0);

             if (str1 ==="#") {

                 return document.getElementById(str.slice(1));

             }else if (str1 ===".") {

                 return document.getElementsByClassName(str.slice(1));

             }else{

                 return document.getElementsByTagName(str);

             }

         }

     </script>

 </body>

 </html>

javascript 获取节点元素的封装的更多相关文章

  1. JavaScript获取html元素的实际宽度和高度

    一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offs ...

  2. 用javaScript获取页面元素值

    用JavaScript获取页面元素常见的三种方法:                                                           getElementById() ...

  3. javascript 获取iframe元素的方法

    javascript  获取iframe元素的方法 第一种: $("#IframeID").contents().find("div"); 第二种: $(win ...

  4. 【转】JavaScript获取节点类型、节点名称和节点值

    DOM节点信息包括节点类型(nodeType).节点名称(nodeName)和节点值(nodeValue). 节点类型 DOM节点中,每个节点都拥有不同的类型.W3C规范中常用的 DOM节点类型有以下 ...

  5. Javascript获取html元素的几种方法

    1.通过id获取html元素 <!DOCTYPE html> <html> <head lang="en"> <meta charset= ...

  6. 用Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  7. JavaScript获取页面元素的常用方法

    1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...

  8. Javascript获取页面元素相对和绝对位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  9. javascript相邻节点元素获取

    <script> window.onload = function () { var myLinkItem = document.getElementById('linkItem'); v ...

随机推荐

  1. SprngMVC源码学习

    运行helloWorld示例进入调试界面. DispatcherServlet:前端控制器 DispatcherServlet.doDispatch(HttpServletRequest, HttpS ...

  2. 在web.xml中配置监听器来控制ioc容器生命周期

    5.整合关键-在web.xml中配置监听器来控制ioc容器生命周期 原因: 1.配置的组件太多,需保障单实例 2.项目停止后,ioc容器也需要关掉,降低对内存资源的占用. 项目启动创建容器,项目停止销 ...

  3. ASP.NET Forms验证

    /// <summary> /// 执行用户登录操作 /// </summary> /// <param name="config">授权配置信 ...

  4. MySQLi面向对象实践--select

    对于update.insert.delete请参考http://www.cnblogs.com/-beyond/p/8457580.html 执行select,如果SQL语句执行成功,那么返回的是一个 ...

  5. 设备 VMnet0 上的网桥当前未运行。此虚拟机无法与主机或网络中的其他计算机通信。

    http://www.cnblogs.com/baihuitestsoftware/articles/4223552.html 因为试用Windows10教育版下的Docker打开过Hyper-V,虽 ...

  6. postman发送json格式的post请求

    在地址栏里输入请求url:http://127.0.0.1:8081/getmoney 选择“POST”方式, 在“headers”添加key:Content-Type  , value:applic ...

  7. liuyan

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 原生js作用域（红宝书）

    function fn(){ ; alert(a); // 2; } alert(a);//未被定义: alert(b);//全局变量:b=2: ; function fn1(){ ; functio ...

  9. activiti 选人的实现

    activiti默认是不带有选人的功能的,它默认的是在调用complete 方法的时候自动根据下一个节点的 assignee属性或者candidate属性 设置下一节点的候选人或者 assginee. ...

  10. laravel 在nginx服务器上除了首页其余都是404的问题

    nginx对应站点的.conf配置文件添加如下代码 location / { try_files $uri $uri/ /index.php$is_args$query_string; #语法: tr ...