dom的操做

時間 2019-11-18

標籤 dom 欄目 HTML 简体版

原文原文鏈接

一、對樣式的操做html

//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';

}

二、對標籤屬性的操做app

<!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>

三、控制元素顯示隱藏的方式dom

<!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>

四、對值的操做異步

<!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>

五、dom的操做ide

<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>

六、選項卡this

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。