javascript页面编程3.pptVIP

对象树 先出现的元素 在左边，后出 现的在右边 概念 节点（Node）：在html文档中的每个元素都是节点 Dom：文档对象模型，又叫对象树 Dom api：api是应用程序接口（application programming Interface）的简称，通常指被开发者所使用的已经定义好的函数和属性。那么dom api就是由浏览器定义好的函数和属性。我们之前学过的alert，prompt等等都是dom api范畴 Dom api的使用说明 在dom中，每个节点（Node）都有一些用来描述自身的属性及访问自身节点信息的方法，其中比较重要的属性和方法 Dom api的使用说明 属性名 描述 nodeName 节点的名称，标签的名称，相见关系图 parentNode 当前节点的父节点，相见关系图 childNodes 数组，当前节点的所有子节点，相见关系图 firstChild 当前节点的所有子节点中的第一个节点，相见关系图 lastChild 当前节点的所有子节点中最后一个节点，相见关系图 previousSibling 当前节点的前一个兄弟节点，相见关系图 nextSibling 当前节点的后一个兄弟节点，相见关系图 nodeValue 节点值一般只有文本节点的这个属性有值，比如： fontfont标签/font 在这个例子中，”font标签”是文本节点，nodeValue为”font标签” 在html中，出现在开始标签和结束标签之间的文本会被浏览器转化为文本节点，而文本节点的值就是这个文本的内容 节点属性 Dom api的使用说明 实验测试 实验1：为用户提供一个输入框，用户输入确定后，输入的内容显示在指定的html元素内 实验2：一个100*100的窗口，在屏幕中上下左右的移动，并且在窗口内显示当前窗口的位置 实验3：为用户提供一个输入框，用户在输入框中输入希望窗口到达的位置，只能输入一个数字，比如输入100，那么窗口就移动到(100,100)。要求是：窗口的移动必须是平滑的。到达指定位置后，仍然要求用户继续输入位置 事件 事件：可以被javascript侦测到的行为 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onclick 事件来触发某个函数。事件在 HTML 页面中定义 事件通常与函数配合使用，当事件发生时函数才会执行。 事件——鼠标点击 onclick。当用户用鼠标点击某个元素的时候，会触发那个元素的onclick事件，若我们在html中为那个元素的onclick事件绑定了javasscript代码，那么这些代码就会在点击的时候执行 button onclick=“test()” 按钮/button 举例：点击按钮，检查输入框中是否有内容 事件——页面载入 onload。当body中的内容加载完成的时候，触发onload事件，同样，若我们为这个事件绑定了javascript代码，那么当内容加载完成的时候，将执行这些代码 body onload = “test()” …. /body 举例：页面加载完成，检查输入框中是否有内容 事件：onfocus onblur onchange onfocus：当元素获取到焦点的时候，触发 什么是焦点：焦点是针对一些特定元素的，比如一些表单元素，按钮等。比如，一个没有光标的输入框，当我们用鼠标点击这个输入框的时候，光标便会出现在输入框内，我们说，当光标出现在输入框内的时候，就是这个输入框获取到焦点的时候。 onblur：当元素失去焦点的时候 onchange：当元素的值发生变化的时候，这个元素一般指表单元素。注意：onchange事件紧随onblur事件发生后发生 Javascript样式 每个html标签都有style属性，比如 body div style=“width:50px;height:50px;background:red” / /body 描述了一个宽和高为50像素，背景颜色为红色的div 在标签的style属性内的css样式被称为：内联样式 Javascript样式就是html元素的内敛样式的对象形式的表现 var div = document.body.firstChild; div.style.width = “60px”; div.style.height = “55px”; div.style.background = “blue”; //以上代码使得div的样式变为高为55，宽为60，背景颜色为蓝色的div Javascript样式 从之前的代码可以知道，javascript元素对象的style属性与html元素style属性是对应的，我们可以形象的这样理解： St