<!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. 当代前端应该怎么写这个hello world？

    前言 大概16年的时候我们队react进行了简单的学习:从DOM操作看Vue&React的前端组件化,顺带补齐React的demo,当时我们只是站在框架角度在学习,随着近几年前端的变化,想写个 ...

  2. 【Vue】 ----- 浅谈vue的生命周期

    一.概念 vue生命周期,又叫生命周期钩子函数,是组件从创建到销毁的过程. 二.主要的八大生命周期 1.首先,为方便观察每个周期的特点,我们模拟一个"one"组件的创建与销毁,并在 ...

  3. [CSS] input样式定制

    input样式 定制一个泥团input,想怎么捏就怎么捏 appearance: none 所有主流浏览器都不支持 appearance 属性. Firefox 支持替代的 -moz-appearan ...

  4. Effective Java目录

    创建和销毁对象 考虑用静态工厂方法代替构造器 遇到多个构造器参数时要考虑用构建器 用私有构造器或者枚举类型强化Singleton属性 通过私有构造器强化不可实例化能力 避免创建不必要的对象 消除过期的 ...

  5. Spring boot入门（三）：SpringBoot集成结合AdminLTE(Freemarker)，利用generate自动生成代码，利用DataTable和PageHelper进行分页显示

    关于SpringBoot和PageHelper,前篇博客已经介绍过Spring boot入门(二):Spring boot集成MySql,Mybatis和PageHelper插件,前篇博客大致讲述了S ...

  6. CSS HACK 如何书写

    什么是css  hank 由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中 ...

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

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

  8. [20190419]shared latch spin count.txt

    [20190419]shared latch spin count.txt --//昨天测试exclusive latch spin count = 20000(缺省).--//今天测试shared ...

  9. SQLServer更改用户定义的数据库角色

    更改用户定义的数据库角色注意事项 需具有以下一项或多项权限或成员身份才能运行此命令: 对角色具有 ALTER 权限 对数据库具有 ALTER ANY ROLE 权限 具有 db_securityadm ...

  10. JS直接调用C#后台方法（ajax调用）

    1. 先手动引用DLL或者通过NuGet查找引用,这里提供一个AjaxPro.2.dll的下载: 2. 之后的的过程不想写了,网上都大同小异的,直接参考以前大佬写的: AjaxPro2完整入门教程 总 ...