<!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. 前端CSS学习-Background背景相关

    在CSS中 背景属性用于定义HTML元素的背景. background主要设置一下五个属性: background-color  // 设置元素的背景颜色. background-image // 把 ...

  2. unity+xlua开发中的问题笔记

    转载请标明出处:http://www.cnblogs.com/zblade/ 一.概述 整理遇到的一些较难处理的bug,总结相关经验 二.主要问题 2.1 material类型的依赖修改 对于mate ...

  3. 探索js原型链和vue构造函数中的奥妙

    这篇文章首先会讲到原型链以及原型链的一些概念,然后会通过分析vue的源码,来看一下vue的构造函数是如何被创建的,now we go! 一.什么是原型链? 简单回顾下构造函数,原型和实例的关系:   ...

  4. Golang之轻松化解defer的温柔陷阱

    目录 什么是defer? 为什么需要defer? 怎样合理使用defer? defer进阶 defer的底层原理是什么? 利用defer原理 defer命令的拆解 defer语句的参数 闭包是什么? ...

  5. Linux用户和权限管理看了你就会用啦

    前言 只有光头才能变强 回顾前面: 看完这篇Linux基本的操作就会了 没想到上一篇能在知乎获得千赞呀,Linux也快期末考试了,也有半个月没有写文章了.这篇主要将Linux下的用户和权限知识点再整理 ...

  6. 并发系列（2）之 ThreadLocal 详解

    本文将主要结合源码讲述 ThreadLocal 的使用场景和内部结构,以及 ThreadLocalMap 的内部结构:另外在阅读文本之前只好先了解一下引用和 HashMap 的相关知识,可以参考 Re ...

  7. tensorflow用pretrained-model做retrain

    最近工作里需要用到tensorflow的pretrained-model去做retrain. 记录一下. 为什么可以用pretrained-model去做retrain 这个就要引出CNN的本质了.C ...

  8. 现代Java进阶之路必备技能——2019 版

    Java技术的学习阶段有三 第1个是java基础,比如对集合类,并发,IO,JVM,内存模型,泛型,异常,反射,等有深入了解. 第2个是全面的互联网技术相关知识,比如redis,mogodb,ngin ...

  9. Java开发笔记（八十三）利用注解技术检查空指针

    注解属于比较高级的Java开发技术,前面介绍的内置注解专用于编译器检查代码,另外一些注解则由各大框架定义与调用,像Web开发常见的Spring框架.Mybatis框架,Android开发常见的Butt ...

  10. vue学习记录③（路由）

    上篇文章我们用vue-cli脚手架工具做了个简单的hello world页面,但是我们破坏了原来的流程,而正常的访问页面应该是通过路由来实现的. 那么什么是路由呢? 路由就是通过不同的url来访问不同 ...