dom的 *** 作_html-js-css

概述1、对样式的 *** 作 //1,获取事件源var oDiv = document.getElementById(‘box‘);//2.事件oDiv.onclick = function() {//3.事件驱动业务console.log(oDiv.style);// oDiv.style.backgroundColor = ‘green‘;oDiv.style.w

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.getElementsByClass@R_419_6889@(‘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.class@R_419_6889@ = ‘app‘;                this.alt = ‘哈哈哈‘;                this.Title = ‘哈哈哈‘;                this.ID = ‘app‘;                isHover = false;            }else{                this.src = ‘./images/购物车.png‘;                isHover = true;            }            // this.setAttribute(@R_419_6889@: 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>    @H_306_502@<!--@H_306_502@ 1.样式属性 display:none|block         2.通过控制标签属性class@R_419_6889@ 对类型添加 移除         3.DOM创建 销毁 创建销毁     @H_306_502@-->     <script>                 var oChild = document.getElementByID(‘child‘);//         document.getElementByID(‘btn‘).onclick  = function() {            // oChild.style.display = ‘none‘;            // oChild.class@R_419_6889@ +=‘ hIDden‘;            oChild.class@R_419_6889@ = oChild.class@R_419_6889@ + ‘ hIDden‘;            console.log(oChild.class@R_419_6889@);        }     </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>    @H_306_502@<!--@H_306_502@ 1.样式属性 display:none|block         2.通过控制标签属性class@R_419_6889@ 对类型添加 移除         3.DOM创建 销毁 创建销毁     @H_306_502@-->     <script>                 var oChild = document.getElementByID(‘child‘);        //这个事件 *** 作是异步（不会阻塞 不等待）的         document.getElementByID(‘btn‘).onclick  = function() {            // oChild.style.display = ‘none‘;            // oChild.class@R_419_6889@ +=‘ hIDden‘;            oChild.class@R_419_6889@ = oChild.class@R_419_6889@ + ‘ hIDden‘;            console.log(oChild.class@R_419_6889@);            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">                @H_306_502@<!--@H_306_502@ <div >alex</div> @H_306_502@-->    </div>    @H_306_502@<!--@H_306_502@ 1.样式属性 display:none|block         2.通过控制标签属性class@R_419_6889@ 对类型添加 移除         3.DOM创建 销毁 创建销毁     @H_306_502@-->     <script>                  setTimeout(function () {             var oBox = document.getElementByID(‘Box‘);            //DOM的创建 子元素 节点            var oChild = document.createElement(‘div‘);            oChild.class@R_419_6889@ = ‘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.getElementsByTag@R_419_6889@(‘button‘);        for(var i = 0; i < oBtns.length; i++){            oBtns[i].onclick = function() {                for(var j = 0; j < oBtns.length; j++){                    oBtns[j].class@R_419_6889@ = ‘‘;                }                                this.class@R_419_6889@ = ‘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>