JS基础学习:操作DOM案例

作者: Merbng | 来源:发表于2019-04-01 22:53 被阅读0次

JS基础学习:操作DOM案例
JQuery
react基础入门：(二)原生JS操作DOM元素
JavaScript 笔记整理
JS基础-DOM操作
javascript面试准备（一）
前端发展历史
JS第七天-03
js基础篇（一）——数组的各种操作
JS dom操作学习

点击按钮显示图片

<body>
        <input type="button" id="btn" value="点击按钮显示图片" />
        <img src="" id="im">

        <!-- 根据id获取按钮 -->
        <!-- 为按钮注册点击事件，添加事件处理函数 -->
        <!-- 根据id获取图片的标签，设置图片的src属性值 -->
        <script type="text/javascript">
            var btnObj = document.getElementById('btn');
            btnObj.onclick = function() {
                var imgObj = document.getElementById('im');
                imgObj.src = "images/img1.jpg";
                // 设置图片的大小
                imgObj.width = "300";
                imgObj.height = "300";
            };
        </script>
    </body>

点击按钮修改a标签的地址和热点文字

<body>
        <input type="button" name="" id="btn" value="显示效果" />
        <a id="ak" href="http:www.baidu.com">百度</a>
        <script type="text/javascript">
            document.getElementById('btn').onclick = function() {
                var obj = document.getElementById('ak');
                obj.href = "http://www.jd.com";
                obj.innerText = "京东";
            };
        </script>
    </body>

点击按钮修改p标签的内容

<body>
        <input type="button" name="" id="btn" value="设置p的内容" />
        <p id="p1"></p>
        <script type="text/javascript">
            var btnObj = document.getElementById('btn').onclick = function() {
                var pObj = document.getElementById('p1');
                pObj.innerText = "这是一个p";
            };
        </script>
    </body>

点击按钮修改多个p标签的文字

<body>

        <!-- document.getElementsByTagName（“标签的名字”）； 返回的是一个伪数组-->


        <input type="button" name="" id="btn" value="显示效果" />
        <p>阿么么么么</p>
        <p>阿么么么么</p>
        <p>阿么么么么</p>
        <p>阿么么么么</p>
        <p>阿么么么么</p>
        <p>阿么么么么</p>
        <p>阿么么么么</p>
        <p>阿么么么么</p>
        <div id="d1">
            <p>阿么么么么</p>
            <p>阿么么么么</p>
            <p>阿么么么么</p>
            <p>阿么么么么</p>
        </div>

        <script type="text/javascript">
            document.getElementById('btn').onclick = function() {
                var pObjs = document.getElementsByTagName('p');
                for (i = 0; i < pObjs.length; i++) {
                    pObjs[i].innerText = "啊，修改结构钢"
                }
                var pObjs=document.getElementById('d1').getElementsByTagName('p');
                    for (i = 0; i < pObjs.length; i++) {
                    pObjs[i].innerText = "啊，div里面的";
                }
            };
        </script>
    </body>

点击按钮修改图片的alt和title属性

<body>
        <input type="button" name="" id="btn" value="显示效果" />
        <img src="images/img1.jpg" alt="广告" title="提提">
        <script type="text/javascript">
            document.getElementById('btn').onclick = function() {
                var imgObjs = document.getElementsByTagName('img');
                imgObjs[0].alt = "这是alt";
                imgObjs[0].title = "阿卡健康科技";
            };
        </script>
    </body>

点击按钮显示隐藏div

<body>
        <input type="button" id="btn" value="显示/隐藏" />
        <div id="dv">

        </div>
        <script type="text/javascript">
            document.getElementById('btn').onclick = function() {
                var divObj = document.getElementById('dv');
                if (divObj.style.display == "none") {
                    divObj.style.display = "block";
                } else {
                    divObj.style.display = "none";
                }
            };
        </script>
    </body>

点击按钮设置div样式

<!DOCTYPE html>
<html lang="zh">
    <head>
        <title></title>
        <style type="text/css">
            .cls {
                width: 100px;
                height: 100px;
                background-color: pink;
                border: 5px solid skyblue;
            }
        </style>
    </head>
    <body>
        <input type="button" name="" id="btn" value="设置样式" />
        <div id="dv">

        </div>
         
        <script src="js/common.js"></script>
        <script type="text/javascript">
            my$("btn").onclick = function() {
                var dvObj = my$("dv");
//              dvObj.style.width = "300px";
//              dvObj.style.height = "300px";
//              dvObj.style.backgroundColor = "red";
//              dvObj.style.border = "10px solid black";
// 在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用className
                dvObj.className = "cls"
            };
        </script>
    </body>
</html>

在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用className

网页开关灯效果

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .cls {
                background-color: black;
            }
        </style>
    </head>
    <body>
        <input type="button" name="" id="btn" value="开关灯" />
        <script src="js/common.js">

        </script>
        <script type="text/javascript">
            my$('btn').onclick = function() {
                document.body.className = document.body.className != "cls" ? "cls" : "";
            };
        </script>
    </body>
</html>