DOM(一）

已于 2022-03-07 20:09:14 修改
阅读量263 收藏
点赞数
分类专栏： js 文章标签： javascript 开发语言
于 2022-03-05 10:13:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45102392/article/details/123286169
版权

1.获取网页元素

1 根据id获取

2 根据标签获取

还可以获取某个父元素中内部指定标签名的子元素

3 HTML5新增三个函数

 

 2.获取body，HTML元素

3.点击不同按钮显示不同图片，鼠标悬停有提示语

效果 

 

 4.根据标签获取不能直接写img.scr，因为是一个伪数组，用querySelector可以直接用img,scr

表单里的值用value改变,普通盒子如div用innerHTML，disabled禁用

仿密码输入

 <style>
        .a{
            position: relative;
        width: 200px;
        height: 25px;
        margin: 20px auto;
        border-bottom: 1px solid #ccc;
    }
    .a input{
        width: 150px;
        height: 20px;
        border: 0;
        outline: none;
    }
    .a img{
        position: absolute;
        right :0;
        bottom: 0;
      width: 24px;
      height: 24px;
    }
  </style>
</head>
<body>
  <div class="a">
 <input type="password">
    <img src="./close.png" alt="">

  </div>  
  <script>
      var input=document.querySelector('input')
      var img=document.querySelector('img')
      var flag=0
      img.onclick=function() {
        if(flag==0){
            input.type="Text"
            img.src="./open.png"
            flag=1
        }
        else{
            input.type="password"
            img.src="./close.png"
            flag=0
        }
      }
  </script>

修改样式属性element.style.....

  // 1. 获取元素
        var div = document.querySelector('div');
        // 2. 注册事件 处理程序
        div.onclick = function() {
            // div.style里面的属性 采取驼峰命名法 
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }

点击一个键关闭全部属性box.style.display='none'

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
    .box{
        position: relative;
        width: 200px;
        height: 200px;
        margin:20px,auto ;
    }
    
    .b{
        position: absolute;
        top:0;
        right: 0;
    }
  </style>
</head>
<body>
 <div class="box">
  <img class="a" src="./wrong.png" alt="">
  <img class="b" src="./tao.png" alt="">
 </div>
 <script>
     var btn=document.querySelector('.a')
     var box=document.querySelector('.box')
     btn.onclick = function() {
            box.style.display = 'none';
     }

     
 </script>

 循环精灵图

  <style>
    
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        .big{
          width: 130px;
          height: 100px;
          margin: 10px auto;
        }
        .big li{
          float: left;
          width: 24px;
          height: 24px;
          margin-left: 5px;
          margin-top: 5px;
          background-color: pink;
          background: url(./sprite.png) no-repeat;
         
        }
  </style>
</head>
<body>
<div class="big">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script>
  // 1. 获取元素 所有的小li 
  var lis = document.querySelectorAll('li');
  for (var i = 0; i < lis.length; i++) {
      // 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标
      var index = i * 44;
      lis[i].style.backgroundPosition = '0 -' + index + 'px';
  }
</script>

得到焦点onfocus，失去焦点onblur 

  <style>
   input{
     color: #999;
   }
  </style>
</head>
<body>
<input type="text " value="手机">
<script>
  var a=document.querySelector('input')
  a.onfocus=function(){
    if(a.value==='手机')
    a.value=''
    a.style.color ='black'
  }
  a.onblur=function(){
    if(a.value==='')
    a.value='手机'
    a.style.color ='#999'
  }
</script>

 .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
            // this.className = 'change';
            this.className = 'first change';

注册密码框

 <style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        
        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }
        
        .right {
            color: green;
            background-image: url(images/right.png);
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        // 首先判断的事件是表单失去焦点 onblur
        // 如果输入正确则提示正确的信息颜色为绿色小图标变化
        // 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
        // 因为里面变化样式较多，我们采取className修改样式
        // 1.获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2. 注册事件 失去焦点
        ipt.onblur = function() {
            // 根据表单里面值的长度 ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('错误');
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }
        }
    </script>
</body>

表单元素用value ，元素内容用innerHTML

属性都是用字符串表示

百度换肤

   <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: url(images/1.jpg) no-repeat center top;
        }
        
        li {
            list-style: none;
        }
        
        .baidu {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        
        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        
        .baidu img {
            width: 100px;
        }
    </style>
</head>

<body>
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <script>
        // 1. 获取元素 
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 循环注册事件 
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // this.src 就是我们点击图片的路径   images/2.jpg
                // console.log(this.src);
                // 把这个路径 this.src 给body 就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

 onmouseout onmouseon

表格隔行变色

 <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

实现全选，反选。

var flag=false 应放在第一个循环内，否则flag变不回true

 b[i].checked=this.checked //   this.checked不用加  '   '   

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function() {
                // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
            }
            // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

qqdef
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript获取dom的下一个节点方法
10-25
主要介绍了javascript获取dom的下一个节点方法,实现在页面点击加减按钮数字的累加，需要的朋友可以参考下
JavaScript进阶篇（汇总+详解）
Ifeng_iPhone的博客
07-26 7162
个人总结了关于JavaScript的基础、进阶以及小项目，包括基础语法、对象、内置对象、BOM、DOM等知识点，小项目有省市选择栏、用户注册校验、计算器的实现等。
2024年最新前端提高篇（四）JS进阶3数字和二进制，web开发毕业谁
最新发布
2401_84435942的博客
05-07 293
数据以二进制存储，当小数转化为二进制时，精度会有些丢失，出现无限循环的情况，二进制位数越多，才越接近这个小数，但不能等于这个小数。有的小数和其他小数的无限循环互补，结果是和我们平常计算的结果是吻合的，抵消了无限循环带来的精度丢失的问题。14，对前端性能优化有什么了解？13，javascript 的垃圾回收机制讲一下,谈谈对事件代理的理解。5，两栏布局，左边固定，右边自适应，左右不重叠。10，ES6 的 class 和构造函数的区别。整数只要在安全范围内，不会有精度丢失的问题。2，如何实现一个最大的正方形。
Js高级进阶
weixin_41325924的博客
03-02 3849
一、面向对象 (1) 通过class 关键字创建类 类名 我们还是习惯性定义首字母大写 (2) 类里面有个 constructor 函数 可以接受传递过来的参数 同时返回实例对象 (3) constructor 函数 只要 new 生实例时 就会自动调用这个函数 如果我们不写这个函数 类也会自动生成这个函数 (4) 生成实例 new 不能省略 (5) 最后注意语法规范 创建类 类名后面不要加小括号 生成实例 类名后面加小括号 构造函数不需要加 function 1.创建类和生成实例 <..
JS进阶总结
weixin_53072248的博客
08-13 333
一、作用域1. 函数作用域2. 块级作用域3. 全局作用域二、作用域链三、垃圾回收机制3.1 引用计数法3.2 标记清除法（常用）四、闭包五、变量提升六、函数进阶6.1 函数提升6.2 函数参数6.3 拓展：展开运算符...七、箭头函数7.1 基本语法7.2 箭头函数参数7.3 箭头函数 this 指向八、解构赋值8.1 数组解构8.2 对象结构九 、forEach 方法十、构造函数10.1 new 实例化执行的过程10.2 实例成员和静态成员10.3 内置构造函数十一、面向对象10.1 编程思想。
JS进阶学习(作用域、函数进阶、解构赋值、原型链)
L19541216的博客
04-09 515
两大编程思想pop 面向过程oop 面向对象面向对象具有灵活、代码可复用，容易维护和开发的优点，更适合多人合作的大型软件项目。面向对象的特性：封装性继承性多态性。
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取...element.firstChild：该元素的第一个子节点。 element.lastChild：该元素最后一个子节点。 3、父节点 element[removed] 4、兄弟节点 element.previousSibling：返回相同的
基于PHP的simplehtmldom 一个PHP处理HTML的利器(方便采集).zip
07-22
SimpleHtmlDom库是PHP中的一款开源工具，它的主要功能是解析HTML文档并提供了一个DOM（Document Object Model）接口，使得开发者可以像操作XML一样方便地处理HTML内容。通过这个库，我们可以轻松实现对HTML元素的...
常用DOM整理
09-03
js在操作DOM中存在着许多跨浏览器方面的坑，本文花了我将近一周的时间整理，我将根据实例整理那些大大小小的“坑”。
dom一个用于嵌入式项目的微型510字节虚拟DOM模板引擎
08-07
正是在这种背景下，"dot.dom"应运而生——一个仅为510字节的小型虚拟DOM模板引擎，专为嵌入式项目设计。 首先，我们要理解虚拟DOM的基本原理。虚拟DOM是JavaScript对象的一个树形结构，它模拟了实际DOM树的结构，...
JavaScript进阶
05-14 256
JavaScript 进阶 ES6 部分特性的总结
JS进阶阶段
weixin_49210907的博客
01-26 737
DOM BOM
JavaScript高级+ES6
m0_52412929的博客
11-08 568
一、面向过程和面向对象 面向过程 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 概括：面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。 面向对象 面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。 概括：面向对象是以对象功能来划分问题，而不是步骤。 在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。 面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。 面向对
js的进阶
weixin_56799709的博客
12-30 279
js的深入
js基础进阶
weixin_44920161的博客
08-07 276
基本数据类型(存储于栈内存): number ,string,boolean,null,undefined, number:包括整数,浮点数,科学计数,进制 string:包括"",’’,`` null:只有null undefined:只有undefined 引用数据类型(存储于堆内存)…考点:深浅复制: Array,function,object… var arr = [] var fn = ...
JavaScript进阶语法（笔记版）
zrd26855的博客
03-07 1359
本文主要是对dom对象和bom对象的详细笔记
JS进阶——高阶技巧
weixin_48719464的博客
11-20 151
性能优化说明使用场景防抖单位时间内，频繁触发事件，只执行最后一次搜索框搜索输入、手机号、邮箱验证输入加测节流单位事件内，频繁触发事件，只执行一次高频事件：鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll等等。
Dom4J：一个易用的XML解析库
"dom4j是一个开源的XML解析库，提供了对DOM, SAX和JAXP的支持，并使用Java集合框架，适合在Java平台上处理XML、XPath和XSLT。该库以其易用性和高性能受到推崇。" DOM4J是Java开发者处理XML数据的一种强大工具，由...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值