DOM（一）：获取元素（查）、事件基础、操作元素（改）

最新推荐文章于 2024-07-23 16:19:32 发布

小粉粉hhh

最新推荐文章于 2024-07-23 16:19:32 发布

阅读量1k

点赞数 27

文章标签： css html5 前端

本文链接：https://blog.csdn.net/hdhhdhbsjxbdhvyg/article/details/136495113

版权

dom就是一个接口，用来改变网页的内容结构还有样式

一、获取元素

1、根据ID获取获取元素

<body>
<div id="time">2019-4-10</div>
    <script>
        var timer=document.getElementById(time);
        console.log(timer);
    </script>
</body>

这里的script得写在标签的下面，因为文档从上往下加载，script往前找。

它返回的是dom element 的对象object，如果在当前的document没找到就返回null。

注意：参数大小写区分。

新方法：console.dir打印返回的对象元素，可以更好的查看里面的属性和方法

2.根据标签名获取

根据id的话一次选一个，如果想选很多的话太麻烦了

<body>
    <li>熏香五米听后</li>
    <li>熏香五米听后</li>
    <li>熏香五米听后</li>
    <li>熏香五米听后</li>
    <script>
        var vv=document.getElementsByTagName('li');
        console.log(vv);
    </script>
</body>

返回的是元素对象的集合，以伪数组形式存储，所以还可以打印出来vv[0]

注意：1.因为我们得到的是一个集合，所以你要是想对它们所有的进行操作就得遍历

//通过标签名获取元素,这里的意思是获取全部的li
var lis = document.getElementsByTagName('li');
console.log(lis);  //伪数组[li, li, li, li]
// 我们可以遍历得到里面的每个元素对象
for (var i = 0; i < lis.length; i++) {
    console.log(lis[i]);
}
console.log(typeof lis);  //object
console.log(lis[0]);  //li

2.得到的元素对象是动态的（就是修改内容，但是下面的script代码不用动）

3.如果页面中只有一个li，它返回的还是伪数组

4.如果页面中一个li都没有，返回的是一个空的伪数组

获取某个父标签内的所有指定标签子元素

 <ul>

    <li>熏香五米听后</li>
    <li>熏香五米听后</li>
    <li>熏香五米听后</li>
    <li>熏香五米听后</li>
    </ul>
    <ol id="hh">
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ol>
    <script>
        var oll=document.getElementsByTagName('ol');
        //console.log(oll.getElementsByTagName('li'));
        //这样是不行的，因为oll现在是个数组，不能选中个数组再get、、、得一个的
        console.log(oll[0].getElementsByTagName('li'));
        //更常用的方法是给ol个id然后获取，就不得到数组了就得到一个
       var oll=document.getElementsByTagName('hh');
      console.log(hh.getElementsByTagName('li'));
    </script>

注意：父元素必须是某个单个的对象，获取的时候是不包括父元素的

3.通过html5新增的方法获取

ie9以上才行，不考虑兼容性和移动端可以用

（1）getElemenByClassName（‘类名’）

 <div class="1"> 1</div>
   <div class="2">2</div>
    </ol>
    <script>
        var d=document.getElementsByClassName('1')
        console.log(d);
    </script>

根据类名返回元素对象集合

（2）querySelecter（‘选择器’）根据指定选择器返回第一个元素对象

<div class="box1"> box1</div>
   <div class="box1"> box11</div>
   <div id="box2">box2</div>
   <div id="box2">box22</div>
    </ol>
    <script>
        var d=document.querySelector('.box1')
        console.log(d);
        var t=document.querySelector('#box2')
        console.log(t);
    </script>

（2）querySelecterAll返回指定选择器的全部对象集合

<div class="box1"> box1</div>
   <div class="box1"> box11</div>
   <div id="box2">box2</div>
   <div id="box2">box22</div>
    </ol>
    <script>
        var d=document.querySelectorAll('.box1')
        console.log(d);
        var t=document.querySelectorAll('#box2')
        console.log(t);
    </script>

4.特殊元素获取(body,html)

<script>
        var d=document.body;
        console.log(d);
        var t=document.documentElement;
        console.log(t);
    </script>

二、事件基础

事件就是触发响应的一种机制

1.事件三要素：事件源，事件类型，事件处理程序

（1）事件源，事件出发的对象，我们要对谁操作？
（2）事件类型，事件是如何出发的，是点击（onclick）？还是鼠标经过，还是键盘按下
（3）事件处理程序，通过一个函数赋值，这个事件能实现什么功能

<button id="btn">唐伯虎</button>
    <script>
        var btn=document.getElementById('btn');
        btn.onclick=function(){
            alert('点秋香');
        }
        
    </script>

三、操作元素（核心）

1.修改元素内容

(1)element.innerText

获取系统当前时间

<button>显示当前的系统事时间</button>
   <div>某个时间</div>
   <!-- 点击div之后，button里面的文字会发生变化 -->
    <script>
        var btn=document.querySelector('button');
        var div=document.querySelector('div');
        btn.onclick=function(){
            div.innerText=getData();
        }
        function getData(){
            var data=new Date();
            var year=data.getFullYear();
            var month=data.getMonth();
            var dates=data.getDate();
            var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var day=data.getDay();
            return '今天是：'+year+'年'+month+'月'+dates+'日'+arr[day];

        }
    </script>

点击btn之后，显示系统时间

还可以不点击打开页面就让p显示

function getData(){
            var data=new Date();
            var year=data.getFullYear();
            var month=data.getMonth();
            var dates=data.getDate();
            var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var day=data.getDay();
            return '今天是：'+year+'年'+month+'月'+dates+'日'+arr[day];

        }
        var p=document.querySelector('p');
        p.innerText=getData();

(2)element.innerHtml

用法和Text一样

(3)二者特点

1.element.innerText不识别html标签，所以如果你修改的内容的文字想加粗啥的它都不识别;

而且它还去去除你的空格和换行，span里面的文字和p到一行去了。

element.innerHtml会保留空格换行。

<p>ggg
    <span>你是</span>
   </p>
var p=document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);

2.element.innerText非标准，用的不如element.innerHtml多

3.（共同点）这两个都是可读写的，写就是把里面文字赋值成、、、，读就是能够获取里面的文字

var p=document.querySelector('p');
        console.log(p.innerText);

2.修改元素属性

修改元素的src、href、id、alt、title

案例：根据不同时间，显示不同的图片和问候语

如果上午时间打开页面，显示上午好，显示上午的图片
如果下午时间打开页面，显示下午好，显示下午的图片
如果晚上时间打开页面，显示晚上好，显示晚上的图片

<body>
   <img src="" alt="">
   <div></div>
    <script>
        var img=document.querySelector('img');
        var div=document.querySelector('div');
        //首先就得获取元素
        var date=new Date();
        var h=date.getHours();
        if(h<12)
        {
            img.src='morning.webp';
            div.innerHTML='早上好'
        }
        else if(h>12&&h<18)
        {
            img.src='afternoon.webp';
            div.innerHTML='下午好哇！';
        }
        if(h>18)
        {
            img.src='evening.webp';
            div.innerHTML='晚上好哇！';
        }
    </script>
</body>

3.修改元素属性

<button>按钮</button>
   <input type="hi">
    <script>
        var but=document.querySelector('button');
        var input=document.querySelector('input');
        but.onclick=function(){
            //现在再用innerHTML不管用了，修改input里面的文字需要value
            input.value='我被点击了';
        }
    </script>

//如果想要表单中的按钮只被点击一次然后禁用就用disabled
            but.disabled='true';

而且因为这个函数本来就是btn（写错成but了），所以这里的but.disabled可以改为this.disabled

this指的是事件函数的调用者

京东显示密码明文案例：

核心思路：我们点击按钮之后，将密码框改成文本框（type）

再利用一个flag的值，flag为1时就转换为文本框，flag是0转换为密码框

这里是html、css、js的一个集合

<style>
    .box{
        width: 400px;
        border-bottom: 1px solid #ccc;
        margin: 100px auto ;
    }

    .box input{
        width: 370px;
        height: 30px;
        border: transparent;
        outline: none;
        /* 表单选中边框 outline*/

    }
    img{
        width: 24px;
        height: 30px;
        float: right;
    }
</style>
<body>
   <div class="box">
       <input type="password">
       <label for="">
        <img src="闭眼睛.png" alt="">
       </label>

       <script>
           //得想想哪些元素是需要获取的，首先眼睛图片得点击所以得获取
           //然后input里面类型得改变也需要获取
           //var box=document.querySelector(div);
           var img=document.querySelector('img');
           var inp=document.querySelector('input');
           var flag=0;
           img.onclick=function(){
               if(flag==1)
               {
                img.src='眼睛.png'
                inp.type='text';
                flag=0;
               }
               else{
                   img.src='闭眼睛.png';
                   inp.type='password';
                   flag=1;
               }
            //    img.src='眼睛.png'
            //    inp.type='text';
            //这样写完之后呢发现是可以显示出来了，但是再点击一次睁开的眼睛它也回不去了
            //那怎么让flag变化呢，在if、else里面加
           }
       </script>
   </div>
</body>

4.修改CSS样式属性

点击一个粉盒子，它的颜色会变成紫色，而且宽度变大

<style>
div{
    width: 200px;
    height: 200px;
    background-color: pink;
}
</style>

<body>
  <div></div>
  <script>
      var div=document.querySelector('div');
      div.onclick=function(){
          div.style.backgroundColor='purple';
          div.style.width='300px';
      }
  </script>
</body>

点击叉号关闭淘宝广告案例：

<style>
#cha{
    width: 20px;
    height: 20px;
    /* background-color: pink; */
    border: 1px solid rgb(192, 191, 191);
    position: absolute;
    left:-22px;

}
#cha img{
    width: 20px;
    height: 20px;
}
#code{
    border: 1px solid rgb(192, 191, 191);
    height: 135px;
    width: 100px;
    position: relative;
    margin: 0 auto;
}
#code p{
    font-size: 13px;
    height: 10px;
    width: 100px;
    text-align: center;
    line-height: 10px;
}
#code #codee{
    height: 100px;
    width: 100px;

}

</style>

<body>
   
    <div id="code">
     <div id="cha">
        <img src="304错误、关闭、取消.png" alt="">
     </div>
      <p>手机淘宝</p>
      <img src="二维码.png" alt="" id="codee">
  </div>

  <script>
      var cha=document.getElementById('cha');
      var code=document.getElementById('code');
      cha.onclick=function(){
          code.style.display='none';
      }
        </script>
</body>

点击差号之后就关闭了

js真的很好玩！

注意：如果我们想要在script中修改多个style样式写的会很麻烦

var div = document.getElementById('div');
div.onclick = function () {
    this.style.backgroundColor = 'red';
    this.style.fontSize = '16px';
    this.style.width = '100px';
    this.style.color = 'black';
}

我们可以把这些都写到css里，然后起个类名

.change {
    width: 100px;
    color: black;
    font-size: 16px;
    background-color: red;
}

var div = document.getElementById('div');
div.onclick = function () {
    this.className = 'change';
}

但是如果标签div本来就有类名的话，那么这样写会把原类名直接覆盖，如果想保留原类名，要这么写：
this.className = ‘change 原类名’;
就是把原类名也添进去

5.循环精灵图

就是这种精灵图，以前要写的话不得一个一个量x，y轴吗，那样写太麻烦了

干脆弄个for循环让它自己填进去

（这个精灵图我没有，直接上代码先，这个代码的精灵图是竖着一列的）

var ul = document.getElementsByTagName('ul');
var lis = ul[0].getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
    //注意这个写法，变量要有，单位要有，负号要有，xy轴之间的空格也要有
    //lis[i].style.backgroundPosition = 'x y';
    var index=44*i;
    lis[i].style.backgroundPosition = '0 -' + index + 'px';
}

案例：显示隐藏文本框内容

鼠标点击文本框时，里面的默认文字隐藏，离开文本框时，里面的默认文字又出现

注意：它不能说是鼠标离开和进入，得是得到焦点和失去焦点（onfocus和onblur）

核心：得到焦点之后，表单里面是默认文字清空，不是默认文字保留

<style>
    input{
        width: 200px;
        height: 30px;
        color:rgb(177, 173, 173);
    }
</style>

<body>
    <input type="" value="手机">
    <script>
        var input=document.querySelector('input');
        input.onfocus=function(){
//得到焦点之后不是里面的文字就隐藏，你自己还得输入进去文字呢
           if(this.value=='手机')
           {
            this.value='';
            this.style.color='black';
           }
           
        }
        input.onblur=function(){
            // this.value='手机';不能直接这样，因为得里面没有用户输入的东西才能是手机
            if(this.value=='')
            {
                this.value='手机';
                this.style.color='rgb(177, 173, 173)';
            }
           
        }
    </script>
</body>

案例：密码框验证信息

实现一个密码框，输入密码长度不对的时候提示不对，颜色变红。输入密码长度正确时提示正确，颜色变绿

<style>
    div{
        width: 600px;
        margin: 100px auto;

    }
    .message{
        display: inline-block;
        font-size: 12px;
        color: grey;
        /* background: url('警告.png') no-repeat left center; */
        
    }
    img{
        width: 20px;
        height: 20px;
        
    }
    .wrong{
        color: red;
    }
    .right{
        color:green;
    }
</style>

<body>
    <div class="register">
        <input type="password" class="ipt">
        
        <p class="message">请输入6～16位的密码</p>
    </div>
    <script>
        var input=document.querySelector('input');
        var p=document.querySelector('p')
        input.onblur=function(){
            if(this.value.length<6||this.value.length>16)
            {
                //console.log('错误'); 
                p.className='message wrong';
                p.innerHTML='密码长度不对';
            }
            else{
                p.className='message right';
                p.innerHTML='密码输入正确';
            }
        }
    </script>

  
</body>