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


Posted in Javascript onJanuary 09, 2015

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 相关文章推荐
javascript 写类方式之九
Jul 05 Javascript
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
js function使用心得
May 10 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 #Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 #Javascript
javascript获取四位数字或者字母的随机数
Jan 09 #Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 #Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 #Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 #Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 #Javascript
You might like
PHP 高手之路(一)
2006/10/09 PHP
PHP+DBM的同学录程序(1)
2006/10/09 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
pandas string转dataframe的方法
2018/04/11 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
python实现的发邮件功能示例
2019/09/11 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
2014年秋季新学期寄语
2014/08/02 职场文书
监守自盗观后感
2015/06/10 职场文书
教师节随笔
2015/08/15 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
晶体管来复再生式二管收音机
2021/04/22 无线电
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫