html+css+JavaScript的学习日常

江畔友人

已于 2023-09-19 20:55:50 修改

阅读量48

点赞数

文章标签：学习 javascript html5

于 2023-09-19 00:12:21 首次发布

本文链接：https://blog.csdn.net/qq_45745362/article/details/133000819

版权

敲代码日常

获取html元素

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹窗广告</title>
    <link rel="stylesheet" href="../iconfont/iconfont/iconfont.css">
</head>
<body>
    <div>第一个div</div>
    <div class="sencond">第二个div</div>
    <div id="third">第三个div</div>
</body>
</html>

<script>
    // 通过元素名进行定位
    var div_ = document.getElementByTagname('div'); 
    
    console.log('div_:' + div_);     // 控制台以列表的形式   返回所有dv标签内容跟 可以通过下标进行定位特定位置的标签元素
    
    var div_1 = document.getElementByTagName('div')[0];
    console.log('div_1:' + div_1);    // 控制台只返回第一个div内容  

    // 通过class 进行定位
    var class_ = document.getElementByclass('sencond');    // 放回 class 为 sencond 的标签内容
    console.log('class_:' + class_);
       
    // 通过id进行定位    
    var id_ = document,getElementByid('third');
    cosole.log('id_');        // 只返回id为third的标签


    // 通过querySelector()  进行查找  只返回第一个匹配的内容
    // document.querySelector(标签名/#id名/.类名/)
    var div_2 = document.querySelector('div');
    console.log(div_2);
    
    // 查找所有匹配的内容  
    // documennt.querySelectorAll('标签名/#id名/.类名');
    var div_3 = document.querySelector('div');
</script>

怎么用JavaScript对html元素进行修改

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹窗广告</title>
    <link rel="stylesheet" href="../iconfont/iconfont/iconfont.css">
</head>
<body>
    <div>以下为添加的元素</div>
    
    <div id="last-div">最后以个div，点击后将被删除</div>
</body>
</html>

<script>
    // 1、创建元素  设置类名为 div-1  添加文本内容
    var create_div = document.createElement('div');
    create_div.className = 'div-1';
    creeate_div.innertext = '添加的内容'；

    // 2、向body标签中添加创建好的div标签
    var body_ = document.getElementsByTagName('body')[0];
    body_.appendChild(create_div);
    
    // 3、触发点击鼠标时间  并将最后一个div删除
    var last_ = document.getElementById('last-div');    // 定位最后一个div的位置
    last_.onclick = function(){                         // 触发点击事件
        last_.remove(last_);                            // 删除最后一个标签
    }    

</script>

如何设置页面蒙板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置页面</title>


    <!-- 设置css样式 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }    
        .first{
            width: 100%;
            height: 1200px;
            background-color: rgb(10, 143, 232);
        } 
        .scencon{
            width: 100%;
            height: 1200px;
            background-color: rgb(21, 20, 20, .3);
            position: absolute;
            top: 0;
            left: 0;
        }    
    </style>

</head>
<body>
    <div class='first'></div>
    <div class='scencon'></div>
</body>
</html>