首页 > 代码库 > JavaScript DOM编程艺术-学习笔记(第三章、第四章)
JavaScript DOM编程艺术-学习笔记(第三章、第四章)
第三章:
1.js的对象分为三种:①用户自定义对象 ② 内建对象(js提供的对象) ③宿主对象(js寄宿的环境-浏览器,提供的对象)
2.文档是由节点组成的集合,即dom树,html元素是根元素,是唯一一个没有被其它元素包含的元素。
3.元素节点并非直接包含文本节点,例如:<ul><li>你好</li><ul> ul元素并没有直接包含文本元素
4.获取元素的方法:
①getElementById()
②getElementsByTagName () 独特的用法:docuemnt.getElementsByTagName("*") 用于获取某个元素内的所有标签的数量。类似于jquery的size()
题外话:换行的时候,总想ctrl+s 。哎,已经成为习惯了吗。
③getElementsByClassName() (ie8以及以下版本不支持)
书中给出了一个自定义的getElementByClassName方法:
1 function getElementsByClassName(node,classname){ 2 if(node.getElementsByClassName){ 3 return node.getElementsByClassName(classname); 4 }else{ 5 var ele = node.getElementsByTagName("*"); 6 var arr = []; 7 for (var i = 0; i < ele.length; i++) { 8 if(ele[i].className == classname){ 9 arr.push(ele[i]); 10 } 11 } 12 13 return arr; 14 } 15 }
5.小知识点:① 元素.className() 获取元素的名称 ②if(sm != null) 等同于if(sm)
6.在本章最后的部分,有说到,setAttribute修改的值,不会出现在源码中。可是自己的代码并没有那种效果。还有对于这种现象的解析,让我觉得说的是ajax。。。。。。。???
第四章:
1.本章介绍 了一个例子:类似于切换头像的效果,也可以说是已一个简单的选项卡效果:
2.胡思乱想:① 0级dom-原始dom ②1级dom - 标准dom ③2,3级dom-标准化基础上的交互式dom
3.小知识点: on-click="return false;" 等同于 : 按钮没有被点击
4.节点属性:
①childNodes 获取某元素的所有子节点(包含元素节点,属性节点,文本节点)
②nodeType(1-元素节点 , 2- 属性节点,3-文本节点)
③nodeValue 无法直接获取元素的文本。 元素的文本 = 元素的第一个子节点的nodeValue值(p.childNodes[0].nodeValue) 类似于jquery的text()方法
5.setAttribute 相当于 jquery中的css()和attr()方法。两者的区别是:attr()方法可以获取和修改html标签中的任意属性。而css()只能获取和修改 属性style的值
JavaScript DOM编程艺术-学习笔记(第三章、第四章)