网页制作常用特效 第1篇
1、DOM树节点DOM节点分为三大类:元素节点、文本节点、属性节点；文本节点，属性节点是元素节点的两个子节点；通过getElement系列方法可以取到元素节点。
2、查看节点1、getElementById：通过ID获得唯一的节点；多个重名ID，只会取第一个；2、getElementsByName：通过name取到一个数组，包含1到多个节点；使用方法：通过循环，取到每一个节点，循环次数：从0 开始，<数组.length>3、查看和设置属性节点1、查看属性节点：getAttribute(_属性名_);2、设置属性节点：setAttribute(_属性名_,_属性值_);
4、JS修改样式总结1、.className：为元素设置一个新的class名字 = _class1_;2、.style：为元素设置一个新的样式，注意驼峰命名法 = _red_;3、.:为元素同时修改多个样式 = _width:100px;height:100px;_;5、查看节点1、tagName属性：获取节点的标签名2、innerHTML：设置或者获取节点内部的所有HTML代码3、innerText：设置或者获取节点内部的所有文字
网页制作常用特效 第2篇
图5 设置投票内容
要求：
提示：
（1）建立HTML 页面时，投票选项只做两行，放在同一个父容器内；
JS参照代码如下：
附录：
一、BOM浏览器对象模型：
window对象的常用方法：均可以省略前面的window.，比如close()
1、prompt：弹窗接受用户输入；2、alert：弹窗警告；3、confirm：带有确认/取消 按钮的提示框；4、close：关闭当前浏览器选项卡5、open:重新打开一个窗口，传入参数：URL/窗口名称/窗口特征6、setTimeout：设置延时执行，只会执行一次7、setInterval：设置定时器，循环每隔n毫秒执行一次 两个参数：需要执行的function/毫秒8、clearTimeout: 清除延时9、clearInterval:清除定时器 传入参数：调用setInterval时返回一个ID，通过变量接受ID，传入setInterval
网页制作常用特效 第3篇
【JS中的DOM0事件模型】1、内联模型：直接将函数名作为HTML标签的某个事件属性的属性值；eg:缺点：违反W3C关于HTML与JavaScript分离的基本原则；2、脚本模型：在JS脚本中通过事件属性进行绑定；eg: = function(){}3、局限性：同一节点，只能绑定同类型事件
【JS中的DOM2事件模型】1、添加事件绑定：①IE10之前：(_onclick_,函数);②其他浏览器：(_onclick_,函数,true/false);参数三：false(默认)，表示事件冒泡；true,表示事件捕获兼容写法：if(){ ();}else{ ();}
优点：同一节点，可以添加多个同类型事件的监听器；
2、取消事件绑定：
(_click_,函数名); .detachEvent(_onclick_,函数名）；
[注]如果要取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，二不能使用匿名函数。因为在取消事件绑定时，需要传入函数名；
【JS中的事件流】
1、事件冒泡：①当某DOM元素触发某事件时，会从当前DOM元素开始，逐个触发 其祖先元素的同类型事件，直到DOM根节点②DOM0模型，均为事件冒泡； IE中使用：.attachEvents()添加的事件，均为冒泡；③其他浏览器：.addEventsListener添加的事件，当第三个参数 为false时，为冒泡。
2、事件捕获：①当某DOM元素触发某事件时，会从DOM根节点开始，逐个触发其祖先元素的同类型事件，直到触发到当前元素为止；②只有使用.addEventsListener添加的事件时，并设置第三个参数为true时，才进行捕获；
↓ 当前元素 ↑↓ ↑冒 父元素 捕↓ ↑泡 爷爷元素 获↓ ↑↓ DOM根节点 ↑
3、阻断事件冒泡(重点哦！):①IE浏览器中：将属性设为true；②其他浏览器：调用();方法
兼容写法：function myParagraphEventHandler(e) { e = e || ; if () { (); //IE以外 } else { = true; //IE }}
4、阻止默认事件：IE浏览器中：将属性设为false；其他浏览器：调用();方法
兼容写法：function eventHandler(e) { e = e || ; // 防止默认行为 if () { (); //IE以外 } else { = false; //IE }}
网页制作常用特效 第4篇
【获取层次节点的常用属性】1、.childNodes：（返回数组）获取元素的所有的子节点（包含 元素节点/文本节点）2、.firstChild：获取元素的第一个子节点3、.lastChild：获取元素的最后一个子节点4、.ownerDocument：获取当前文档根节点，在HTML文档中，为 document节点 5、.parentNode：获取当前节点的父节点6、.previousSibling:获取当前节点的前一个兄弟节点7、.nextSibling：获取当前节点的后一个兄弟节点
[注]1~7属性，均会获得所有的元素节点和文本节点，如果只需 要元素节点，需要使用对应Element属性
例如：firstChild--->firstElementChild
8、.attributes：获取当前元素节点所有属性节点
【创建并新增节点】1、.createElement(_标签名_):创建一个新的节点。需要配 合.setAttribute（）方法设置新节点的相关属性2、.appendChild(_节点名_):在某元素的最后追加一个新节点3、.insertBefore(_新节点名，目标节点名_):将新节点插入到 目标节点之前4、克隆节点.cloneNode(true/false):需要克隆谁，就用谁调用 克隆对象； >>>传递参数可以为true或false: true：克隆当前节点及所有子节点 false：克隆当前节点，不克隆子节点（默认）
【删除/替换节点】1、.removeChild(需删除节点)：从父容器中，删除指定节点2、.replaceChild（新节点，被替换节点）：用新节点替换指定节点，如果新节点为页面中已有节点，会将此节点删除后，替换到指定节点。
【表格对象】1、rows属性：返回表格中所有行，数组；2、insertRow（index）：在表格的第index+1行，插入一个新行；3、deleteRow（index）：删除表格的第index+1行
【表格的行对象】1、cells属性：返回当前行中的所有的单元格，数组；2、rowIndex属性：返回当前行，在表格中的索引顺序，从0开始；3、insertCell（index）：在当前行的第index+1处插入一个
【表格的单元格对象】1、cellIndex属性：返回单元格在改行的索引顺序，从0开始2、innerHTML属性：返回或设置当前单元格中的HTML代码3、align属性：设置当前单元格的水平对齐方式4、className属性：设置单元格的class名称