Web-API页面元素DOM

1.DOM简介

DOM：文档对象模型（Document Object Model），是W3C组织处理可拓展标记语言的标准接口，W3C已经定义了一系列的DOM接口，通过这些DOM的接口可以改变网页的内容、结构和样式。

2.DOM树

• 文档：一个页面就是一个文档，DOM中使用document表示
• 元素：页面中的所有标签都是元素，DOM中用element表示
• 节点：页面中的所有内容都是节点（标签、属性、文本、注释等），DOM中用node表示

​ DOM把以上内容都当做对象

3. 获取页面元素元素方式

3.1 通过getElementById()获取页面元素元素

<div id="time">2022-05-23</div>
<script>
    var timer = document.getElementById('time');
    console.log(timer);
</script>

3.2通过getElementsByTagName()获取页面某类元素

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
<script>
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    for (let index = 0; index < lis.length; index++) {
         console.log(lis[index]);            
        }
</script>

3.3getElementsByClassName()，根据类名获取页面某些元素集合

<div id="time" class="box">2022-05-23</div>
<script>
    var boxes = document.getElementsByClassName("box");
    console.log(boxes);
    //方式二，返回指定选择器的第一个元素对象
    var times = document.querySelector('#time');
    console.log(times);
    //方式三，返回指定选择器的所有元素集合的对象
    var lis = document.querySelectorAll('li');
    console.log(lis);
</script>

3.4获取body和html元素

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

4.事件的执行

4.1事件的三要素：事件源、事件类型、事件处理程序

<button id="btn">点我</button>
<span id="spa">时间</span>
<script>
    /* 事件三要素
    事件由三部分组成：事件源、事件类型、事件处理程序
    */
    //1.事件源：事件被触发的对象（按钮······）
    var btn = document.getElementById('btn');
    var spa=document.getElementById('spa');
    //2.事件类型：如何触发，什么事件（鼠标点击、鼠标经过、键盘按下······）
    //btn.onclick
    //3.事件处理程序：通过函数方式完成
    btn.onclick = function() {
        spa.innerText=getDay();
    }

    function getDay() {
        var date =new Date();
        var year=date.getFullYear();
        var month=date.getMonth()+1;
        var day=date.getDate();

        return year+'年'+month+'月'+day+'日';                }
    </script>

4.2常见的鼠标事件

5.案例练习

5.1 关闭广告

<style>
    div{
        width: 400px;
        height: 400px;
        border: 1px solid black;
    }
</style>
<div id="box">
    <button id="btn">关闭</button>
    <div>
       <p>
         1234567894561231215
       </p>  
    </div>        
</div>
<script>
   var button =document.getElementById('btn');
   var box=document.getElementById('box');

   button.onclick=function(){
         box.style.display='none';
   }
</script>

5.2开关

<style>
   .before{
       width: 400px;
       height: 400px;
       background-color: wheat;
   }
   .after{
       background-color: black;
   }
</style>

    <button id="btn">开启</button>
    <div id="box">

    </div>

<script>
    var button=document.getElementById('btn');
    var box=document.getElementById('box');

    //0：关闭，1：开启
    var flag=0;
    button.onclick=function(){
        if(flag==0){
            box.className='before';
    	    button.innerText='关闭';
            flag=1;
         }else {
            box.className='before after';
            button.innerText='开启';
            flag=0;
         }
     }
</script>

5.3用户名的焦点的获得与失去和密码的显示与隐藏

    <div>
        <label for="username">
            用户名 <input type="text" id="username" value="用户名" style="color: #999;">
        </label>
        <br>
        <label>
            密码&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" id="password">
            <button id="btn">显示</button>
        </label>
    </div>

    <script>
        var username = document.getElementById('username');

        // 用户名失去焦点
        username.onblur = function () {
            if (this.value == '') {
                this.value = '用户名';
                this.style.color = '#999';
            }

        }
        // 用户名获得焦点
        username.onfocus = function () {
            if (this.value == '用户名') {
                this.value = '';
                this.style.color = '#333';
            }

        }
       
        // 密码点击显示 ，0：不显示，1：显示
        var password = document.getElementById('password');
        var button = document.getElementById('btn');
        var flag = 1;
        button.onclick = function () {
            if (flag==1) {
                password.type = 'text';
                button.innerText='隐藏';
                flag=0;
            }else {
                password.type='password';
                button.innerText='显示';
                flag=1;
            }
            
        }

    </script>