当前位置: 首页 > 编程笔记 >

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

益英逸
2023-03-14
本文向大家介绍《JavaScript DOM 编程艺术》读书笔记之DOM基础,包括了《JavaScript DOM 编程艺术》读书笔记之DOM基础的使用技巧和注意事项,需要的朋友参考一下

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];

            }

         }

         return results;

      }

   }

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

获取和设置属性

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


     object.getAttribute(attribute)

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

 类似资料:
  • 本文向大家介绍《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法,包括了《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法的使用技巧和注意事项,需要的朋友参考一下 注释         单行注释://         多行注释:/* */         "<!--"可以用作单行注释,由于和HTML的"<!--  -->"多行注释类似,容易混

  • 本文向大家介绍《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史,包括了《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史的使用技巧和注意事项,需要的朋友参考一下 JavaScript 是Netscape公司与Sun公司合作开发的。在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场。微软在推出IE3的

  • 本文向大家介绍《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库,包括了《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库的使用技巧和注意事项,需要的朋友参考一下 改变图片的src属性的两种方式: 1,setAttribute方法是“第1级DOM”的组成部分,它可以设置元素节点的任意属性。 2,element.src = source;这

  • 本文向大家介绍bootstrap读书笔记之CSS组件(上),包括了bootstrap读书笔记之CSS组件(上)的使用技巧和注意事项,需要的朋友参考一下 bootstrap三大核心之二。 包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等。一. 图标字体 bootstrap3提供了200多个免费图标字体。认为它是一个字。 arial-hidden

  • 现在虽然有很多指南,但是它们都是有一些问题的。我们不想介绍一些死板的规定,我们想提供一个在开发者们之间写更一致的代码的方法。随时间的推移,这本书开始转向介绍如何设计和构建优秀的代码。

  • 如题,这本书是《快学Scala》的读书笔记,篇章结构基本与原书无异,在内容上进行了适当的修改与删减。 与原书相比,这本笔记具有: 更少的篇幅 更直白明了的知识展示形式 一些个人的观点延伸 部分的实现代码 虽然本书偏个人收藏与记录,但如果有不合适的地方也欢迎大家积极指出,共同改进。