代码：

<!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. 2.1 Word 插入 smartart、图表

    1.插入-smartart 2.插入后的图表中,左边可键入文字 3.按住TAB可以往后缩进 选中目标按住shift+TAB 可以往前缩进. 1.插入-图表 2.选择形状 3.会成功插入对比图表 以及出 ...

  2. 为Github项目创建文档

    有两种编写方式: In reStructuredText In Markdown In reStructuredText  工具:  pip install sphinx sphinx-autobui ...

  3. 关于css3中transform的理解（只是改变状态未改变其真正的属性）

    众所周知,在css3中可以用animation实现动画效果,在这里用一个transform:translateX举例. <div class="div1"></d ...

  4. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  5. [妙味DOM]第五课：事件深入应用

    知识点总结 鼠标拖拽原理: 1.鼠标按下后开始移动,鼠标抬起停止移动,即onmousedown中要包括onmousemove和onmouseup 2.获取位置的计算:获取鼠标的当前位置-鼠标在物体中的 ...

  6. iOS开发讯飞语音的集成

    1.进入官网注册账号,登陆,注册,应用. 2,下载sdk  导入系统库. 3,关闭bitcode 4,初始化讯飞语音. NSString * initString = [[NSString alloc ...

  7. 安卓---下拉刷新---上拉加载---解决导入library等自生成库文件失败的问题

    本文的下拉刷新以及上拉加载都是用PullToRefresh实现的,关于PullToRefresh的介绍以及源码,网上可以找到很多,本人在此不再赘述. PullToRefresh是一套实现非常好的下拉刷 ...

  8. 如何使用自定义消息？－－ESFramework 4.0 快速上手（04）

    在ESFramework 4.0 快速上手一文中,我们讲述了如何使用Rapid引擎可以快速地上手ESFramework开发,文中介绍了使用ESPlus.Application.CustomizeInf ...

  9. servlet规范核心类图

    作为新手在写servlet时很多时候忘记类与类之间的关系,找到这张图就瞬间清晰了,这比看API要舒服很多.

  10. POJ 2083 Fractal 分形

    去年校赛团队赛就有一道分形让所有大一新生欲生欲死…… 当时就想学了 结果一直拖到…… 今天上午…… 马上要省选了 才会一点基础分形…… 还是自己不够努力啊…… 分形主要是要找到递归点…… 还有深度…… ...