第7天：javascript-DOM 获取标签、注册事件改变属性的值、innerText、改变属性的值等

时间 2019-12-14

标签 7天 javascript dom 获取标签注册事件改变属性 innertext 栏目 JavaScript 繁體版

原文原文链接

javascript WEB api——————DOM document object model

案例

为元素注册点击事件，弹出对话框

<input type="button" id="btn" value="开发分离">
    <input type="button" id="btn2" value="最终版">
    <script>
    //定义函数
    function f1(){
        alert("开发分离的html和js代码");
    }
    //根据id获取这个标签(元素)
    var btnObj = document.getElementById("btn");
    //为按钮注册点击事件
    //注意f1不加括号 否则f1()，页面加载时就执行了
    //该注册方式不是最好的
    btnObj.onclick =f1;
    //根据id属性的值，从整个文档中获取这个标签(元素)
    var btnObj2 = document.getElementById("btn2");
    //为当前的这个按钮元素(对象)，注册点击事件，添加事件处理函数（匿命函数）
    btnObj2.onclick = function(){
        alert("我要变帅");
    }
    </script>

点击按钮显示、隐藏图片

<script>
    //页面加载后执行
    window.onload = function(){
        //根据id获取按钮
        var btnObj = document.getElementById("btn");
        //为按钮注册点击事件，添加事件处理函数
        btnObj.onclick = function(){
            imgObj.src = "迪丽热巴.jpg";
            //设置图片的大小 不用加px width=“”
             imgObj.width = "300";
        }
        //根据id获取图片标签，设置图片的src属性值
        var imgObj = document.getElementById("img");
        //隐藏图片
        var  hiddenObj = document.getElementById("hidden");
        hiddenObj.onclick = function(){
            //清空图片src属性
            imgObj.src = "";
        }
    }
    </script>
</head>
<body>
    <input type="button" value="显示图片"  id="btn">
    <input type="button" value="隐藏图片" id="hidden">

    <img src="" alt="" id="img">
</body>

点击按钮改变p标签显示内容

<script>
    window.onload = function(){
        //根据id获取元素，为元素测试点击事件
        var btnObj = document.getElementById("btn");
        btnObj.onclick = function(){
            var p = document.getElementById("p1");
            //p 标签文本内容设置时，使用innerText这个属性的方式
            //凡成对出现的标签，中间的文本内容，设置的使用都使用innerText这个属性
            p.innerText = "p改变后的内容:我仍是一个p标记";
        }
    }
    </script>
</head>
<body>
    <input type="button" id="btn" value="设置p标签内容">
    <p id="p1">我是p标签</p>
</body>

案例点击按钮改变a标签的热点文字和标签地址

<script>
    //页面加载后执行
    window.onload = function(){
        //根据id获取文档中btn按钮元素
        var btnObj = document.getElementById("btn");
        //为btn元素注册点击事件
        btnObj.onclick = function(){
            //根据id获取文档中a标签元素
            var aObj = document.getElementById("google");
            //设置a标签改变后的地址和热点文字
            aObj.href = "www.baidu.com";
            aObj.innerText = "百度";
        }
    }
    </script>
</head>
<body>
    <input type="button" id="btn" value="点击改变a标签的地址和热点文字">
    <a href="www.google.com" id="google">谷歌</a>
</body>

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

<script>
    //页面加载后执行
    window.onload = function(){
      //根据id获取元素
      var btnObj = document.getElementById("btn");
      //为btnObj对象注册点击事件
      btnObj.onclick = function(){
        //根据标签名字获取标签
        var pList = document.getElementsByTagName("p");
        //遍历获取的到的标签伪数组
        for(var i = 0; i < pList.length; i++){
            pList[i].innerText = "好烦，帅不能当饭吃!"
        }
      }
    }
    </script>
</head>
<body>
    <input type="button" id="btn" value="点击改变">
    <p>哈哈，你最帅！！！</p>
    <p>哈哈，你最帅！！！</p>
    <p>哈哈，你最帅！！！</p>
    <p>哈哈，你最帅！！！</p>
    <p>哈哈，你最帅！！！</p>
</body>