html5-Dom操作

深碍√TFBOYSˉ_ 2022-07-14 00:41 186阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                width: 300px;
                height: 100px;
                margin:10px auto;
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
            <div class="box box1" id="box1"></div>
            <div class="box box3 "></div>
            <div class="box box3"></div>
            <div class="box box4"></div>
    </body>
    <script>
            //        var box1=document.getElementById('box1');
            //     document.querySelector 只会获取符合条件的第一个元素
            //  获取符合条件的第一个元素
            var box1=document.querySelector(".box3");
    
            box1.style.background='red';
    
    
    //------------------获取所有符合条件的标签--------------------------------------------------
            //会获取所有复合条的 标签，返回的是一个数组， 参数：可以是任意 css选择器
            var divs= document.querySelectorAll('div.box');
            //document.queryselectorAll获取所有div下的class类名为box的元素
            console.log(divs);
    
            for(var i=0;i<divs.length;i++){
                divs[i].style.background='red';
            }
    
    </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML DOM style属性操作

dom.style.property:通过元素的style属性间接操作css样式一，修改颜色 title.style.color：修改节点的颜色 <...

た入场券/ 2024年04月19日 10:47/ 0 赞/ 97 阅读

相关 HTML DOM 节点元素操作

一，判断属性 hasAttribute(‘属性名’) ：判断是否有某个属性 //3,判断属性是否存在 console.log(h1.hasAttri...

悠悠/ 2024年04月19日 10:47/ 0 赞/ 106 阅读

相关 HTML DOM节点操作

一，节点内容 innerHTML设置节点内容 <body> <div id="div"> 节点内容 ...

绝地灬酷狼/ 2024年04月19日 09:35/ 0 赞/ 110 阅读

相关 DOM操作HTML（JS加强）

DOM简介和解析HTML DOM 文档对象类型 Document Object Model 文档：标记型文档（HTML/XML）对象：封装属性和行为（方法）

浅浅的花香味﹌/ 2022年09月25日 13:27/ 0 赞/ 177 阅读

相关 html5-Dom操作

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

深碍√TFBOYSˉ_/ 2022年07月14日 00:41/ 0 赞/ 187 阅读

相关 HTML-使用jQuery操作 DOM

DOM操作分为三类： 1. DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() 2. HTML-DOM：用于处理HTML文

电玩女神/ 2022年05月12日 08:30/ 0 赞/ 235 阅读

相关 HTML-JavaScript操作DOM对象

操作DOM DOM：Document Object Model（文档对象模型） ![70][] 节点和节点关系 ![70 1][] 访问节点： 1. 使用ge

叁歲伎倆/ 2022年05月12日 07:48/ 0 赞/ 258 阅读

相关 HTML5 音频 / 视频 DOM 操作

目录 HTML5 音频 / 视频 DOM 操作 HTML5 Audio/Video 方法 HTML5 Audio/Video 属性 HTML5 Audio/Video

清疚/ 2022年05月09日 13:40/ 0 赞/ 299 阅读

相关【HTML5基础】DOM操作

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 文章目录 1.自定义属性 2.鼠标点击时T

╰半橙微兮°/ 2021年12月10日 02:47/ 0 赞/ 385 阅读

相关 JavaScript 操作HTML DOM元素

DOM概念 DOM是文档对象模型的简称，全名为“Document Object Model”，通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

小灰灰/ 2021年09月14日 02:18/ 0 赞/ 667 阅读