《关于JavaScriptDOM的学习总结》由会员分享，可在线阅读，更多相关《关于JavaScriptDOM的学习总结（30页珍藏版）》请在金锄头文库上搜索。
1、 关于关于 JavaScript 的学习总结的学习总结通过对JavaScript DOM 编程艺术这本书的学习，总共学习到三大部分的内容：JavaScript1,JavaScript DOM 和 CSS 样式表。CSS 和JavaScript 都是通过控制页面标签的方式，来完善页面，使页面更美观，内容更丰富。1、JavaScript 部分部分1关于关于 JavaScript js 脚本语言脚本语言JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTM
2、L（标准通用标记语言下的一个应用）网页上使用，用来给 HTML 网页增加动态功能。 2JS 变量变量2.1 JS 的变量为易变量，没有类型的限制可以等于所有的类型。2.2 JS 变量的命名规则和 java 相同，且区分大小写。JS 的数据类型有 7 种：Number 数字类型、String 字符串类型、Boolean 布尔类型、Array 数组类型、Object 对象、Null 空对象、Undefined 未定义。2.3 变量的声明，直接用 var 关键字声明即可：var a=90。也可以一次性声明多个变量：var b=1,c=2,d=3。如果一个变量没有声明就使用，或是声明了没有设置值都是
3、undefined。3数据类型的定义数据类型的定义数值类型数值类型: var age=33;字符串类型字符串类型: var mood=”happy”布尔值类型布尔值类型: var add=true;数组类型数组类型: var list= Array(2)list0=”jhon”;list1=33;或者: var list=Array(“jhon”,33)(注:数组内可定义任意类型的数据,且数组下标从 0 开始)NULL 类型类型: var name=null ;或 name=”;Undefined 类型类型: var person;对象类型对象类型: var jer= new person;对
4、象类型是一种非常重要的数据类型.对象是自我包含的数据集合,包含在对象里的数据可以通过两种方式-属性(property)和方法(method) 访问例如: person.ageMath.round()4JS 操作符操作符算数操作符算数操作符 : 加法(+),减法(-),乘法(*),除法(/)如: var num=1+1; var num=num-1;var num=num*num; var num=num/2;赋值操作符赋值操作符 : = 如: var age=33比较操作符比较操作符 : ,=, 等元素节点,文本节点文本节点:元素中包含文本”Do not forget to buy this
5、stuff.” 属性节点属性节点:title=“a gentle reminder“,属性节点包含于元素节点当中。关系图：4相关代码（以下以此段代码为示例）相关代码（以下以此段代码为示例）4.1 getElementById（）方法（）方法这个方法是与 document 对象相关联的函数。函数名后带有圆括号，内含函数参数，id 值必须放在单引号或双引号里document.getElementById（id）例子：document.getElementById(“purchases“)getElementById（）方法将返回一个对象（object），该对象对应着文档里一个特定的元素节点。测试语
6、句，用 typeof 操作符来查看返回的值 4.2 getElementByTagName（）方法（）方法element.getElementByTagName（tag）（Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。）例子：document.getElementsByTagName(“li“)getElementByTagName（）方法将返回一个对象数组，他们分别对应着文档里的一个特定的元素节点。测试语句4.3 getAttribute（）方法（）方法该方法是一个函数，参数为：你要查询的属性的名字，不能通过 document 调用，只能通过一个元素节点对它调用ob
7、ject.getAttribute（attribute）例子：查询每个元素的属性检测所有元素的 title 属性.4.4 setAttribute（）方法（）方法也只能通过元素节点调用,该方法需要传递两个参数,一个是元素的属性,另一个是要设置的值object.setAttribute（attribute,value）例子:检测带有 title 的元素,并修改 title 的属性值.5childNodes 属性属性childNodes 属性可以将任何一个元素的所有子元素检索出来。该属性将返回一个数组，数组中包含给定的元素节点的所有子元素。element.childNodes例子： documen
8、t.getElementsByTagName(“body“)0.childNodes；或者 document.body.childNodes；6nodeType 属性属性调用语法： node.nodeType例子:常用类型:7nodeValue 属性属性用于检索（和设置）节点的值。调用语法：node.nodeValue例子：检索节点值（如：检索一个 id 为 des 的节点第一个子元素的属性）设置节点值：8firstChild 和和 lastChild访问 childNodes数组的第一个元素和最后一个元素调用语法： node.firstChildnode.lastChild9innerHTM
9、L 属性属性可以用来读、写某给定元素里的 HTML 内容例子：注：有时,内容被替换,没有时,会插入一个按钮 名字为 111;10createElement（）方法（）方法创建一个新的元素调用方法：document.createElement（nodeName）例子：创建一个新元素并给它设置 id 属性值为 description11appendChild()方法方法把新建节点插入节点树，使新建节点成为某个节点的子节点。调用方法：parent.appendChild（child）例子：12insertBefore（）方法（）方法这个方法把一个新元素插入到一个现有元素的前面。注意事项：1.想插入的
10、新元素（newElement）2.把它插入哪个现有元素（targetElement）前面3.两个元素的共同父元素（parentElement）调用方法：parentElement.insertBefore（newElement，targetElement）例子：注：parentNode 属性以 Node 对象的形式返回指定节点的父节点。如果指定节点没有父节点，则返回 null。（后文中有 insertAfter（）方法，把一个新元素插入到一个现有元素的后面，是自己定义的方法，多被采用）3、CSS 部分部分1.关于关于 CSS层叠样式表(英文全称：Cascading Style Sheets)是
11、一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。2.属性值属性值整数和实数这和普通意义上的整数和实数没有多大区别。在 CSS 中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3 在 CSS 中将是不合法的。下面是几个正确的例子，整数：128、-313，实数：12.20、1415、-12.03。长度量一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位，因而长度单位也分为
12、相对长度单位和绝对长度单位。相对长度单位有：em当前字体的高度，也就是 font.size 属性的值；ex当前字体中小写字母 x 的高度；Dx一个像素的长度，其实际的长度由显示器的设置决定，比如在 800*600 的设置下，一个像素的长度就等于屏幕的宽度除以 800。另一一点值得注意的是，子级元素不继承父级元素的相对长度值，只继承它们的实际计算值。百分数量（percentages）百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。3.CSS 选择器选择器4.语法示例语法示例界面：界面：（需要相关（需要相关 js 文件配合）文件配合）4、常用语
13、法常用语法1.把执行函数加载到把执行函数加载到 window.onload 事件处理函数事件处理函数(1)把现有 window.onload 事件处理函数存入变量 oldonload(2)如果处理函数上没绑定任何函数,把新函数添加给它(3)如果已经绑定了一些函数,把新函数追加到现有指令的末尾注注:()内参数为要执行的函数名，不带有括号、参数等内参数为要执行的函数名，不带有括号、参数等2.给某一新元素追加新的给某一新元素追加新的 class 值值（1）className 属性值是否为 null（2）如果是，把新的 class设置值赋值给 className 属性（3）如果不是，把一个空格和新的
14、class 设置值追加到 className 属性上去函数参数：将获得新 class 设置值的元素（element）和新的class 设置值（value）3.把一个新元素插入到一个现有元素的后面把一个新元素插入到一个现有元素的后面nextSibling 属性：属性：返回指定节点之后紧跟的节点，在相同的树层级中。被返回的节点以 Node 对象返回。注释：注释：如果没有 nextSibling 节点，则返回值为 null。4.图片实现动画效果图片实现动画效果5.给当前页面超链提供一个给当前页面超链提供一个 class 属性属性,取值为取值为 here6.选择的显示和隐藏选择的显示和隐藏 div 元
15、素元素,让他们某一时刻只有一个在浏览让他们某一时刻只有一个在浏览器窗口可见器窗口可见(此处以此处以 div 的的 class=”section”为例为例)7.点击一个图片链接点击一个图片链接,在当前页面打开在当前页面打开,且显示且显示 title 属性值属性值(调用时 shouPic(this) this 做参数 代表当前) 8.给表格的奇数行给表格的奇数行(或偶数行或偶数行)设置设置 class 属性属性,以便于改变样式以便于改变样式(找出所有 table,遍历其中所有行,设置变量 odd 初始为 false如果 odd 值为 true,设置样式(或不设置)并把变量改为 false)5、总结
16、总结1.首先要考虑通过 JavaScript 去改变这个网页是否是必要的，写代码并不是越多越好。2.一定要“预留退路”，并不是每个浏览器都支持JavaScript。我们要保证，当 JavaScript 不被执行时，网页能完成基本操作3.实现页面与 JavaScript 分离。网页大体分为三个部分：结构层（由 HTML 标签组成的），表示层（CSS 样式）和行为层（JavaScript 语言和 DOM 领域）。我们要保证表示层和行为层要为结构层服务，但是也要独立存在。内嵌的JavaScript 语句一旦网页不支持，整个网页将无法执行4.进行必要的检查。如:if(!document.getElementById) return false;如果浏览器不理解这个函数立即离开.5.创建必要的变量。如：var intro=document.getElementById(“intro“);避免每次都要写后边那一段。6.正确的
