当前位置：首页 > article >正文

【dom操作基础】案例题1

article 2024/9/23 14:33:13

一、选择元素

使用getElementById、getElementsByClassName、querySeletor选择元素

<body>
    <div id="fatherId" class="falther">
        father内容
        <div class="child">1</div>
        <div class="child2">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
</body>

 // 1、ID获取：document.getElementById获取具有指定id属性的元素（ID唯一）
    var element_id = document.getElementById("fatherId")
    console.log(element_id);
    // 2、className获取：document.getElementsByTagName获取指定标签的所有元素的节点列表
    var element_div = document.getElementsByTagName("div")
    console.log(element_div);
    // 3、标签名获取：document.getElementsByClassName获取指定类名的所有元素列表
    var element_class = document.getElementsByClassName("child")
    console.log(element_class);

二、修改元素

1、写一个修改页面中p标签的内容为“Hello,World!”的函数。
2、写一个在页面中div标签添加类名为".active"的函数。
3、写一个在页面中h1标签移除类名为".title"的函数。

<body>
    <p>pppppp</p>
    <div>-----</div>
    <p>pppppp</p>
    <div>-----</div>
    <p>pppppp</p>
    <div>-----</div>
    <p>pppppp</p>
    <div>-----</div>
    <h1 class="title">标题</h1>
    <h1 class="title">标题</h1>
    <h1 class="title">标题</h1>
    <button onclick="changP()">修改p元素内容</button>
    <button onclick="addClassName()">添加类名到div元素</button>
    <button onclick="removeClassName()">移除类名到div元素</button>
</body>
<script>
    // 1、写一个修改页面中<p>元素的内容为“Hello,World!”的函数。
    function changP() {
        let domPAll = document.getElementsByTagName('p')
        for (let dom of domPAll) {
            dom.innerHTML = "Hello,World"
        }
    }
    // 2、写一个在页面中<div>元素添加类名为".active"的函数。
    function addClassName(){
        let domDivAll = document.getElementsByTagName('div')
        for (const element of domDivAll) {
            element.classList.add('active')
        }
    }
    // 2、写一个在页面中<h1>元素移除类名为".title"的函数。
    function removeClassName(){
        let domH1 = document.getElementsByTagName('h1')
        for (const element of domH1) {
            element.classList.remove('title')
        }
    }
</script>

三、事件处理

1、点击按钮，弹框提示
2、鼠标移入方块显示红色，鼠标移出方块显示绿色
3、事件冒泡
4、事件捕获

1、点击按钮，弹框提示

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
            text-align: center;
            line-height: 200px;
        }
    </style>

2、鼠标移入方块显示红色，鼠标移出方块显示绿色

<body>
    <button onclick="clickFunc()">点击</button>
    <div class="box" onmouseover="changeRed()" onmouseout="changeGreen()">方块</div>
</body>
<script>
    // 1、点击按钮，弹框提示
    function clickFunc(){
        alert("Hello World")
    }
    //2、 鼠标移入方块显示红色，鼠标移出方块显示绿色
    function changeRed(){
        document.querySelector(".box").style.backgroundColor = "red"
    }
    function changeGreen(){
        document.querySelector(".box").style.backgroundColor = "green"
    }
</script>

3、事件冒泡

<body>
    <div class="father">
        <div class="child">1</div>
        <div class="child">1</div>
        <div class="child">1</div>
    </div>
</body>
<script>
    document.querySelector(".father").onclick = function () {
        console.log("父级被点击");

    }
    let children = document.querySelectorAll(".child")
    for (const element of children) {
        element.onclick = function () {
            console.log("子元素被点击");
        }
    }
    /* 事件冒泡：当在一个元素上触发某个事件后，
    这个事件会逐级向上传递到该元素的父元素，直至传递到文档的根元素（document）。
    如上案例中我点击子元素child触发father事件
    */
</script>

4、事件捕获

<body>
    <div class="father">
        <div class="child">1</div>
        <div class="child">1</div>
        <div class="child">1</div>
    </div>
</body>
<script>
    document.querySelector(".father").onclick = function () {
        console.log("父级被点击");

    }
    let children = document.querySelectorAll(".child")
    for (const element of children) {
        element.onclick = function () {
            console.log("子元素被点击");
        }
    }
    /* 事件冒泡：当在一个元素上触发某个事件后，
    这个事件会逐级向上传递到该元素的父元素，直至传递到文档的根元素（document）。
    如上案例中我点击子元素child触发father事件
    */
</script>

四、创建、删除元素

1、在ul元素里新增li元素
2、删除页面第一个p元素

<body>
    <ul>
        <li>1</li>
    </ul>
    <button onclick="addLi()">新增li元素</button>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <button onclick="deleteP()">删除第一个p元素</button>
</body>
<script>
    function addLi() {
        // 创建li元素
        let li = document.createElement('li')
        li.innerText = "2"
        // ul元素新增li元素
        document.querySelector('ul').appendChild(li)
    }
    function deleteP(){
        let pAll = document.querySelectorAll('p')
        document.body.removeChild(pAll[0])
    }

</script>

五、样式操作

1、设置一个把页面所有h1元素文字变成红色的函数
2、设置一个把img元素都隐藏的函数

    <h1>标题1</h1>
    <h1>标题1</h1>
    <h1>标题1</h1>
    <h1>标题1</h1>
    <h1>标题1</h1>
    <button οnclick="changeColor()">改变全部h1颜色</button>
    <img src="https://so2.360tres.com/dmfd/400_300_/t0110e5ad0726405f0e.jpg" alt="">
    <img src="https://so2.360tres.com/dmfd/400_300_/t0110e5ad0726405f0e.jpg" alt="">
    <img src="https://so2.360tres.com/dmfd/400_300_/t0110e5ad0726405f0e.jpg" alt="">
    <button οnclick="hideImg()">隐藏所有图片</button>
</body>
<script>
    function changeColor() {
        let h1All = document.querySelectorAll("h1")
        for (const element of h1All) {
            element.style.color = 'red'
        }
    }
    function hideImg(){
        let imgAll = document.querySelectorAll("img")
        for (const element of imgAll) {
            element.style.display ='none'
        }
    }
</script>

查看全文

http://www.kler.cn/news/316189.html