代码：

<!DOCTYPE html>

<html>

    <head>

        <title>遍历打印一个元素的所有属性</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <script type="text/javascript">

            //获取DOM的所有属性

            function getDomValues(){

                //获取链接的DOM

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

                var str = '';                //结果拼接

                for(var prop in myLink){    //循环遍历myLink的所有属性key

                    //拼接到str，key和value用冒号隔开

                    str += prop + " : " + myLink[prop] + "<br/>";

                }

                //打印到网页里

                document.getElementById("valuesP").innerHTML = str;

            }

        </script>

    </head>

    <body style="text-align:center">

        <p>

            <!-- 定义链接和按钮 -->

            <a id="myLink" href="#">链接</a>

            <br/>

            <input type="button" value="获取链接DOM的属性" onclick="getDomValues();"/>

        </p>

        <!-- 用于放置结果的p标签 -->

        <p id="valuesP" style="text-align:left;"></p>

    </body>

</html>

DOM操作-遍历一个元素的所有属性的更多相关文章

  1. jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解

    本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html)               ;在每个匹配元素的外层添加一层DOM元素   ...

  2. jQuery 源码解析(二十三) DOM操作模块 替换元素 详解

    本节说一下DOM操作模块里的替换元素模块,该模块可将当前匹配的元素替换指定的DOM元素,有两个方法,如下: replaceWith(value)     ;使用提供的新内容来替换匹配元素集合中的每个元 ...

  3. jQuery 源码解析(二十二) DOM操作模块 复制元素 详解

    本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...

  4. jQuery 源码分析(二十一) DOM操作模块 删除元素 详解

    本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...

  5. jQuery 源码分析(二十) DOM操作模块 插入元素 详解

    jQuery的DOM操作模块封装了DOM模型的insertBefore().appendChild().removeChild().cloneNode().replaceChild()等原生方法.分为 ...

  6. JavaScript DOM操作之查找元素节点

    概要: 编程接口 可通过 JavaScript 对 HTML DOM 进行访问. 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). ...

  7. 给DOM操作生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...

  8. DOM操作的一个小坑

    最近在苦读<JavaScript高级程序教程>,真不愧是前端圣经,学到了很多东西. nodeList.NameNodeMap.HTMLCollection这三个集合是动态的!每当文档发生变 ...

  9. DOM操作-遍历HTML文档内容

    基础:   JS nodeType返回类型:http://blog.csdn.net/qyf_5445/article/details/9232907 代码: <!DOCTYPE html> ...

随机推荐

  1. diff命令

    描述 在最简单的情况是, diff 比较两个文件的内容 (源文件 和 目标文件). 文件名可以是 - 由标准输入设备读入的文本. 作为特别的情况是, diff - - 比较一份标准输入的它自己的拷贝如 ...

  2. JavaScript DOM编程艺术-学习笔记

    发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...

  3. 大型网站技术架构 核心原理与案例分析 pdf

    需要的小伙伴拿去,哈哈.百度云链接:https://pan.baidu.com/s/1hsuiM3q

  4. Linux镜像资源收集

    1.企业 搜狐开源镜像站: http://mirrors.sohu.com/ 网易开源镜像站: http://mirrors.163.com/ 阿里开源镜像站: http://mirrors.aliy ...

  5. Hibernate5--课程笔记5

    关联关系映射: 关联关系,是使用最多的一种关系,非常重要.在内存中反映为实体关系,映射到DB中为主外键关系.实体间的关联,即对外键的维护.关联关系的发生,即对外键数据的改变. 外键:外面的主键,即,使 ...

  6. Javaweb 第12天 JSP、EL技术

    第12天 JSP.EL技术 今日任务: JSP技术入门和常用指令 JSP的内置对象&标签介绍 EL表达式&EL的内置对象 课堂笔记 1.JSP技术入门和常用指令 1.1.JSP的由来. ...

  7. jdbc连接数据库的步骤

    1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过java.lang.Class类的静态方法forName(String  classN ...

  8. SpringMVC 学习-拦截器 HandlerInterceptor 类

    一.拦截器 HandlerInterceptor 类的作用 SpringMVC 的拦截器类似于 Servlet 开发中的过滤器 Filter,用于对处理器进行预处理和后处理. 二.怎么使用呢? 1. ...

  9. Qt ImageProvider 的使用

    QQuickImageProvider 是一个可以支持在QML中使用 qpixmap 和 图片加载线程的类. 它支持在qml中使用Image加载的高级特性, 包括 使用 QPixmap 替代实际的im ...

  10. GlusterFS无法启动原因及处理方案

    启动结果: Redirecting to /bin/systemctl status  glusterd.serviceglusterd.service - GlusterFS, a clustere ...