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标签的文字的内容

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

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

  1. JavaScript之获取标签

    (1)html <p id="txt">这是P标签</p> <h1 id="txt" style="color: red ...

  2. DOM操作标签，事件绑定，jQuery框架

    DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' 基本使用 动态创建一个标签 var 变 ...

  3. DOM操作标签、事件绑定、jQuery框架/类库

    DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' # 动态创建一个a标签并添加到页面指定 ...

  4. JS——input标签注册事件

    注意:淘宝的lable是用定位制作的,事件是oninput事件 <!DOCTYPE html> <html> <head lang="en"> ...

  5. 【JAVASCRIPT】获取触发MESSAGE事件的源IFRAME

    先让发送源获取焦点,然后获取焦点元素. window.addEventListener('message',function(msg){ //做一些事来判断是不是某个iframe发送的消息 msg.s ...

  6. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  7. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

  8. javascript中获取非行间样式的方法

    我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的,但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.a ...

  9. JS---DOM---设置和获取---标签内容和文本内容

    设置和获取---标签内容和文本内容   总结---设置: 使用innerText主要是设置文本的, 设置标签内容, 是没有标签的效果的 innerHTML是可以设置文本内容 innerHTML主要的作 ...

随机推荐

  1. “全栈2019”Java异常第二十章：自定义异常详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  2. “全栈2019”113篇Java基础学习资料及总结

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  3. JAVA基本数据类型所占字节数是多少？

    byte     1字节                short    2字节                int      4字节                long     8字节     ...

  4. BZOJ4012 [HNOI2015]开店 （动态点分治）

    Description 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到 人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点钱.这样的 想法当然非常好啦,但是她们也发现 ...

  5. BZOJ 4719--天天爱跑步(LCA&差分)

    4719: [Noip2016]天天爱跑步 Time Limit: 40 Sec  Memory Limit: 512 MBSubmit: 1464  Solved: 490[Submit][Stat ...

  6. 替代iframe新逻辑

    使用ajax请求.下面是代码逻辑 $.ajax({ url:url, type:'get', dataType: "text", success:function(msg){ $( ...

  7. SpringMvc HttpMessageConverter之@ResponseBody

    我们先看HttpMessageConverter的示意图,从图片可以看出它是多么的重要.在一条必经之路截道了的感觉. 先上我的测试例子: jsp页面: <%@ page language=&qu ...

  8. C#-WebForm-★ASP.NET中的母版页★

    何为母版页,顾名思义母版就是模版,就像在PPT里面的板式或主题一样,大框架已经有了,我们的任务就是向里面添加具体的内容.这样我们制作的所有幻灯片的外观大体都是一样的. 在ASP.NET中母版页有两种作 ...

  9. SQL1042C running a fenced routine (stored procedure/UDF)

    Relation to this link http://www-01.ibm.com/support/docview.wss?uid=swg21399105 2015-01-11-13.38.19. ...

  10. hadoop-2.6.0-cdh5.4.5.tar.gz(CDH)的3节点集群搭建(含zookeeper集群安装）

    前言 本人呕心沥血所写,经过好一段时间反复锤炼和整理修改.感谢所参考的博友们!同时,欢迎前来查阅赏脸的博友们收藏和转载,附上本人的链接 http://www.cnblogs.com/zlslch/p/ ...