PHP生活

记录生活里的一分一秒

PHP生活

记录生活里的一分一秒

DOM模型:设置节点属性

  对于一个页面中的某一标签有时候我们需要去修改或是查询其相关的属性,从而达到设计目标,那么在html页面中我们该怎么做呢?下面phplife.net就为大家介绍下载html中修改或是查询节点属性的方法。

  (1)查询节点属性–getAttribute()

  getAttribute()是一个函数,它只有一个参数即要查询的属性名称,同时该方法不能通过document对象调用,只能通过元素节点对象调用。下面通过实例为大家讲解下该方法的具体用过,如下:

  <html>

  <head>

  <title>getAttribute()</title>

  <script language=“javascript”>

  function myDOMInspector(){

  //获取图片

  var myImg = document.getElementsByTagName(“img”)[0];

  //获取图片title属性

  alert(myImg.getAttribute(“title”));

  }

  </script>

  </head>

  <body onload=“myDOMInspector()”>

  <img src=“1.jpg” title=“这是一张企鹅图片” />

  </body>

  </html>

  结果如图:

      11 (2).jpg

  (2)修改节点的相关属性–setAttribute()

  setAttribute()方法可以实现修改节点属性,该方法接受两个参数,第一个参数是属性的名称,第二个参数是要修改的值。具体用法请看下面的实例:

  <html>

  <head>

  <title>setAttribute()</title>

  <script language=“javascript”>

  function changePic(){

  //获取图片

  var myImg = document.getElementsByTagName(“img”)[0];

  //设置图片src和title属性

  myImg.setAttribute(“src”,“2.jpg”);

  myImg.setAttribute(“title”,“这是一张爱情图片”);

  }

  </script>

  </head>

  <body>

  <img src=“1.jpg” title=“这是一张企鹅图片” onclick=“changePic()” />

  </body>

  </html>

  原页面显示如图:

      12 (2).jpg

      点击之后如图:

     12.jpg

  对于这些方法的使用希望大家可以通过实践来理解其用法和意思,这样才能让你更了解它们。

DOM模型:设置节点属性

发表回复

滚动到顶部