web前端：15_DOM与BOM操作(上)

最新推荐文章于 2024-10-08 12:21:22 发布

weixin_45906368

最新推荐文章于 2024-10-08 12:21:22 发布

阅读量37

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45906368/article/details/131719803

版权

该文介绍了如何使用JavaScript操作DOM，包括通过ID、类名和标签名选择元素，修改文本内容和元素属性，以及改变样式。此外，还展示了交互事件的使用，如点击事件和图片切换功能。

摘要由CSDN通过智能技术生成

复习链接:  http://c.biancheng.net/view/9360.html
事件对象： https://www.runoob.com/jsref/dom-obj-event.html

1,初始DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- DOM文档对象模型--让js和html/css之间产生联系
        DOM树  --一个网页文档里的内容（图片，文本，样式），在网页底层是用树形结构保存的。树里面每个分支的终点叫做node（节点）
                每个节点/元素都是一个对象，都有自己相应的属性和方法
                Document对象是DOM的根部。是所有节点的根节点，可以通过Document访问网页里的所有内容 -->
    <!-- 操作网页元素 ： 1，找出元素  2，对元素实施操作 -->
    
</body>
</html>

2,DOM元素的选中方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM选中元素</title>
</head>
<body>
    <div id="box">多喝热水</div>
    <div class="water">1</div>
    <div class="water">2</div>
    <div class="water">3</div>
    <div class="water">4</div>

    <p>的v</p>
    <p>十八日投入</p>
    <p>按别</p>
    <p>然鹅问题</p>

    <script>
        // 通过id名获取元素
        let box = document.getElementById('box')
        box.innerText = '多喝岩浆'   //改文字
        console.log(box,typeof box)
        // 通过class来获取元素  数组
        let water = document.getElementsByClassName('water')
        console.log(water,typeof water)
        water[0].innerText = '些许欣慰和'
        water[1].innerText = '问的'
        water[2].innerText = '请问v人'
        water[3].innerText = '些特别'
        // 通过标签名获取元素  数组需要指定  伪数组，只能单个修改（添加下标）
        let p = document.getElementsByTagName('p')[0]  //只获取第一个p标签
        p.innerText = 'eu'
    </script>
</body>
</html>

3，DOM操作文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">更舒服</div>

    <div class="water"></div>
    <div class="water"></div>
    <div class="water"></div>
    <div class="water"></div>

    <script>
        // innerText  读取/修改元素里的文本内容（不识别标签）
        let box = document.getElementById('box')
        box.innerText = 'edchjbu'   //修改文本内容
        console.log(box.innerText)  //显示文本内容

        // innerHTML  读取/修改元素里的文本内容（识别标签）  可看可改
        let water = document.getElementsByClassName('water')
        water[0].innerHTML = '<h1>歌舞成功</h1>'
        water[1].innerHTML = '<b>因为车间</b>'
        water[2].innerHTML = '<u>歌舞成功</u>'  //识别标签，有下划线
        // water[3].innerHTML = '<h1>歌舞成功</h1>'
        console.log(water[0].innerHTML)  //带标签显示
        console.log(water[0].innerText)  //只显示文字

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

4，DOM操作元素属性/样式

属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作元素属性</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: #096;
        }
        .ky{
            width: 700px;
            height: 700px;
            background-color:rebeccapurple;
        }
    </style>
</head>
<body>
    <img src="img/05.jpg" alt="">
    <p title="qejubecuij">百万册u全国</p>
    <div class="box"></div>
    <div class="ky"></div>

    <script>
        let img = document.getElementsByTagName('img')[0]  //加下标
        console.log(img.src)  //显示图片路径  √
        img.src = 'img/5.jpg'  //修改内蓉属性  √
        img.title = '给我换个墙壁'    //获取元素的资源标题
 
        let box = document.getElementsByClassName('box')[0]
        box.className = 'ky'  //改变元素样式属性
    </script>
</body>
</html>

样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作元素样式</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #096;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p id="hot">GFUYWEG</p>

    <script>
        // 元素名.style.样式名  修改css样式
        let hot = document.getElementById('hot')
        hot.style.color = 'gold'
        hot.style.fontSize = '79px'

        let  box = document.getElementsByClassName('box')[0]
        box.style.backgroundColor = 'pink'
        box.style.border = '3px solid red'
        
    </script>
</body>
</html>

操作样式案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div id="box"></div>

    <!-- 我需要一个功能，让我可以自己创建一个盒子
        宽度/高度/颜色不固定 ，每次进入网页的时候都可以设置修改
        ！每次写CSS代码很麻烦 -->

        <script>
            let width = Number(prompt("请输入盒子的宽度"))
            let height = Number(prompt("请输入盒子的高度"))
            let color = prompt("请输入盒子的颜色")

            let box = document.getElementById('box')
            box.style.width = `${width}px`
            box.style.height = `${height}px`
            box.style.backgroundColor = color  //DOM中队CSS的命名进行'小驼峰’命名
        </script>
    
</body>
</html>

5，交互事件（even）

案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
           #box{
            width: 200px;
            height: 200px;
            background-color: #096;
        }
    </style>
</head>
<body>
    <!-- 用户跟网页内容产生交互时的操作：
        按下键盘/单机鼠标/双击鼠标/输入文本/点击指定位置
        事件触发时，有js监听器，获取交互情况，再运行对应的功能 -->

<!--事件流程:
	1.获取事件对象   会基于什么进行交互
	2.绑定监听事件  
		事件对象.监听事件 = function(){}   当触发事件时,执行函数里的功能
		box.onclick = function(){功能代码}   当点击box时.触发功能

在获取到元素后.可以用this表示当前的对象-->

        
       <div id="box"></div>


       <script>
        let box = document.getElementById('box')

        let is_gree = true   //默认情况下是绿色

        // 当我点击盒子时，如果它是绿色就变为蓝色，否则变为绿色
        box.onclick = function(){
            if(is_gree){   //值为真。盒子为绿色。把盒子改为红色，再把is_green改为false
                this.style.backgroundColor = "red"
                is_gree = false
            }else{      //值为假。盒子不为绿色。把盒子改回绿色，再把is_green改为true
                this.style.backgroundColor = "#096"
                is_gree = true
            }
        }


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

案例2：图片切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="img/01.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')

        // 一共5张图片，图片最大值为5，最小值为1.如果现在是第五张继续点击返回第一张
        let MaxPic = 5,MinPic = 1
        let now_Pic = MinPic   //默认情况下打开图片后为第一张
        // 上一张
        up.onclick = function(){
            if(now_Pic == MinPic){
                now_Pic = MaxPic    //如果当前是第五张，就把图片换为图片1
            }else{
                now_Pic--
            }
            pic.src = `img/${now_Pic}.jpg`

        }   //交互事件

        // 下一张
        down.onclick = function(){
            if(now_Pic == MaxPic){
                now_Pic = MinPic    //如果当前是第五张，就把图片换为图片1
            }else{
                now_Pic++
            }
            pic.src = `img/${now_Pic}.jpg`
        }
    </script>
    </body>
</html>