<!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. unity中ScriptableObject在assetbundle中的加载

    转载请标明出处:http://www.cnblogs.com/zblade/ 以前都是写一些个人的调研博客,从今天开始,也写一些个人在开发中遇到的一些可以分享的趟坑博客,为后续的开发人员提供一些绵薄之 ...

  2. OO Unit2多线程电梯总结博客

    OO Unit2多线程电梯总结博客 传说中的电梯居然就这样写完了-撒花

  3. Java基础知识回顾之五 ----- 多线程

    前言 在上一篇文章中,回顾了Java的集合.而在本篇文章中主要介绍多线程的相关知识.主要介绍的知识点为线程的介绍.多线程的使用.以及在多线程中使用的一些方法. 线程和进程 线程 表示进程中负责程序执行 ...

  4. 一个用来爬小说的简单的Node.js爬虫

    小说就准备点天下霸唱和南派三叔的系列,本人喜欢看,而且数据也好爬.貌似因为树大招风的原因,这两作者的的书被盗版的很多,乱改的也多.然后作者就直接在网上开放免费阅读了,还提供了官网,猜想作者应该是允许爬 ...

  5. ES6躬行记（21）——类的继承

    ES6的继承依然是基于原型的继承,但语法更为简洁清晰.通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的People是父 ...

  6. Keras入门（四）之利用CNN模型轻松破解网站验证码

    项目简介   在之前的文章keras入门(三)搭建CNN模型破解网站验证码中,笔者介绍介绍了如何用Keras来搭建CNN模型来破解网站的验证码,其中验证码含有字母和数字.   让我们一起回顾一下那篇文 ...

  7. 一文搞定MySQL的事务和隔离级别

    一.事务简介 事务是数据库管理系统执行过程中的一个逻辑单位,由一个有限的数据库操作序列构成. 一个数据库事务通常包含了一个序列的对数据库的读/写操作.它的存在包含有以下两个目的: 为数据库操作序列提供 ...

  8. Ajax的面试题

    一.什么事Ajax?为什么要用Ajax?(谈谈对Ajax的认识) 什么是Ajax: Ajax是“Asynchronous JavaScript and XML”的缩写.他是指一种创建交互式网页应用的网 ...

  9. 数据结构学习java（一点五）链式顺序表（链表）

    java中没有将指针暴露给用户(以前做过看过一篇文章写有java中是有指针的,只是被藏起来了),所以得使用引用的方式. 何为引用请看下面这篇文章(写的很不错,当然肯定比我写的好): https://w ...

  10. 测者的测试技术手册：分清Java的Override和Overload

    Java的Override和OverloadOverride重写:子类对父类的允许访问的方法实现过程重新编写,但是 不可改变返回值和入参.重弄写的规则: 参数列表必须完全与被重写方法的相同: 返回类型 ...