html5-Dom操作

深碍√TFBOYSˉ_ 2022-07-14 00:41 146阅读 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 条评论，146人围观）

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

相关阅读

相关 html5 shadow dom,shadow dom解析

本文作者：IMWeb ouven 未经同意，禁止转载 1.shadowdom解析 1.1 什么是shadow dom 先看个例子: 这样一个标签可以在浏览器产生几个界

浅浅的花香味﹌/ 2022年10月07日 00:43/ 0 赞/ 205 阅读

相关 DOM操作HTML（JS加强）

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

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

相关 DOM笔记（四）：HTML 5 DOM复杂数据类型

HTML 5 DOM定义了一下集合、列表等复杂的数据类型用于实现便捷的操作。相对于HTML 4 DOM，HTML 5 DOM增加了HTMLCollection、DOMTok

末蓝、/ 2022年08月06日 01:27/ 0 赞/ 160 阅读

相关 html5-Dom操作

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

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

相关 AngularJS系列(七)——HTML DOM操作

ng-disabled 指令 <div ng-app > <p> <buttonng-disabled="my

迷南。/ 2022年06月08日 00:08/ 0 赞/ 150 阅读

相关 HTML-使用jQuery操作 DOM

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

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

相关 HTML-JavaScript操作DOM对象

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

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

相关 HTML5 音频 / 视频 DOM 操作

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

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

相关【HTML5基础】DOM操作

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

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

相关 JavaScript 操作HTML DOM元素

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

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