<!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. 二维数组转化为一维数组 contact 与apply 的结合

    将多维数组(尤其是二维数组)转化为一维数组是业务开发中的常用逻辑,除了使用朴素的循环转换以外,我们还可以利用Javascript的语言特性实现更为简洁优雅的转换.本文将从朴素的循环转换开始,逐一介绍三 ...

  2. Vert.x简介

    https://vertx.io/ https://vertx.io/download/ https://baike.baidu.com/item/Vert.x 近年来,移动网络.社交网络和电商的兴起 ...

  3. python 授权

    1.“包装”意思是一个已经存在的对象进行包装,不管他是数据类型还是一段代码,可以是对一个已经存在的对象增加新的,删除不要的或者修改其他已经存在的功能 2.包装 包括定义一个类,他的实例拥有标准类型的核 ...

  4. Java关于struts2框架

    今天研究了一下struts2框架,我不太喜欢理论的东西,我研究框架更喜欢打断点一步步跟着去看实现的过程.

  5. html5 画布和SVG的差别

    canvas和SVG可以在浏览器绘制图形,但是本质上是不同的.canves是绘制2d图象,SVG也是绘制2d图象. Canvas是Javascript进行绘图的,是逐像素绘图.Canvas一旦图象绘制 ...

  6. python之random函数

    # random各种使用方法 import random # 随机生成[0.1)的浮点数 print("random():", random.random()) # 随机生成100 ...

  7. TM数据

    qatestjr_xuyue10@vipabc.comqatestjr_xuyue01@vipabc.com jrNHc2 jUBRTEqatestjr_nianyue@vipabc.com QE9E ...

  8. MT【26】ln(1+x)的对数平均放缩

    评:1.某种程度上$ln(1+x)\ge \frac{2x}{2+x}$是最佳放缩. 2.这里涉及到分母为幂函数型的放缩技巧,但是不够强,做不了这题.

  9. SharePoint 2013 event id 8321 错误

    SharePoint 2013里会报8321的错误: A certificate validation operation took 15011.1412 milliseconds and has e ...

  10. django---APIView源码分析

    django---APIView源码分析 前言:APIView基于View 看这部分内容一定要懂django-CBV里的内容 在django-CBV源码分析中,我们是分析的from django.vi ...