<!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. JSP中properties文件的路径问题

    做练习的时候,写了个properties文件,放在src/servlet/目录下,访问文件问题花了点时间折腾,最终得到解决,记下. 环境:eclipse jee oxygen,tomcat 9.0. ...

  2. 2017BUAA软工个人项目之数独生成与求解

    1.项目GitHub地址:https://github.com/ZiJiaW/Soduko (由于一开始把sudoku看成了soduko,于是名字建错了,读起来可能有点奇怪…) 2.项目PSP表格如下 ...

  3. Kitematic - VirtualBox is not installed. Docker for windows 10

    Kitematic - VirtualBox is not installed. Docker for windows 10 https://github.com/docker/kitematic/i ...

  4. A glance for agile method

    看看Apache最新的JIRA,新版的JIRA是有Agile模块的. Scrum早有耳闻,接触得也比较多,Kanban一次面试中提到过.今日深入查阅KanBan: http://www.agilewe ...

  5. ASP.NET Web Service 标准SOAP开发案例代码（自定义验证安全头SOAPHeader）

    using System.Xml;using System.Xml.Serialization;using System.Web.Services.Protocols;using System.Con ...

  6. php 文件上传 $_FILES 错误码

    假设文件上传字段的名称file_name,则: $_FILES['file_name']['error']有以下几种类型 1.UPLOAD_ERR_OK 其值为 0,没有错误发生,文件上传成功. 2. ...

  7. [同事转帖] .net core的服务器模式和工作站模式

    发现自己的服务器上面的进程占用越来越厉害 所以就跟同事讨论了一下 性能组同事 说已经发现 并且给了一个 网址 这里转帖记录一下 避免以后找不到. .NET Core是一个开源通用的开发框架,具有跨平台 ...

  8. FICO基础知识（二）

    FI中的maser data: COA (Chart Of Account)  科目表 Account 科目 Vendor master dada  供应商主数据 Customer master da ...

  9. LOJ116 有源汇有上下界最大流（上下界网络流）

    考虑有源汇上下界可行流:由汇向源连inf边,那么变成无源汇图,按上题做法跑出可行流.此时该inf边的流量即为原图中该可行流的流量.因为可以假装把加上去的那些边的流量放回原图. 此时再从原来的源向原来的 ...

  10. windows service 安装/卸载

    第一种方法: 前提: Service1 中的serviceProcessInstaller1设置 Account为localSystem 1. 开始 ->运行 ->cmd(管理员身份运行) ...