<!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. Linux虚拟机下与主机通信

    1.更改虚拟机ip和主机ip同一网段 2.配置虚拟机的网络适配器 3.主机进行ping测试

  2. Windows10 RedStone 1使用Bash体验

    很多年前,记得在Windows Server2008的Feature里发现了Windows Subsystem For Unix,当时也不知道干啥用的,还以为是Samba协议用的呢. 今天,发现Win ...

  3. Angular $scope和$rootScope

    <!DOCTYPE html><html ng-app='myModule'><head lang="en"> <meta charset ...

  4. Jquery Jquery对象和DOM对象的微妙联系

    声明变量 var  $variable=             Jquery 对象: var  varibake=             DOM对象: var $cr= $("#id&q ...

  5. FICO模块

  6. 机器学习中的降维算法：ISOMAP & MDS

    参见:https://blog.csdn.net/Dark_Scope/article/details/53229427

  7. Linux基础学习（1）--Linux系统简介

    第一章——Linux系统简介 1.UNIX和Linux发展史: 1.1 unix发展史: (1)1965年,美国麻省理工学院(MIT).通用电气公司(GE)及AT&T的贝尔实验室联合开发Mul ...

  8. Macbook系统环境安装wget的2个方法 - 传统包及Homebrew安装

    文章目录 这里有2个方法可以安装wget命令工具: 考虑到自身项目的拓展需要,朋友建议学习Python爬虫这样对于做大数据采集有较大的帮助,老蒋虽然每天也都接触一些脚本和程序的修改,但是并没有专业和系 ...

  9. docker--compose--sonarqube

    Create this docker-compose.yml file: version: "2" services: sonarqube: image: sonarqube po ...

  10. mvc Filters 过滤器

    项目需要控制controller和action的访问权限. 看了下资料,发觉还是很方便的. 首先在mvc项目下创建一个文件夹 Filters, 然后在Filters中创建一个类.代码如下 namesp ...