《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 相关文章推荐
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
javascript实现倒计时效果
Feb 17 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新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
深入理解PHP内核(一)
2015/11/10 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
Vue3 源码导读(推荐)
2019/10/14 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
简化Python的Django框架代码的一些示例
2015/04/20 Python
RC4文件加密的python实现方法
2015/06/30 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
python下载的库包存放路径
2020/07/27 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
办理居住证介绍信
2014/01/15 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
公务员处分决定书
2015/06/25 职场文书
责任书格式
2019/04/18 职场文书
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python