首页 > 语言 > JavaScript > 正文

《JavaScript DOM 编程艺术》读书笔记之DOM基础

2024-05-06 14:47:48
字体:
来源:转载
供稿:网友

DOM
      
      DOM:文档对象模型;

节点

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

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

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

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

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

CSS

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

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

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

代码如下:
      var shopping = document.getElementById("purchase");
      var items = shopping.getElementsByTagName("*");

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

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

代码如下:
      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];

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选