【无标题】H5C3进阶——DOM-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_47770336/article/details/122691437

文章目录

多媒体标签vaudio video

    <!-- audio:音频 -->
    <!-- controls：音频播放器的控制器面板 -->
    <!-- autoplay: 自动播放 -->
    <!-- loop: 循环 -->
    <!-- <audio src="../为何没有趁早.mp3" controls autoplay></audio> -->


    <!-- video:视频 -->
    <!-- width: 宽度
        height: 高度
        poster: 当视频还没完全下载，或者用户还没点击播放前的默认显示的封面。默认显示当前视频文件的第一帧
    -->
    <!-- 注意：当设置宽高的时候，一般情况下只会设置宽度或高度，会自动的等比缩放，若同时设置宽高视频尺寸不会真正的调整到指定的宽高，除非刚好等比 -->
    <!-- <video src="../video/说谎不打草稿.mp4" controls poster="../images/cgs.jpg" width="200" height="280"></video> -->

<!-- source的使用： -->
<!-- 因为不同浏览器支持的视频格式不同，所以我们进行视频添加的时候要考虑到浏览器是否支持。
    我们可以准备多个格式的视频文件，让浏览器自动选择 -->
    <video>
        <source src="../video/说谎不打草稿.flv" type="video/flv">
        <source src="../video/说谎不打草稿.mp4" type="video/mp4">
        您的浏览器不支持此格式的视频
    </video>

DOM操作

    <style>
        .pink {
            color: pink;
        }
        .green {
            color: green;
        }
        .blue {
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li class="pink">前端</li>
        <li class="green">java</li>
        <li id="blue">python</li>
    </ul>

    <script>
        // 获取第一个li标签
         window.onload = function(){
            // getElementsByTagName获取的是数组
            // 索引：不直观  以后的数据都是从后台动态获取，前台动态生成添加
            // var cli = document.getElementsByTagName("li")[0];
            // console.log(cli);

            // query: 查询 Selector：选择器  querySelector(传入选择器名称)
            //querySelector：获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素 
            //参数要求：如果是类选择器，必须加'.' 如果是id选择器，必须加#
            //否则当成标签处理
            var javaLi = document.querySelector(".green");
            var pyLi = document.querySelector("#blue");
            console.log(javaLi);
            console.log(pyLi);


            //querySelectorAll 获取满足条件的所有元素---数组
            var allLi = document.querySelectorAll("li");
            // var allLi = document.querySelectorAll("li")[0]; 需要索引，加下标
            console.log(allLi);
         }
    </script>

类样式操作

<style>
        .pink {
            color: pink;
        }
        .green {
            color: green;
        }
        .blue {
            color: blue;
        }
        .underline {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <ul>
        <li class="pink">前端</li>
        <li>java</li>
        <li>python</li>
        <li>c++</li>
    </ul>

<input type="button" value="为第一个li元素添加样式" id="add">
<input type="button" value="为第一个li元素移除样式" id="remove">
<input type="button" value="为第三个li元素切换样式" id="toggle">
<input type="button" value="判断第四个li元素是否包含某个样式" id="contain">
    <script>

         window.onload = function(){
            //add: 为元素添加指定名称的样式，一次只能添加一个样式
            document.querySelector("#add").onclick=function(){
                //classList: 当前元素的所有样式列表--数组
                document.querySelector("li").classList.add("pink");
                // document.querySelector("li").classList.add("underline");添加多个，再来一次
            }

            //remove: 为元素移除指定名称的样式(不是移除class属性)，一次只能移除一个样式
            document.querySelector("#remove").onclick=function(){
                document.querySelector(".pink").classList.remove("pink");
            }

            //toggle：切换元素的样式，如果元素之前没有指定名称的样式则添加，如果有则移除
            document.querySelector("#toggle").onclick=function(){
                document.querySelectorAll("li")[2].classList.toggle("green");
            }

            //contains: 判断元素是否包含指定名称的样式，返回true/false
            document.querySelector("#contain").onclick=function(){
                var isContain = document.querySelectorAll("li")[3].classList.contains("blue");
                console.log(isContain);
            }

            //获取样式
            var result = document.querySelector("li").classList.item(0);
            console.log(result);
        }
    </script>

自定义属性

    <!-- 定义 -->
    <!-- 规范 
        1.data-开头
        2.data-后必须至少有一个字符,多个单词使用-连接
    建议：
    1.名称应该都使用小写--不包含任何的大写字符
    2.名称中不要有任何的特殊符号
    3.名称不要用纯数字
    -->
    <p data-school-name="itdast">费利克斯</p>

    <!-- 取值 -->
    <script>
        window.onload=function(){
            var p = document.querySelector("p");
            // 获取自定义属性值
            // 将data-后面的单词使用camel命名法连接:必须使用camel命名法获取值否则可能无法获取到值
            // var value = p.dataset["schoolname"]; //data-schoolname
            var value = p.dataset["schoolName"]; //data-school-name
            console.log(value);
        }
    </script>