<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>js_0321作业</title>

        <script src="js/common.js" type="text/javascript" charset="utf-8"></script>

        <style type="text/css">

        </style>

    </head>

    <body>

        <img id="myImg" src="img/ft-top.jpg"/>

        <input type="button" name="" id="btn1" value="第一题a" />

        <input type="button" name="" id="btn2" value="第二题b" />

        <input type="button" name="" id="btn3" value="第三题c" />

        <input type="button" name="" id="btn4" value="第四题d" />

        <input type="button" name="" id="btn5" value="第五题e" />

        <input type="button" name="" id="btn6" value="第六题f" />

        <input type="button" name="" id="btn7" value="第六题g" />

    </body>

</html>

html部分

 window.onload=function(){

     //获取myImg元素的标签名

     var b1=document.getElementById("btn1");

     var myImg=document.getElementById("myImg");

     if(myImg.nodeType==1){

         b1.onclick=function(){

         alert(myImg.tagName);

      }

     }

     //获取myImg元素的id值和src的值，并打印输出，并修改src值

     var b2=document.getElementById("btn2");

     b2.onclick=function(){

         alert(myImg.id);

         alert(myImg.src);

         alert(myImg.src="img/jddog.gif");

     }

     //给myImg元素添加title属性，值为“这是一个图片”

     var b3=document.getElementById("btn3");

     b3.onclick=function(){

         alert(myImg.title="这是一个图片");

     }

     //给myImg元素添加“data-id属性”，值为“img001”。

     var b4=document.getElementById("btn4");

     b4.onclick=function(){

     myImg.setAttribute("data-id","myImg001");

     }

     //修改“data-id属性”，修改值为“image001”（方法：有则修改，无则指定）

     var b5=document.getElementById("btn5");

     b5.onclick=function(){

     myImg.setAttribute("data-id","myimage001");

     }

     var b6=document.getElementById("btn6");

     b6.onclick=function(){

         var attrs=myImg.attributes;

         for(i=0;i<attrs.length;i++){

             alert(attrs[i].nodeName);

             alert(attrs[i].nodeValue);

         }

     }

     //删除“data-id”

     var b7=document.getElementById("btn7");

     b7.onclick=function(){

         myImg.removeAttribute("data-id")

     }

 }

Element类型和HTML元素获取的更多相关文章

  1. css中伪类和伪元素的区别

    转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别   前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...

  2. 反射01 Class类的使用、动态加载类、类类型说明、获取类的信息

    0 Java反射机制 反射(Reflection)是 Java 的高级特性之一,是框架实现的基础. 0.1 定义 Java 反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对 ...

  3. 中高级前端应该必会，js实现事件委托代理、切换样式、元素获取相对于文档位置等

    1.介绍 随着组件开发大流行,现在三大框架已经基本占领了整个前端. 这时候,我们要是引入一个 jq 是不是先得你的项目非常臃肿,jq 也很不适合. 这个时候,你就需要来增加你 js 的功底. 2.各种 ...

  4. 第二节: Redis之Set类型和SortedSet类型的介绍和案例应用

    一. Set类型基础 1. 类型说明 1个key→多个value,value的值不重复! Set一种无序且元素内容不重复的集合,不用做重复性判断了,和我们数学中的集合概念相同,可以对多个集合求交集.并 ...

  5. java 8 Stream中操作类型和peek的使用

    目录 简介 中间操作和终止操作 peek 结论 java 8 Stream中操作类型和peek的使用 简介 java 8 stream作为流式操作有两种操作类型,中间操作和终止操作.这两种有什么区别呢 ...

  6. AngularJs：String类型和JSON相互转换

    最近一周做了一个页面,制作的过程中遇到各种问题,从中可以看出本人的js基础还不够扎实,angularjs也只是刚入门的水平,现在将制作过程中遇到的问题一一汇总,方便以后查阅. 一.String类型和J ...

  7. Timestame类型和String 类型的转化

    Timestame类型和String 类型的转化 String转化为Timestamp: SimpleDateFormat df = new SimpleDateFormat("yyyy-M ...

  8. CSS 属性 - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  9. CSS 属性 - 伪类和伪元素

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...

随机推荐

  1. 8-Flink中的窗口

    戳更多文章: 1-Flink入门 2-本地环境搭建&构建第一个Flink应用 3-DataSet API 4-DataSteam API 5-集群部署 6-分布式缓存 7-重启策略 8-Fli ...

  2. 使用nginx搭建高可用，高并发的wcf集群

    很多情况下基于wcf的复杂均衡都首选zookeeper,这样可以拥有更好的控制粒度,但zk对C# 不大友好,实现起来相对来说比较麻烦,实际情况下,如果 你的负载机制粒度很粗糙的话,优先使用nginx就 ...

  3. 菜鸟入门【ASP.NET Core】1：环境安装

    下载.NET Core SDK 下载地址:https://www.microsoft.com/net/download/windows https://www.microsoft.com/net/le ...

  4. ThreadPoolExecutor中的submit()方法详细讲解

    https://blog.csdn.net/qq_33689414/article/details/72955253

  5. spring boot拦截器中获取request post请求中的参数

    最近有一个需要从拦截器中获取post请求的参数的需求,这里记录一下处理过程中出现的问题. 首先想到的就是request.getParameter(String )方法,但是这个方法只能在get请求中取 ...

  6. Python实例----------每日一贴

    def function_tips(): '''功能:每天输出一条励志文字 ''' import datetime # 导入日期时间类 # 定义一个列表 mot = ["今天星期一:\n人生 ...

  7. JQuery拖拽元素改变大小尺寸

    <!DOCTYPE html><html> <head> <title></title> <style type="text ...

  8. Python 基于python操纵zookeeper介绍

    基于python操纵zookeeper介绍 by:授客  QQ:1033553122 测试环境 Win7 64位 Python 3.3.4 kazoo-2.6.1-py2.py3-none-any.w ...

  9. 小米5.0以上系统如何没ROOT激活xposed框架的经验

    在较多企业的引流或者业务操作中,大多数需要使用安卓的黑高科技术xposed框架,这段时间,我们企业购买了一批新的小米5.0以上系统,大多数都是基于7.0以上版本,大多数不能够获取Root的su超级权限 ...

  10. vue 导出xlsx表功能

    详细步骤: 1.需要安装三个依赖: npm install -S file-saver xlsx npm install -D script-loader 两个命令行包含三个依赖. 2.项目中src下 ...