DOM操作-遍历一个元素的所有属性

代码:

 ———————————————————————————————————

<script>
       //获取DOM的所有属性
       function getDomValues(){
         var myLink = document.getElementById("myLink");
         var str = ‘‘; //结果拼接
         for(var prop in myLink){
            //拼接到 str、key和value,用冒号隔开
            str +=prop + " : " +myLink[prop] + "<br />";
         }
         //打印到网页里
         document.getElementById("valuesP").innerHTML = str;
         
       }
    </script>

————————————————————————————————————

<body style="text-align:center;">
    <p>
      <!--定义链接和按钮-->
      <a href="#" id="myLink">链接</a>
      <br />
      <input type="button" value="获取链接DOM的属性" onclick="getDomValues();" />
    </p>
    <!--用于放置结果的p标签-->
    <p id="valuesP" style="text-align:left;"></p>
</body>

————————————————————————————————————

时间: 2024-10-12 21:44:07

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

JavaScript的DOM操作:查找元素节点

概要: 编程接口 可通过 JavaScript 对 HTML DOM 进行访问. 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). 属性是您能够获取或设置的值(比如节点的名称或内容). (一)通过getElement系列方法: document.getElementById();//id document.getElementsByTagName();//标签名:Elements加了S,选出来是类数组: document.get

DOM设置下一个元素的CSS样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS-DOM</title> <script src="addLoadEvent.js"></script> <link rel="stylesheet" type="text

JS——DOM操作(操纵元素属性【getAttribute、setAttribute...】)

常见元素操作: (1):oDiv.style.display='block'; (2):oDiv.style['display']='block'; (3):DOM方式 [看下面列举↓↓↓↓] DOM方式操作元素属性 1>获取:getAttribute(' 名称 ') 2>设置:setAttribute(' 名称 ',' 值 ') 3>删除:removeAttribute(' 名称 ') 详细看如下代码: 1 <!DOCTYPE html> 2 <html lang=&

jQuery DOM操作-遍历节点

children(): 用于获取匹配元素的子元素集合. 1 <script type="text/javascript"> 2 var $array = $("body").children(); 3 $array.each(function(){ 4 alert($(this).text()); 5 }); 6 </script> next(): 用于获取匹配元素后面紧邻的同辈元素. 1 <script type="text

Dojo入门:DOM操作

作为一款功能齐全的js工具包,dojo提供了统一的DOM操作方法. dojo.byId dojo.byId 函数使您可以通过 id 属性选择一个 DOM 节点.该函数是标准 document.getElementById 函数的一个别名,但是显然简短易书写. dojo.query 虽然dojo.byId可以方便的根据id来获取一个DOM节点,但是根据id获取每一个元素几乎是不可能的,因为id是唯一标识.如果一次想获取几个元素,我们可以通过dojo.query方法. dojo.query 函数接受

前端页面卡顿?或是DOM操作惹的祸,需优化代码

文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaScript中重要的组成部分.在富客户端网页应用中,界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现 的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化的一个主要的关注 点就是DOM操作的优化.DOM操作

jQuery学习----------DOM操作

DOM操作之创建元素: DOM: var ele = document.createElement("element") 例子:document.createElement("div") jQuery: var $ele = $("element")    //返回的是一个jQuery对象 例子:$("<div></div>") DOM操作之输入文本: DOM: var txt = document.c

事件冒泡及事件委托的理解(JQuery Dom操作)

jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会触发事件,只是没有结果,事件冒泡传递还是会发生 系统自动产生的event事件对象 function传的第一个参数就是event事件对象 1 event.stopPropagation(); // 阻止事件冒泡 2 event.preventDefault() // 阻止默认行为 比如submit阻止

Js DOM 操作

HTML DOM对标签属性的操作 1.获取属性值 对象.getAttribute("属性名") 对象.属性名 2.设置属性 对象.setAttribute("属性名","属性值") 对象.属性名 = "属性值" 3.删除属性 对象.remove("属性名") 对象.属性 = "" ? 以上操作不包含对class的操作 如果要对class进行操作 那么class需要写成className