<!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. Activiti的BPMN演示工具

    场景是这样的:产品经理不懂技术,又不想安装Java以及Eclipse(需要安装Activiti BPMN Designer的插件). 这两天解决.bpmn的解析(BPMNParser)时顺带找到一个顺 ...

  2. [CNBETA]动图告诉你 光速到底有多慢？

    https://www.cnbeta.com/articles/tech/811381.htm 我们知道,30万公里每秒的光速是宇宙内目前已知的最高速度,至少现有人类理论体系下它是不可跨越的.30万公 ...

  3. 掌上电脑设备可以使用Ubuntu MATE 18.10 Linux映像了

    就在几天前,Ubuntu 18.10发布了.操作系统被称为“Cosmic Cuttlefish”,有多种版本可供选择,除了常见的GNOME -- Xfce (Xbuntu), KDE (Kubuntu ...

  4. 如何在Anaconda中实现多版本python共存

    anaconda中Python版本是3.5,因为爬虫原因,需要Python2.7版本,因此,希望能在anaconda中Python3和Python2共存. 1. 打开Anaconda Prompt,可 ...

  5. Ubuntu 16.04安装Eclipse

    此篇为http://www.cnblogs.com/EasonJim/p/7139275.html的分支页. 前提:必须正确安装JDK和Tomcat. 下载: https://www.eclipse. ...

  6. BZOJ1803Spoj1487 Query on a tree III——主席树

    题目大意 给一棵有点权的n个点的有根树,保证任意两点的点权不同,m次询问每次询问x的子树中权值第k大的点. 输入 先输入n,然后每个点点权,再输入n-1行每行两个数x,y代表x和y相连,再输入m,之后 ...

  7. Java生成多数值二元运算结果集

    看之前大学写过的24点程序中用到的核心计算算法——计算四个值能否计算出24,当时用的c++写的,现用Java重写一遍 程序实现了多个数值(可重复),每个数值只能运算一次,二元运算的条件下获得所有结果集 ...

  8. Watchdogs利用Redis实施大规模挖矿，常见数据库蠕虫如何破？

    背景 2月20日17时许,阿里云安全监测到一起大规模挖矿事件,判断为Watchdogs蠕虫导致,并在第一时间进行了应急处置. 该蠕虫短时间内即造成大量Linux主机沦陷,一方面是利用Redis未授权访 ...

  9. 自学Aruba5.3.1-Aruba安全认证-有PEFNG 许可证环境的认证配置OPEN、PSK

    点击返回:自学Aruba之路 自学Aruba5.3.1-Aruba安全认证-有PEFNG 许可证环境的认证配置OPEN.PSK OPEN.PSK都需要设置Initial Role角色, 但是角色派生完 ...

  10. 架构师成长之路2.3-PXE+Kickstart无人值守大量部署Linux

    点击返回架构师成长之路 架构师成长之路2.3-PXE+Kickstart无人值守大量部署Linux 所谓的无人值守,就是自动应答,当安装过程中需要人机交互提供某些选项的答案时(如如何分区),自动应答文 ...