DOM对象

作者: L了个Z | 来源:发表于2016-10-29 16:42 被阅读0次
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内置对象-document</title>
        <script>
            // document作用:
            // 1. 可以动态的获取网页中所有的标签
            // 2. 可以对获取到的标签进行CRUD
    
            // 往网页中插入内容
            document.write('Hello World');
            document.write('<input type="file">');
            document.write('<img src="image/img_01.jpg">')
    
        </script>
    </head>
    <body>
    
    </body>
    </html>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>切换图片</title>
        <script>
           function changeImg() {
    //           alert(0);
               // 拿到图片
               var img = document.getElementsByClassName('icon')[0];
    //           console.log(img);
               // 改变对应的属性
               img.src = 'image/img_02.jpg';
           }
        </script>
    </head>
    <body>
        <img class="icon" src="image/img_01.jpg">
        <p></p>
        <button onclick="changeImg();">换一张图片</button>
    </body>
    </html>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <img id="icon" src="image/img_01.jpg">
        <p></p>
        <button>来回切换</button>
    
        <script>
            // 拿到对应的标签
            var img = document.getElementById('icon');
            var btn = document.getElementsByTagName('button')[0];
    
            // 监听按钮的点击
            btn.onclick = function () {
    //            console.log(img.src);
                // indexOf lastIndexOf  如果包含,则返回任意正数, 不包含,则返回-1
                if (img.src.lastIndexOf('image/img_01.jpg') != -1){
                    img.src = 'image/img_02.jpg';
                }else{
                    img.src = 'image/img_01.jpg';
                }
            }
    
        </script>
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>常用事件</title>
    </head>
    <body>
        <img name="icon" src="image/img_03.jpg">
    
        <input>
    
        <script>
            // 进入页面调用
            window.onload = function () {
    //            alert('我进来了');
    
                // 拿到对应的图片
                var img = document.getElementsByName('icon')[0];
    
                // 当鼠标进入图片
                img.onmouseover = function () {
    //                alert('鼠标进入图片');
                    console.log('鼠标进入图片');
                };
                // 当鼠标在图片上移动
                img.onmousemove = function () {
    //                alert('鼠标在图片上移动');
                    console.log('鼠标在图片上移动');
                };
                // 当鼠标离开图片
                img.onmouseout = function () {
    //                alert('鼠标离开图片');
                    console.log('鼠标离开图片');
                };
    
                // 拿到输入框
                var input = document.getElementsByTagName('input')[0];
                input.onclick = function () {
                     // css属性 style.css属性
                    input.style.outline = 'none';
                    input.style.width = '500px';
                    input.style.border = '1px solid yellow';
                }
    
            }
        </script>
    </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:DOM对象

          本文链接:https://www.haomeiwen.com/subject/wljyuttx.html