DOM案例

最新推荐文章于 2024-08-26 16:38:21 发布

Blueis_oss

最新推荐文章于 2024-08-26 16:38:21 发布

阅读量867

点赞数 22

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Blueis_oss/article/details/140891767

版权

一.什么是DOM

DOM(Document Object Model)文档对象模型的树形结构说白了就是用js操作网页

使用方法:

1.找到对象

2.操作操作网页节点属性改变网页内容....

文档对象模型就是一个树形结构，类似于家谱树

html标签里面包裹了所有的文档内容。他是一个**父亲节点（parent）** 它没有父亲节点，也没有兄弟节点，我们称html标签为树根，也就是**根节点**，整个html表示整个文档。

在html节点内部通常有两个同级节点head和body，html是head的父亲节点，html也是body的父亲节点，他们同一层级并且相互不包含，我们称同属于同一个父亲的节点为**兄弟节点**，而head和body都是html的**子节点**。这样一层一层的关系就是**节点树**。各个标签在页面中都是**元素节点（element node）**

节点（node）的种类

元素节点（element node）

文档对象模型中的标签就是最基本的元素节点。它们层层嵌套形参整个页面。内部可能包含了文本和属性

文本节点（text node）

我们称DOM内的文本为文本节点。文本节点有的被包含在元素节点中的，比如p标签内部的文字。但是有的元素节点没有文本节点，

属性节点（attribute node）

属性节点从属于元素。比如<input type='radio'>其中type='radio'是元素节点p的属性节点。不是所有的元素都有属性节点，但是所有的属性节点都必然属于某一个元素。如：class/id/style

二.通过DOM获取元素的方式

1.document.getElementById //通过ID获取某个元素，所有浏览器兼容

2.document.getElementsByClassName //通过class类名获取,获取是一组,不支持IE8及以下

3.document.getElementsByTagName //通过标签名获取,获取是一组,所有浏览器兼容

4. document.getElementsByName //通过name获取,获取是一组,很少用,所有浏览器兼容

案例

一.实现切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="../../img/1.jpg" alt="" id="pic" width="500" height="500">

    <button id="up">上一张</button>
    <button id="down">下一张</button>

    <script>
        let pic=document.getElementById('pic')
        let up=document.getElementById('up')
        let down=document.getElementById('down')

        let max_pic=5,min_pic=1
        let now_pic=min_pic
        
        //下一张
        down.onclick=function(){
            if(now_pic==max_pic){
                now_pic=min_pic
            }
            else{
                now_pic++
            }
            pic.src=`../../img/${now_pic}.jpg`
        }

        //上一张
        up.onclick=function(){
            if(now_pic==min_pic){
                now_pic=max_pic
            }
            else{
                now_pic--
            }
            pic.src=`../../img/${now_pic}.jpg`
        }
        
    </script>
</body>
</html>

二.鼠标悬浮案例

三.当鼠标移动至小图片时实现切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   
        *{
            padding: 0;
            margin: 0;
        }
        ul,li{
            list-style: none;

            
        }
        li{
            float: left;
        }
        .smallPic{
            width: 100px;
            height: 100px;
            margin: 5px;
            
        }
        .active{
            border: 3px solid #99008288;
        }
    </style>
</head>
<body>
    
    <img class="bigPic" src="../../img/img5.jpg" alt="" width="500" height="500">
    <ul>
        <li class="active"><img class="smallPic" src="../../img/img5.jpg" alt=""></li>
        <li><img class="smallPic" src="../../img/img6.jpg" alt=""></li>
        <li><img class="smallPic" src="../../img/img7.jpg" alt=""></li>
        <li><img class="smallPic" src="../../img/img8.jpg" alt=""></li>
        <li><img class="smallPic" src="../../img/img9.jpg" alt=""></li>
    </ul>

    <script>
        let bigPic=document.getElementsByClassName('bigPic')[0]
        let smallPic=document.getElementsByClassName('smallPic')

        for(let i=0;i<smallPic.length;i++){
            smallPic[i].onmouseover=function(){

                for(let j=0;j<smallPic.length;j++){
                      smallPic[j].parentNode.className=''
                }

                bigPic.src=this.src
                this.parentNode.className='active'
            } 
        }
    </script>
</body>
</html>

四.定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">多喝热水</button>

    <script>
       
        let btn=document.getElementById('btn')
        btn.onclick=function(){
            setTimeout(() => {
                alert('干杯')
            }, 1000);
        }


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

五.图片自动切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="../../img/1.jpg" alt="" id="pic" width="500" height="500">

    <button id="up">上一张</button>
    <button id="down">下一张</button>

    <script>
        let pic=document.getElementById('pic')
        let up=document.getElementById('up')
        let down=document.getElementById('down')

        let max_pic=5,min_pic=1
        let now_pic=min_pic
        
        //下一张
        down.onclick=function(){
            if(now_pic==max_pic){
                now_pic=min_pic
            }
            else{
                now_pic++
            }
            pic.src=`../../img/${now_pic}.jpg`
        }

        //上一张
        up.onclick=function(){
            if(now_pic==min_pic){
                now_pic=max_pic
            }
            else{
                now_pic--
            }
            pic.src=`../../img/${now_pic}.jpg`
        }


       

        setInterval(down.onclick,1000)
    </script>

</body>
</html>

六.自动跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            color: #6cf;
            font-size:30px;
        }
    </style>
</head>
<body>
    <a href="https://www.zol.com.cn/">点击成功 <span>5</span> 秒后跳转到中关村首页</a>

    <script>
        let a =document.getElementsByTagName('a')[0]
        let sec=5

        time=setInterval(function(){
            sec--
            a.innerHTML=`点击成功 <span>${sec}</span> 秒后跳转到中关村首页`
            if(sec==0){
                clearInterval(time)   //关闭触发器
                location.href='https://www.zol.com.cn/' 
                //location对象是用来保存/跳转url 到点自动跳转
            }
        },1000)
    </script>
</body>
</html>