<!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. 接口自动化：HttpClient + TestNG + Java(三) - 初步封装和testng断言

    在上一篇中,我们写了第一个get请求的测试类,这一篇我们来对他进行初步优化和封装 3.1 分离请求发送类 首先想到的问题是,以后我们的接口自动化测试框架会大量用到发送http请求的功能. 那么这一部分 ...

  2. Redux进阶（Redux背后的Flux）

    简介 Flux是一种搭建WEB客户端的应用架构,更像是一种模式而不是一个框架. 特点 单向数据流 与MVC的比较 1.传统的MVC如下所示(是一个双向数据流模型) 用户触发事件 View通知Contr ...

  3. TensorRT学习总结

    TensorRT是什么 建议先看看这篇https://zhuanlan.zhihu.com/p/35657027 深度学习 训练 部署 平常自学深度学习的时候关注的更多是训练的部分,即得到一个模型.而 ...

  4. 【带着canvas去流浪】（1）绘制柱状图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 思考题 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端& ...

  5. c# 解决Randoms伪随机重复问题

    /// <summary> /// 解决伪随机问题 /// </summary> public static void Random() { ; ; i < ; i++) ...

  6. 包、继承以及 LeetCode 27、28题

    1 package.import 和 import static 1.1 Package Java 引入了包(Package)机制,提供了类的多层命名空间,用于解决类的命名冲突.类文件管理问题.Jav ...

  7. python3 Flask -day2

    flask 实战第二天,url传参 当我们访问网站/的时候,会执行hell_world函数,并把这个函数的返回值返回给浏览器,这样浏览器就显示hello world了 @app.route('/') ...

  8. nodejs异步转同步

    项目在微信环境开发,需要获取access_token进行授权登录和获取用户信息. 特意把这块功能拿出来封装一个自定义module module.exports = new Wechat(con.app ...

  9. 禁用了传说中的PHP危险函数之后，Laravel的定时任务不能执行了？

    虽然已是 2018 年,但网上依然流传着一些「高危 PHP 函数,请一定要禁用!」的标题党文章(搜索关键字:一些需要禁用的PHP危险函数). 这些文章的内容简单直接,给出 php.ini 的 disa ...

  10. react 脚手架 立即可以写业务 react + react-router-dom + less + axios + antd

    https://github.com/cynthiawupore/wq-cli