zoukankan      html  css  js  c++  java
  • dom的操作

    1、对样式的操作

    //1,获取事件源
    var oDiv = document.getElementById('box');
    
    //2.事件
    oDiv.onclick = function() {
    //3.事件驱动 业务
    
    console.log(oDiv.style);
    // oDiv.style.backgroundColor = 'green';
    
    oDiv.style.width = '400px';
    oDiv.style.float = 'left';
    
    }

    2、对标签属性的操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .box{
                width: 42px;
                height: 70px;
                background: url(./images/icon-slides.png) no-repeat -84px 0;
                /*background-position: -82px 0;*/
            }
            
        </style>
    </head>
    <body>
        <div class="box"></div>
    
        <img src="./images/购物车.png" width="100" alt="" id="shop">
        <script>
            
            /*
            var oDiv = document.getElementsByClassName('box')[0];
    
            oDiv.onmouseover = function() {
                this.style.backgroundPosition = '0 0';
            }
            oDiv.onmouseout = function() {
                this.style.backgroundPosition = '-84px 0';
            }
            */
            var isHover = true;
    
            document.getElementById('shop').onclick = function() {
                if (isHover) {
                    this.src = './images/购物车-hover.png';
    
                    this.className = 'app';
                    this.alt = '哈哈哈';
                    this.title = '哈哈哈';
                    this.id = 'app';
    
                    isHover = false;
                }else{
                    this.src = './images/购物车.png';
                    isHover = true;
                }
                // this.setAttribute(name: DOMString, value: DOMString)
                // console.log(this.getAttribute('src'));
                // console.log(this.src);
    
                // this.setAttribute('src', './images/购物车-hover.png');
    
                
            }
    
    
    
    
        </script>
    
    </body>
    </html>

    3、控制元素显示隐藏的方式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .child{
                width: 200px;
                height: 200px;
                background-color: green;
            }
            .hidden{
                display: none;
            }
        </style>
    </head>
    <body>
        <button id="btn">隐藏</button>
        <div class="box">
            
            <div class="child" id="child"></div>
    
        </div>
    
        <!-- 1.样式属性 display:none|block
    
             2.通过控制标签属性className 对类型添加 移除
    
             3.DOM创建 销毁 创建销毁
    
         -->
         <script>
             
            var oChild = document.getElementById('child');
    // 
            document.getElementById('btn').onclick  = function() {
                // oChild.style.display = 'none';
    
                // oChild.className +=' hidden';
                oChild.className = oChild.className + ' hidden';
                console.log(oChild.className);
            }
    
    
         </script>
        
    </body>
    </html>

    4、对值的操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .child{
                width: 200px;
                height: 200px;
                background-color: green;
            }
            .hidden{
                display: none;
            }
        </style>
    </head>
    <body>
        <button id="btn">
            隐藏
    
        </button>
    
        <input type="text" id="user" value = 'wusir'>
        <div class="box">
            
            <div class="child" id="child"></div>
    
        </div>
    
        <!-- 1.样式属性 display:none|block
    
             2.通过控制标签属性className 对类型添加 移除
    
             3.DOM创建 销毁 创建销毁
    
         -->
         <script>
             
            var oChild = document.getElementById('child');
            //这个事件操作是异步(不会阻塞 不等待)的 
            document.getElementById('btn').onclick  = function() {
                // oChild.style.display = 'none';
    
                // oChild.className +=' hidden';
                oChild.className = oChild.className + ' hidden';
                console.log(oChild.className);
                console.log(this.innerText);
                console.log(this.innerHTML);
                // this.innerHTML += '<span>了么</span>';
                this.innerText += '<span>了么</span>';
    
            }
    
            console.log(document.getElementById('user').value);
            document.getElementById('user').value = 'alex';
    
         </script>
        
    </body>
    </html>

    5、dom的操作

    <body>
        <div id="father">
            <div id="laoda"></div>
            <div id="laoer"></div>
        </div>
        <script>
            
            var oLaoda = document.getElementById('laoda');
            // console.log(oLaoda.nextSibling);
            // console.log(oLaoda.nextElementSibling);
    
            // 兼容性
            // var a  = oLaoda.nextElementSibling  || oLaoda.nextSibling;
            // console.log(a);
    
            console.log(document.getElementById('father').children);
    
            console.log(oLaoda.parentNode);
        </script>
    </body>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    
    
    </head>
    <body>
        <button id="btn">隐藏</button>
        <div class="box" id="box">
            
            <!-- <div class="child">alex</div> -->
    
        </div>
    
        <!-- 1.样式属性 display:none|block
    
             2.通过控制标签属性className 对类型添加 移除
    
             3.DOM创建 销毁 创建销毁
    
         -->
         <script>
             
             setTimeout(function () {
                 var oBox = document.getElementById('box');
                //DOM的创建 子元素 节点
                var oChild = document.createElement('div');
    
    
                oChild.className = 'child';
                oChild.style.width = '200px';
                oChild.style.height = '200px';
                oChild.style.background = 'red';
    
                // 父.appendChild(子)
    
                oBox.appendChild(oChild);
    
             },5000)
    
         </script>
        
    </body>
    </html>

    6、选项卡

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .active{
                background-color: red;
            }
            
            #aaa{
                width: 50px;
                height:50px;
                background-color: yellow;
                position: relative; 
            }
            
            .box{
                width: 200px;
                height: 100px;
                background-color:red;
                position: absolute;
                top:50px;
                display: none;
            }
        </style>
    </head>
    <body>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
    
        <div id="aaa">alex
            
            <div class="box"></div>
        </div>
        
        <script>
                
            var oBtns = document.getElementsByTagName('button');
    
            for(var i = 0; i < oBtns.length; i++){
    
                oBtns[i].onclick = function() {
    
    
                    for(var j = 0; j < oBtns.length; j++){
                        oBtns[j].className = '';
                    }
                    
    
                    this.className = 'active';
                }
            }
    
    
            // onmouseover 当穿过父元素和子元素 会调用
            // onmouseenter 只穿过父元素
            document.getElementById('aaa').onmouseenter = function () {
                console.log(1111);
                
                this.children[0].style.display = 'block';
                
            }
            document.getElementById('aaa').onmouseleave = function () {
    
                this.children[0].style.display = 'none';
                
            }
    
            // onmouseenter
            // onmouseleave
    
    
        </script>
        
    </body>
    </html>
  • 相关阅读:
    JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误
    生成验证码图片
    九九乘法表
    Java注解之Retention、Documented、Target、Inherited介绍
    【ztree】zTree节点增删改&ztree对树节点进行检索
    一次性搞清楚equals和hashCode
    HashMap实现原理分析
    DDL、DML和DCL的区别与理解
    MySQL的@与@@区别
    springboot整合mybatis(SSM开发环境搭建)&Springboot项目热部署
  • 原文地址:https://www.cnblogs.com/P-Z-W/p/11318311.html
Copyright © 2011-2022 走看看