js的dom学习笔记（1day）

最新推荐文章于 2024-07-25 08:49:08 发布

前端要加油哇

最新推荐文章于 2024-07-25 08:49:08 发布

阅读量325

点赞数

文章标签： webview elementui vue.js

本文链接：https://blog.csdn.net/m0_68251084/article/details/123547163

版权

<div id="time">2019-9-9</div>
      <script>
          var timer=document.getElementById('time');
          console.log(timer);
          //dir打印我们返回的元素对象，更换查看里面属性和方法
          console.dir(timer);
      </script>

<!-- getElementsByTagName()方法可以返回带有指定标签名的对象的集合 -->
    <ul>
        <li>知否知否1</li>
        <li>知否知否</li>
        <li>知否知否</li>
        <li>知否知否</li>
        <li>知否知否</li>
    </ul>
    <ol id="ol">
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ol>
    <script>
        //返回的是获取过来元素对象的集合，以伪数组的形式存储
        var lis=document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        //我们想要依次打印里面的元素对象我们可以采取遍历方式
        for(var i=0;i<lis.length;i++){
            console.log(lis[i]);
        }
        //如果页面中只有一个li，返回的还是伪数组的形式
        //如果页面没有这个元素返回的空的伪数组的形式
        //父元素.getElementsByTagName('标签名')
        var ol=Element.getElementsByTagName('ol');
        console.log(ol[0].getElementsByTagName('li'));//注意父元素毕竟是单个对象，获取的时候不包括父元素自己
        var ol=document.getElementById('ol');
        console.log(ol.getElementById('li'));//也可以直接用id，id是唯一的
    </script>

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        //innerText和innerHTML区别：
        //1.innerText不识别html标签，去除空格和换行
        var div=document.querySelector('div');
        div.innerText='<strong>今天是：2022';
        //2.innerHTML识别html标签
        div.innerHTML='<strong>今天是：2022</strong>';
        var p=document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
        
    </script>
</body>

<body>
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        //1.getElementsByClassName 根据类名获得某些元素集合
        var boxs=document.getElementsByClassName('box');
        console.log(boxs);
        //2.querySelector根据指定的选择器返回第一个元素对象，注意只是第一个
        //切记里面的选择器要加符合 类选择器. id选择器#
        var firstBox=document.querySelector('.box');
        console.log(firstBox);
        var nav=document.querySelector('#nav');
        console.log(nav);
        //3.querySelectorAll指定选择器所有对象集合返回
        var allBox=document.querySelectorAll('.box');
        console.log(allBox);

        //1.获取body元素
        var bodyEle=document.body;
        console.log(bodyEle);
        //2.获取html元素
        var htmlEle=document.documentElement;
        console.log(htmlEle);
        
    </script>
    
</body>

<body>
    <button>唐伯虎</button>
    <div>123</div>
    <script>
        //点击一个按钮，弹出对话框
        //1.事件是有三部分组成 事件源 事件类型 事件处理程序 也称为事件三要素
        //(1)事件源：事件被触发的对象，谁 按钮
        var btn=document.getElementById('btn');
        //(2)事件类型：如何触发？什么事件，比如鼠标点击（onclick），还是鼠标经过，还是键盘按下
        //(3)事件处理程序：是通过一个函数赋值的方式完成
        btn.onclick=function(){
            alert('点秋香');
        }
        //1.获取事件源
        var div=document.querySelector('div');
        //2.绑定事件
        //div.onclick
        //3.添加事件处理程序
        div.onclick=function(){
            console.log('我被选中了');
        }
    </script>
</body>

练习：显示事件

其中要用的js里面的方法

console.log(date.getFullYear()); //返回当前日期年
console.log(date.getMonth()); //返回月份，月份小于1月的，记得月份+1
console.log(date.getDate()); //返回是几号
console.log(date.getDay()); //周一返回是1，但是周日返回是0

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div,
      p {
        width: 300px;
        height: 30px;
        line-height: 30px;
        color: aliceblue;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>time</p>
    <script>
      //当我们点击了按钮，div里面的文字会发生变化
      //1.获取元素
      var btn = document.querySelector("button");
      var div = document.querySelector("div");
      //2.注册事件 btn被点击了
      btn.onclick = function () {
        // div.innerHTML = "2019-3-2";
        div.innerHTML=getDate();
      }
      function getDate() {
        //格式化日期 年月日
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ["星期日","星期一","星期二","星期三", "星期四","星期五","星期六", "星期日",];
        var day = date.getDay();
        return "今天是:" + year + "年" + month + "月" + dates + "日" + arr[day];
      }
      //元素可以不用添加事件
      var p=document.querySelector('p');
      p.innerText=getDate();

    </script>
  </body>
</html>

上面需要点击事件才能显示元素，而下面只要网页刷新就可以显示元素

总结：1. 对方法的使用还不熟悉，需要多使用

前端要加油哇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的dom学习笔记（1day）

<div id="time">2019-9-9</div> <script> var timer=document.getElementById('time'); console.log(timer); //dir打印我们返回的元素对象，更换查看里面属性和方法 console.dir(timer); </script><!-- getEleme.
复制链接

扫一扫