《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 相关文章推荐
js实现select跳转功能代码
Oct 22 Javascript
javaScript语法总结
Nov 25 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
Vue多系统切换实现方案
Jun 05 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
JS代码检查工具ESLint介绍与使用方法
Feb 04 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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
Python实现一个论文下载器的过程
2021/01/18 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
Java面试题汇总
2015/12/06 面试题
银行毕业实习自我鉴定
2013/09/19 职场文书
自荐信不宜过于夸大
2013/11/06 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
浅谈MySQL之select优化方案
2021/08/07 MySQL
利用Apache Common将java对象池化的问题
2022/06/16 Servers