JavaScript——DOM

DOM操作的作用：

能够改变页面中的所有 HTML 元素
能够改变页面中的所有 HTML 属性
能够改变页面中的所有 CSS 样式
能够对页面中的所有事件做出反应

查找HTML元素

通过id找到HTML元素 -document.getElementById();
通过标签名找到HTML元素 -document.getElementsByTagName();
通过类名找到HTML元素-document.getElementsByClassName();
通过name找到HTML元素-document.getElementsByName();

例：

 <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div id="box">4</div>
    <div name="box1">5</div>
    <div name="box1">6</div>
    <script>
      //​通过标签名找到HTML元素，返回一个数组
      var divs = document.getElementsByTagName('div');
      console.log(divs);
      //​获取divs数组中第一个div,通过下标查询
      console.log(divs[0]);
      //​通过id找到HTML元素
      var box = document.getElementById('box');
      console.log(box);
      //​通过class找到HTML元素
      var boxs = document.getElementsByClassName('box');
      console.log(boxs);
      //​通过name找到HTML元素  
      var box2 = document.getElementsByName('box1');
      //    综上查询并获取标签 为JS 的选择器。作用：选中标签；对其进行功能操作
      //  通过getElements/gerElement 方法；返回的结果都是一个数组
    </script>

改变HTML内容

设置或获取元素节点内HTML ： document.getElementById(id).innerHTML=新的 HTML
设置或获取元素节点内的HTML(含该元素节点自身) document.getElementById(id).outerHTML=新的 HTML
往标签中插入文本内容：innerText

innerHTML和innerText的区别

innerHTML：是从对象的起始位置到终止位置的全部内容，包括HTML标签
innerText：是从对象的起始位置到终止位置的内容，但是去除了HTML标签

例：

<a></a>
<div></div>
<script>
  var a = document.getElementsByTagName('a')[0];
      a.href = 'https://www.baidu.com';
      //innerText 往标签中插入文本内容
      a.innerText='百度一下';
      a.innerHTML='hahahahah';
      console.log(a.outerHTML);

      document.getElementsByTagName('div')[0].innerHTML = '<img>';
      var img = document.getElementsByTagName('img')
      console.log(img)
      img[0].src = 'http://www.xnnews.com.cn/wenyu/lxsj/201807/W020180714849203126898.jpg'
<script>

改变HTML属性

document.getElementById(id).attribute=新属性值

例：

//设置imge标签的src属性
document.getElementById("image").src="landscape.jpg";
//设置a标签的href属性
document.getElementById("a").href="www.baidu.com";

改变CSS样式

document.getElementById(id).style.property=新样式

####　例：

//通过.style设置颜色
document.getElementById("p2").style.color="blue";
//通过.style设置边距
document.getElementById("p2").style.marginLeft=“100px”;

style的封装方法：
<div id="box"></div>
    <script>
      var box = document.getElementById('box');

          function setStyle(el, obj) {
              // 将样式放入到数组中。
              var arr = ["height", "width", "top", "left", "marginLeft", "fontSize"]
              // 遍历传入的对象的属性。我们传入的属性；可能有非string情况
              for (var x in obj) {
  
                  if (typeof obj[x] === "string") { //如果属性对应的值是字符串，则直接赋值
  
                      el.style[x] = obj[x];
  
                  } else { // 如果CSS属性对应的值不是字符串
                      // 用flag 来看作为开关
                      var flag = false;
                      for (var i = 0; i < arr.length; i++) {
                          // 判断一下该属性是否属于；在这个数组中书否有,通过上面的验证；属性的值不是string
                          if (x === arr[i]) { //判断一下是否存在于arr数组
                              flag = true;
                              break;
                          }
                      }
                      // flag默认为true 
                      if (flag) { //如果存在arr内部，则拼接px
                          el.style[x] = obj[x] + "px";
                      } else { //如果不是字符串还不存在于arr，也直接赋值(zIndex,opacity)
                          el.style[x] = obj[x];
                          arr.push(el.x);
                      }
                  }
              }
          }
  
          setStyle(box, {
              color: "red",
              height: 200,
              width: 500,
              backgroundColor: "blue",
              opacity: 0.5
          })
    </script>

改变CSS获取非行内css样式

document.getElementById(id).currentStyle.property=新样式;

注意 ie兼容问题

getComputedStyle(documentgetElementById(id),null).property=新样式;

注意火狐谷歌兼容属性，null指的是是否获取伪元素信息。

例：

兼容处理：
function getElement(ele){
    if(ele.currentStyle){
      return ele.currentStyle;
    }else{
      return getComputedStyle(ele,null);
    };
  };

改变className

document.getElementById(id).className=“类名”

删除className

document.getElementById(id).className=“ ”

例：

<div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script>
      /*calssName属性作用，通过控制元素class中名字变化，从而控制css语言中选择器是否选中某个元
      素，并添加或删除了该元素所具有的所有样式，样式依然存在，只是没有选中这个标签元素（元素对象）*/
      var divs = document.getElementsByTagName('div');
      divs[0].className = ''
      divs[1].className = 'boxs'
      console.log(divs);
    </script>

DOM节点（DOM Nodes）

节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）
在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

图示：

节点属性

nodeName	返回当前节点的节点名字
parentNode	返回当前节点的父节点
children	返回当前节点的子节点（集合）
nextElementSibling	返回当前节点的下一个同级节点
preriousElementSibling	返回当前节点的上一个同级节点
nextSibling	返回当前节点的下一个同级节点
preriousSibling	返回当前节点的上一个同级节点
firstChild	返回当前节点的第一个子节点
childNodes	返回当前节点的子节点（集合）
lastChild	返回当前节点的最后一个子节点

例：

<div id="box">
      比uuh
      <p>我是box中的内容</p>
      <p>我是老二</p>
      <p>我是最小</p>
      
    </div>
    <div id="active">
    <div><a href=""></a></div>
    <div><a href=""></a></div>
    <div><a href=""></a></div>
    </div>
    <script>
      var box = document.getElementById('box');
      var ps = document.getElementsByTagName('p');
      var ac = document.getElementById('active');
      console.log(box);
      //返回当前节点的节点名字
      console.log(box.nodeName);
      console.log(ps[1].nodeName);
      //返回当前节点的父节点
      console.log(ps[1].parentNode);
      //查看父元素节点的节点名字
      console.log(ps[1].parentNode.nodeName);
      //查看DOM节点名字
      console.log(document.nodeName);
      //返回当前元素的子节点的集合
      console.log(ac.children);
      //遍历获取当前节点的子节点的集合里的子节点的集合
      for(var i =0,len=ac.children.length;i<len;i++){
        console.log(ac.children[i].children);
        //获取当前节点的子节点的集合里的子节点的集合的父节点的节点名字
        console.log(ac.children[i].children[0].parentNode.nodeName);
      }
      //返回下一个同胞的元素节点。
      console.log(ps[1].nextElementSibling);
      //返回上一个同胞的元素节点
      console.log(ps[1].previousElementSibling);
      //不推荐
      console.log(ac.childNodes);
      /*node是节点：element是元素，注意区分，元素本身和节点本身不同点
       * 节点：是一个自带很多属性的节点对象，elemnt是浏览器解析过的标签
       * */
      console.log(ps[1].nextSibling);//返回下一个同级节点
      console.log(ps[1].previousSibling);//返回上一个同级节点
      //返回当前节点的第一个子节点
      console.log(box.firstChild);
      //返回当前节点的最后一个子节点
      console.log(box.lastChild);
    </script>

大写节点图示：

创建新的 HTML 元素	- appendChild()
createElement	创建新节点
createTextNode	创建文本节点
appendChild	将新元素作为父元素的最后一个子元素进行添加。
insertBefore	将一个新元素插入到当前节点的某个子节点后面。

例：

<div id="box">
    </div>
    <script>
      //创建一个p标签
      var p =document.createElement('p');
      console.log(p);
      //创建一个文本节点
      var p  =document.createTextNode('hahaha');
      console.log(p);
      //创建一个元素节点
      var data = document.createAttribute('time');
      //给元素属性节点赋值
      data.nodeValue=23;
      console.log(data);
    </script>

---

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

insertBefore

appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。
如果不希望如此，您可以使用 insertBefore() 方法：

例：

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(new,child);
</script>

---

<div class="box">
      <p>我是参照元素</p>
    </div>
     <!-- 自己封装的设置样式的方法 -->
      <script src="../2019.0107-JS/styleMethod.js"></script>
    <script>
      var box = document.getElementsByClassName('box')[0];
      var p = document.getElementsByTagName('p')[0];
      //创建一个新的标签
      var div = document.createElement('div');
      //将一个新元素插入到当前节点的某个子节点后面
      box.insertBefore(div,p);
      //innerText插入一个文本节点；.style.color并改变它的样式；
      div.innerText ='我是新标签';
      div.style.color = 'greenyellow';
      style(div,{
             'width':'100px',
             'height':'200px',
             'border':'2px solid red'
          })
    </script>

由于不存在insertAfter方法，如果要插在当前节点的某个子节点后面，可以用insertBefore方法结合nextSibling属性模拟

例：

parentDiv.insertBefore(s1, s2.nextSibling);
上面代码可以将s1节点，插在s2节点的后面。如果s2是当前节点的最后一个子节点，则s2.nextSibling返回null，这时s1节点会插在当前节点的最后，变成当前节点的最后一个子节点，等于紧跟在s2的后面

删除节点

parentNode.removeChild(child);

例：

<div class="box">
      <p>1</p>
      <p>2</p>
      <p>3</p>
    </div> 
    <script>
      var box = document.getElementsByClassName('box')[0];
      var p = document.getElementsByTagName('p');
      var p2 = p[1];
      console.log(p2);
      //删除元素：removeChild(要删除的对象)；
      box.removeChild(p2);
      console.log(p)
    </script>
---------------通过事件删除一条消息-----------------------------
<div class="box">
      <ul>
        <li>张杰&nbsp;&nbsp;<span>x</span></li>
        <li>谢娜&nbsp;&nbsp;<span>x</span></li>
        <li>胡歌&nbsp;&nbsp;<span>x</span></li>
        <li>何炅&nbsp;&nbsp;<span>x</span></li>
        <li>丽颖&nbsp;&nbsp;<span>x</span></li>
        <li>杨紫&nbsp;&nbsp;<span>x</span></li>
        <li>邓伦&nbsp;&nbsp;<span>x</span></li>
      </ul>
    </div>
    <script>
      /*需求分析：当我点击x，删除x 和 x对应的名字
       * 逻辑分析：
       * 1.获取到所有的被操作的元素数组，在取到被操作的元素对象
       * 2.给每一个x添加点击事件-〉遍历sp数组，再添加点击事件
       * 3.找到被点击的当前元素button对象，在删除当前元素对应的父元素，通过this实现
       */
//      var box = document.getElementsByClassName('box');
        var ul = document.getElementsByTagName('ul')[0];
        var li = document.getElementsByTagName('li');
        var sp = document.getElementsByTagName('span');

        //使用循环
          for (var i = 0,len=sp.length;i<len;i++) {
            sp[i].onclick = function(){
              this.parentNode.parentNode.removeChild(this.parentNode);
              console.log(this)
            }
          }
    
        //使用闭包的方法
        /*function test(){
          for(var i=0,len=sp.length;i<len;i++){
          sp[i].onclick=function(j){
            return  function (){
                ul.removeChild(li[j]);
              }
            }(i);

          }
        }     
        setInterval(test,1000);*/
    </script>   

------------------------表单删除一条数据操作---------------------------------

  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      table{
        border-collapse: collapse;
        width: 350px;
        height: 200px;
        border:3px solid darkcyan;
      }
      table tr td{
        border: 1px solid darkcyan;
        text-align: center;
        color: #000000;
      }
      button{
        width: 40px;
        background: darkcyan;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>成绩</td>
        <td>删除</td>
      </tr>
      <tr>
        <td>001</td>
        <td>张杰</td>
        <td>33</td>
        <td>100</td>
        <td><button>x</button></td>
      </tr>
      <tr>
        <td>002</td>
        <td>胡歌</td>
        <td>30</td>
        <td>95</td>
        <td><button>x</button></td>
      </tr>
      <tr>
        <td>003</td>
        <td>赵丽颖</td>
        <td>28</td>
        <td>90</td>
        <td><button>x</button></td>
      </tr>
      <tr>
        <td>004</td>
        <td>杨紫</td>
        <td>24</td>
        <td>89</td>
        <td><button>x</button></td>
      </tr>

    </table>
    
    <script>
          /*
            需求分析：当我点击button，删除button 和 button对应的学号，名字,年龄，成绩
         * 逻辑分析：
         * 1.获取到所有的被操作的元素数组，在取到被操作的元素对象
         * 2.给每一个button添加点击事件，先遍历bt数组，再添加点击事件
         * 3.找到被点击的当前元素button对象，在删除当前元素对应的父元素，通过this实现
         * 注意：因为浏览器解析时会自动在table下面多加一个tbdoy标签，所以通过this实现时，找父节点的时候要多加一个.parentNode。
         * */
      var tr = document.getElementsByTagName('tr')[0];
      var td = document.getElementsByTagName('td');
      var bu = document.getElementsByTagName('button');
      
      for (var i = 0,len=bu.length;i<len;i++) {
        bu[i].onclick = function(){
          this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
          console.log(this);
        }
      }
    
      //清除整个表单
      var tr = document.getElementsByTagName('tr');
      var dt = document.getElementsByClassName('delete')[0];
      dt.onclick = function(){
        for (var j=1,len=tr.length;j<len;j++) {
          tr[j].innerHTML='';
        }
      }
    </script>


替换节点
replaceChild ( newChild,oldChild ) ;

newChild新的标签（对象）；

oldChild被替换的旧的标签（对象）还是parentNode节点；

例：
<div class="box">
      <p>我是被替换的标签p</p>
    </div>
    <script>
      var box = document.getElementsByClassName('box')[0];
      var p = document.getElementsByTagName('p');
      var boxChild = box.children[0];
      var span = document.createElement('span');
      
      span.innerHTML='新标签';
      box.replaceChild(span,boxChild);
    </script>

克隆节点

cloneNode(true)：克隆节点
注意：因为克隆是所有的都复制，如果被克隆的是id属性，那么我们要改变一下id的值。

例：

<div class="box">我是被克隆的标签
    <p>测试</p>
    </div>
    <div id="box"></div>
    <script>
      var box = document.getElementsByClassName('box')[0];
      var boxID = document.getElementById('box');
      //在boxID节点上添加一个被克隆的box节点。
      boxID.appendChild(box.cloneNode(true));
      box.appendChild(boxID.cloneNode(true));     
    </script>

添加节点

例：（添加练习）

    <div class="box">
          <input type="text" />
          <button>添加</button>
        </div>
        <div id="contetn">
          <h3>添加内容区域</h3>
          <ol>
            <li>我是内容</li>
          </ol>
        </div>
        <script>
      /*需求分析：点击添加，将input中内容添加到添加内容区域
       *逻辑思维：
       * 1.获取被操作元素（对象），button input ol。
       * 2.给nutton对象添加点击事件。
       * 3.获取到input中输入的内容，通过input对象。value属性的值，也就是input中输入的内容。
       * 4.创建li标签。注意：li标签创建要放在innerHTM前面，以防被覆盖。
       * 5.把获取到input中value属性的值，放到li中。
       * 6.把li标签添加到ol字节点中。
       * 7.添加完毕，清空input输入框内容。
       */
      
      var ipt = document.getElementsByTagName('input')[0];
      var btn = document.getElementsByTagName('button')[0];
      var ol = document.getElementsByTagName('ol')[0];
      
      //2
      btn.onclick = function(){
        var li = document.createElement('li');//4
        var iptVal = ipt.value;//3
        li.innerHTML = iptVal;
        ol.appendChild(li);//5
        ipt.value='';//7
      }
  </script>

------------------------------------菜单添加---------------------------------------------------

<div>
      <input type="text" placeholder="菜名" id="ipt1"/><br />
      <input type="text" placeholder="价格" id='ipt2'/><br />
      <button>添加</button>
    </div>
    <div class="box">
      <h3>今日菜品</h3>
      <ol>
      </ol>
    </div>
    <script>
      /*案例需求：菜名，价格，添加，
       * 点击添加，将菜名中内容和价格中内容添加到菜单列表下。
       * 清空input输入框中内容。
       */
      var ipt = document.getElementsByTagName('input')[0];
      var btn = document.getElementsByTagName('button')[0];
      var ol = document.getElementsByTagName('ol')[0];
      
      
      btn.onclick = function(){
        var li = document.createElement('li');
        li.innerHTML = '菜名 ：'+ipt1.value+'<br>'+'价格 ：'+ipt2.value;
        ol.appendChild(li);
        ipt1.value='';
        ipt2.value='';
      } 
</script>       
        
显示和隐藏
例：
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      #box{
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="box">
      
    </div>
    <script>
      /*当我第一次单时，背景色为绿色，第二次点击，背景色为红色
       * 1。获取元素box
       * 2.box添加点击事件
       * 3.声明一个变量小x，让他记录点击的次数，奇数红色，偶数绿色
       * 函数：每次执行一次都是新的初始化过程。
       * 点击事件：执行第一次是初始化，之后每执行一次都是在原有的基础上累加一次。
       */
      
      var box = document.getElementById('box');
      /*
      //方式一：多启动一个函数，每次启动函数都是从初始化开始的，函数方法体
      //中的变量，每次执行完毕会从内存中释放。
      var x = 0;
      box.onclick= function(){
        x++;
        console.log(x);
        if(x%2){
          box.style.backgroundColor='red';
        }else{
          box.style.backgroundColor='green';
        }
      }*/
      
      /*方式二
       * bool=!bool:把bool值反转
      */
      var bool = true;
      box.onclick = function(){
        if(bool == true){
          box.style.backgroundColor='red';
        }else {
          box.style.backgroundColor='green';
        }
        bool =! bool;
      }
    </script>
  </body>
</html>

轮播图案例

案例一<点击切换>：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #view img{
            display: none
        }
        .circle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid red;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div id="view">
        <img src="./img/1.jpg" alt="">
        <img src="./img/2.jpg" alt="">
        <img src="./img/3.jpg" alt="">
    </div>
    <div class="box">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
    <script>
        
     var next = document.getElementById('next')
     var prev = document.getElementById('prev')
     var view = document.getElementById('view')
     var circle = document.getElementsByClassName('circle')

     var x = 0;
     console.log(view.children)
     view.children[0].style.display = 'block'
     circle[0].style.background = 'red'

     next.onclick = function(){
         for(var i = 0 ,len = view.children.length;i<len;i++){
             view.children[i].style.display = 'none'
             circle[i].style.background = ''
         }
         x++
         if(x>2){
             x = 0
         }
         view.children[x].style.display = 'block'
         circle[x].style.background = 'red'
     }
    </script>
</body>

</html>

---

案例二<带点轮播>：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 800px;
            height: 450px;
            overflow: hidden;
            position: relative;
        }

        ul {
            display: flex;
            list-style-type: none;
            position: absolute;
        }

        .cir {
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 200px;
            height: 50px;
            left: 50%;
            margin-left: -100px;
        }

        .circle {
            width: 25px;
            height: 25px;
            border: 2px solid white;
            border-radius: 50%;
        }

        .circle:active {
            background-color: white;
        }
    </style>
</head>

<body>
    <div>
        <ul style="left:-1600px">
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/1.jpg" alt=""></li>
        </ul>
        <div class="cir">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>
    <button>上一张</button>
    <button>下一张</button>
    <script>
        var last = document.getElementsByTagName("button")[0];
        var next = document.getElementsByTagName("button")[1];
        var ul = document.getElementsByTagName("ul")[0];
        var cir = document.getElementsByClassName("circle");
        var index = 0;
        cir[index].style.backgroundColor = 'white';
        last.onclick = function () {
            console.log(parseInt(ul.style.left));
            for (var j = 0, length = cir.length; j < length; j++) {
                cir[j].style.backgroundColor = 'transparent';
            }
            index--;
            if (index < 0) {
                index = 2;
            }
            cir[index].style.backgroundColor = 'white';
            var left = parseInt(ul.style.left) - 800;
            if (left == -2400) {
                left = 0;
            }
            ul.style.left = left + 'px';

        };
        next.onclick = function () {
            console.log(parseInt(ul.style.left));
            for (var j = 0, length = cir.length; j < length; j++) {
                cir[j].style.backgroundColor = 'transparent';
            }
            index++;
            if (index == 3) {
                index = 0;
            }
            cir[index].style.backgroundColor = 'white';
            var left = parseInt(ul.style.left) + 800;
            if (left == 800) {
                left = -1600;
            }
            ul.style.left = left + 'px';
        };
        function test() {
            for (var i = 0, len = cir.length; i < len; i++) {
                cir[i].onclick = function (i) {
                    function inner() {
                        for (var j = 0, length = cir.length; j < length; j++) {
                            cir[j].style.backgroundColor = 'transparent';
                        }
                        this.style.backgroundColor = 'white';
                        if (i == 0) {
                            ul.style.left = '-1600px';

                        } else if (i == 1) {
                            ul.style.left = '-800px';
                        } else if (i == 2) {
                            ul.style.left = '0';
                        }
                    }
                    return inner;
                }(i);
            }
        }
        test();
        function func() {
            console.log(parseInt(ul.style.left));
            for (var j = 0, length = cir.length; j < length; j++) {
                cir[j].style.backgroundColor = 'transparent';
            }
            index++;
            if (index == 3) {
                index = 0;
            }
            cir[index].style.backgroundColor = 'white';
            var left = parseInt(ul.style.left) + 800;
            if (left == 800) {
                left = -1600;
            }
            ul.style.left = left + 'px';
        }
        setInterval(func, 3000);
    </script>
</body>
</html>

Dom选择器

如何使用：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div class="box"></div>
    <div id="one"></div>
    <ul></ul>
    <script>
      function getEL(el){
        if (el.charAt()=='#') {
          var newEL = el.replace('#','')
          return document.getElementById(newEL);
        }else if (el.charAt()== '.') {
          var newEL = el.replace('.','')
          return document.getElementsByClassName(newEL);
        } else{
          return document.getElementsByTagName(el);
        }
      }
      console.log(getEL('#one'));
      console.log(getEL('.box'));
      console.log('ul');
    </script>
  </body>
</html>