读书笔记之DOM基础,JavaScript设置获取和安装属性

作者: 王中王开奖结果计算机  发布:2019-09-06

getAttribute

DOM
      
      DOM:文档对象模型;

该方法用来获取元素的属性,调用方式如下所示:

节点

复制代码 代码如下:

       元素节点:DOM的原子是元素节点。<body>、<p>、<ul>之类的元素。元素可以包含其他的元素。没有被包含在其他元素里的唯一元素是<html>元素

object.getAttribute(attribute)

       文本节点:在XHTML文档里,文本节点总是被包含在元素节点的内部。

以此前介绍的一些方法不同,getAttribute方法不属于document对象,所以不能通过document对象调用。它只能通过元素节点对象来调用。

       属性节点:属性节点用来对元素做出更具体的描述。例如,几乎每个元素都有一个title属性,而我们可以利用这个属性对包含在元素里的东西作出准确的描述:

该方法只接受一个参数,你指定要查询的属性的名字。如果指定的属性没有设置,结果将返回null对象。

       <p title="a gentle reminder">Don't forget to buy this stuff.</p>

setAttribute

       在DOM中,title="a gentle reminder"是一个属性节点。

以上面作用相反的是setAttribute,该方法被用来设置元素节点的属性。调用方式如下所示:

CSS

复制代码 代码如下:

     获取元素       getElementById, getElementsByTagName, getElementsByClassName三种可以获取元素节点的方法。

object.setAttribute(attribute)

      getElementsByTagName允许把一个通配符作为它的参数,而这意味着文档里的每个元素都将在这个函数所返回的数组里占有一席之地。通配符(“*”)必须在引号里,这是为了和乘法操作有所区别。

该方法只接受一个参数,即你要设置的属性。

      还可以把getElementById和getElementsByTagName结合起来运用。如下所示:

拓展阅读

复制代码 代码如下:

通过setAttribute对文档做了修改之后,在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍将是改变前的值,也就是说,setAttribute做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容,在动态刷新,动态刷新不影响文档的静态内容。这正是DOM的真正威力:对页面内容进行刷新却不需要在浏览器里刷新页面。

      var shopping = document.getElementById("purchase");
      var items = shopping.getElementsByTagName("*");

上面的两个方法属于DOM Level 1中新增的API,在他们出现之前,可以通过另外一种方法来实现,举例如下

      这样就可以得到id属性值为purchase的元素包含着多少个元素。

获取属性:

      getElementsByClassName方法只有较新的浏览器才支持。为了弥补这一点,DOM脚本程序员需要使用已有的DOM方法来实现自己的getElementsByClassName。而多数情况下,他们的实现过程都与下面这个getElementsByClassName大致相似:

复制代码 代码如下:

复制代码 代码如下:

var val = element.attribute //获取属性

      function getElementsByClassName(node, classname){
        if(node.getElementsByClassName){
          return node.getElementsByClassName(classname);
        }else{
          var results = new Array();
          var elems = node.getElementsByTagName("*");
          for(var i=0;i<elems.length;i++){
            if(elems[i].className.indexOf(classname) != -1){
              results[results.length] = elems[i];
            }
         }
         return results;
      }
   }

上面的等价于

   这个getElementsByClassName函数接受两个参数,第一个node表示DOM树中的搜素起点,第二个classname就是要搜索的类名了。

复制代码 代码如下:

获取和设置属性

var val = element.getAttribute('attribute');  

     getAttribute是一个函数,它只有一个参数——你打算查询的属性的名字:

设置属性:

复制代码 代码如下:

复制代码 代码如下:

     object.getAttribute(attribute)

element.attribute = "the new value";

     setAttribute()允许我们对属性节点的值做出修改。通过setAttribute对文档作出修改后,在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍将是改变前的属性值,也就是说,setAttribute做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。这正是DOM的真正威力:对页面内容进行刷新却不需要在浏览器里刷新页面。

其等价于

您可能感兴趣的文章:

  • Javascript & DHTML 实例编程(教程)DOM基础和基本API
  • Javascript & DHTML DOM基础和基本API
  • javascript DOM 操作基础知识小结
  • Dom 结点创建 基础知识
  • javascript学习基础笔记之DOM对象操作
  • javascript 基础篇4 window对象,DOM
  • Javascript基础知识(三)BOM,DOM总结
  • JavaScript基础语法、dom操作树及document对象

复制代码 代码如下:

element.setAttribute("attribute", "the new value");   

如果你想偷懒少敲键盘的话,那么推荐上面的方式,不过最佳实践还是要推崇DOM标准,即使用setAttribute和getAttribute。

以上就是本文的全部内容了,有需要的小伙伴来学习下,希望大家能够喜欢。

您可能感兴趣的文章:

  • javaScript 读取和设置文档元素的样式属性
  • javascript createElement()创建input不能设置name属性的解决方法
  • 通过javascript设置css属性的代码
  • javascript学习笔记(二十) 获得和设置元素的特性(属性)
  • javascript 三种方法实现获得和设置以及移除元素属性
  • Javascript设置对象的ReadOnly属性(示例代码)
  • Javascript:为input设置readOnly属性(示例讲解)
  • JavaScript cookie的设置获取删除详解

本文由王中王开奖结果发布于王中王开奖结果计算机,转载请注明出处:读书笔记之DOM基础,JavaScript设置获取和安装属性

关键词: