js操作dom节点
js操作dom节点
https://www.360docs.net/doc/9d16138473.html,/hujunsong/article/details/6650334 1.访问节点
document.getElementById(id);
返回对拥有指定id的第一个对象进行访问
document.getElementsByName(name);
返回带有指定名称的节点集合
注意:Element s
document.getElementsByTagName(tagname);
返回带有指定标签名的对象集合
注意:Element s
document.getElementsByClassName(classname);
返回带有指定class名称的对象集合
注意:Element s
2.生成节点
document.createElement(eName);
创建一个节点
document.createAttribute(attrName);
对某个节点创建属性
document.createTextNode(text);
创建文本节点
3.添加节点
document.insertBefore(newNode,referenceChild);
在某个节点前插入节点
parentNode.appendChild(newNode);
给某个节点添加子节点
4.复制节点
cloneNode(true | false);
复制某个节点
参数:是否复制原节点的所有属性
5.删除节点
parentNode.removeChild(node)
删除某个节点的子节点
node是要删除的节点
注意:IE会忽略节点间生成的空白文本节点(例如,换行符号),而Mozilla不会这样做。在删除指定节点的时候不会出错,但是如果要删除最后一个子结点或者是第一个子结点的时候,就会出现问题。这时候,就需要用一个函数来判断首个子结点的节点类型。
元素节点的节点类型是1,因此如果首个子节点不是一个元素节点,它就会移至下一个节点,然后继续检查此节点是否为元素节点。整个过程会一直持续到首个元素子节点被找到为止。通过这个方法,我们就可以在Internet Explorer 和Mozilla 得到正确的方法。
6.修改文本节点
appendData(data);
将data加到文本节点后面
deleteData(start,length);
将从start处删除length个字符
insertData(start,data)
在start处插入字符,start的开始值是0;
replaceData(start,length,data)
在start处用data替换length个字符
splitData(offset)
在offset处分割文本节点
substringData(start,length)
从start处提取length个字符
7.属性操作
getAttribute(name)
通过属性名称获取某个节点属性的值
setAttribute(name,value);
修改某个节点属性的值
removeAttribute(name)
删除某个属性
< head>
function Load_message()
{
var oimg=document.getElementById("a");
alert(oimg.getAttribute("border"));
oimg.setAttribute("alt","DOM Test");
}
< /head>
< body onload="Load_message();">
< /body>
< /html>
8.查找节点
parentObj.firstChild
如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用parentObj.firstChild.firstChild.....
https://www.360docs.net/doc/9d16138473.html,stChild
获得一个节点的最后一个节点,与firstChild一样也可以进行递归使用
https://www.360docs.net/doc/9d16138473.html,stChild.....
parentObj.childNodes
获得节点的所有子节点,然后通过循环和索引找到目标节点
9.获取相邻的节点
neborNode.previousSibling :获取已知节点的相邻的上一个节点
nerbourNode.nextSlbling: 获取已知节点的下一个节点
10.获取父节点
childNode.parentNode:得到已知节点的父节点
11替换节点方法replace(new,old)
< head>
function replaceMessage()
{
var oNewp=document.createElement("p");
var oText=document.createTextNode("World Hello");
oNewp.appendChild(oText);
var oOldp=document.body.getElementsByTagName("p")[0];
oOldp.parentNode.replaceChild(oNewp,oOldp);
}
< /head>
< body onload="replaceMessage();">
hello world!
< /body>
< /html>
原生JavaScript对于DOM的操作总结
一、DOM创建** DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性。DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: 1:Element,元素 2:Attribute,属性 3:Text,文本 DOM节点创建最常用的便是document.createElement和document.createTextNode方法: var node1 = document.createElement('div'); var node2 = document.createTextNode('hello world!'); **二、DOM查询** // 返回当前文档中第一个类名为"myclass" 的元素 var el = document.querySelector(".myclass"); // 返回一个文档中所有的class为"note"或者"alert"的div元素 var els = document.querySelectorAll("div.note, div.alert"); // 获取元素 var el = document.getElementById('xxx'); var els = document.getElementsByClassName('highlight'); var els = document.getElementsByTagName('td'); Element也提供了很多相对于元素的DOM导航方法: // 获取父元素、父节点 var parent = ele.parentElement; var parent = ele.parentNode;//只读,没有兼容性问题 var offsetParent=ele.offsetParent;//只读,找到最近的有定位的父节点。//没有定位父级时,默认是body;但在IE7以下,如果当前元素没有定位属性,返回body,如果有,返回HTML;//如果当前元素某个父级触发了haslayout,则返回触发了haslayout这个元素。 // 获取子节点,子节点可以是任何一种节点,可以通过nodeType来判断 var nodes = ele.children;//标准下、非标准下都只含元素类型,但对待非法嵌套的子节点,处理方式与childNodes一致。 var nodes = ele.childNodes;//非标准下:只包含元素类型,不会包含非法嵌套的子节点。 //标准下:包含元素和文本类型,会包含非法嵌套的子节点。 //获取元素属性列表 var attr = ele.attributes;
4:JavaScriptjavaDOM
JavaScript制作页面特效课后练习 1.在某页面中有一个图片和五个超链接,如下图所示,单击不同的数字超链接显示不同的 图片: 图1 图片幻灯片显示效果 提示: (1)默认显示一个图片,五个超链接调用同一个传参函数,参数设置为显示图片的名称。 (2)使用“对象名.属性值”或setAttribute()的方式改变图片的名称。 2.做一个模仿删除用户的页面,功能如下: 默认情况下,在一个Table 里面放置若干用户信息,后面有“删除”链接:
图2 模仿删除用户的页面效果1 点击“删除”链接,弹出对话框,提示用户是否继续操作: 图3 模仿删除用户的页面效果2 用户点击确定后,要删除的一行,自动加上删除线,表示处于删除状态: 图4 模仿删除用户的页面效果3 提示: (1)使用confirm 弹出确认框,如果用户点击“确定”,则返回true,进行下一步操作; (2)定义一个类样式,用来标识删除状态,如果用户点击了“确定”按钮之后,该行所对 应的tr 标签,自动应用该类样式。 3.做一个横向导航菜单,并且每一项均包含一个二级的菜单,效果图如下:
图5 横向导航菜单 当鼠标不在菜单上时,二级菜单不显示,当鼠标移动到任一项上时,显示该项对应的二级菜 单。 提示: (1)使用对象的display 属性可以控制对象的显示与隐藏; (2)使用相对定位/绝对定位来控制二级菜单的显示位置; (3)使用鼠标的两个事件(onmouseove/onmouseout)来触发控制函数。 4.做一个横向不间断滚动的特效,效果图如下:
图6 图片横向滚动特效 要求:图片始终横向向左滚动,并且每一张图片首尾相连,不存在间断。 提示: (1)若要使图片不间断,则需要将图片列表重复一次,这样第一遍的末尾图片和第二遍的 开始图片就能相连了,即使用innerHTML 属性让图片内容翻倍;(2)使用setInterval()方法,可以控制一个函数每隔多少毫秒执行一次; (3)使用绝对定位与相对定位结合,可以使图片所在的层相对于父层的位置可控,方便随 着计时器的执行,left 的值递减;
《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 (课程英文名称) 课程编号:201509210011 学分:5学分 学时:64学时(其中:讲课学时:45 上机学时: 19 ) 先修课程:计算机基础、计算机网络、计算机应用 后续课程:UI设计、 JavaScript网页特效 适用专业:信息及其计算机相关专业 开课部门:计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习,学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向,熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事(2学时) [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用
使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准,明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作,能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面(4学时) [相关案例] 【案例1】简单的网页: 【案例2】新闻页面: 【案例3】图文混排: [知识点] HTML文档基本格式
第4章 JQuery中的DOM操作-实训报告
邯郸学院信息工程学院实训报告
需求说明 在页面中有四幅小图片和一个图片展示区域,当鼠标移入某幅小图片时,在图片展示区域可看到其对应的大图。为凸显当前的小图状态,把其它三幅小图透明度设为,如图1所示。 图1 图片展示效果 实现思路及步骤 1.设计页面HTML结构,应用CSS样式。 2.为四幅小图片绑定鼠标移入事件。 3.获取当前发生鼠标移入事件的小图片的src属性,将其作为大图的src属性值。这样大图也就随之改变了。 4.为凸显当前的小图状态,把其它三幅小图透明度设为。 实训2.制作留言板前端局部更新效果 训练要点 (1)进一步练习选择器的使用 (2)练习创建节点和插入节点的方法 需求说明 当在“昵称”和“留言内容”文本框内输入信息后,单击“单击这里提交留言”按钮,输入的信息会显示在页面上端的留言板中,如图2所示。若没有输入昵称
和留言内容,单击“单击这里提交留言”时不能发送留言。 图2 留言板前端局部更新效果 实现思路及步骤 1.设计页面HTML结构,应用CSS样式。 2.找到“单击这里提交留言”按钮,绑定onclick事件。 3.在“昵称”和“留言内容”文本框中显示提示文字,获得焦点时提示文字消失,失去焦点时若内容为空,则再次显示提示文字。 4.获取用户输入的“昵称”和“留言内容”。 5.若用户输入了“昵称”和“留言内容”,则创建一条留言,并显示在页面上面的留言板中。 6.将“昵称”和“留言内容”文本框的value值变为初始值。 实训3. 制作邮件删除效果 训练要点 (1)进一步练习选择器的使用 (2)练习删除节点的方法
需求说明 在邮件列表前都有一个复选框,单击可以选中或取消选中。当单击“全选/全不选”按钮,所有复选框都随之选中或取消选中。单击“删除邮件”按钮可删除被选中的邮件,如图3所示。 图3邮件删除效果 实现思路及步骤 1.设计页面HTML结构,应用CSS样式。 2.找到“全选/全不选”按钮,绑定onclick事件。 3.查找所有的复选框,把每个复选框的checked属性值变为true或false,实现全选或全不选。 4.找到“删除邮件”按钮,绑定onclick事件。 5.查找所有checked属性值为true的复选框,删除其所在的行,即删除了该邮件。实训4. 表格隔行变色和当前行变色 训练要点 (1)进一步练习选择器的使用 (2)练习追加样式、删除样式、改变css样式的方法 需求说明 请使用jQuery实现如图4所示的学生信息表,表格的奇数行和偶数行背景颜色不同,奇数行背景色为#d9ffdc,偶数行背景色为#a5e5aa。表头的背景色为#00a40c,
网页设计与制作项目教程(HTML+CSS+JavaScript)(一般)
《网页设计与制作项目教程()(一般)》试卷 得分 一、单选题(每题2分,共计30分) 1.关于<>标记的描述,下列选项中正确的是()。() A、是表格中的单元格标记 B、可以单独使用 C、是表格中的行标记 D、没有属性 2.若超链接的属性,需要链接到页面中的锚点,以下书写正确的是()() A、 B、 C、 D、 3.中,通过链接伪类可以实现不同的链接状态。下列用来定义未访问时超链接状态的是()()A、 B、 C、 D、4.下列有关样式,说法正确的是()。() A、样式必须写在一对;标签内部 B、用于设置页面中的文本内容、图片的外形以及版面的布局等外观显示样式 C、只有外部的文件才是符合结构与表现分离的特点 D、目前流行的版本为3 5.下列样式代码中,可以实现相对定位模式的是()。() A、: ; B、: ; C、: ; D、: ; 6.关于样式代码“{:200; :15; :20;}”下列说法正确的是()。() A、的总宽度为200 B、的总宽度为270 C、的总宽度为235 D、以上说法均错误 7.关于行内式引入样式表,以下书写正确的是()() A、 :12; ;段落文本; B、 :12, ;段落文本; C、 :12; ;段落文本; D、 :12; ;段落文本; 8.使用标签指定式选择器,让段落应用名为的类,下列写法正确的是( )() 总分题号一二三四五题分 得分
A、 {;} B、{;} C、{;} D、{;} 9.下列选项中,调用名为"" 的函数正确的是()() A、 B、() C、() D、 10.认真阅读下面代码,并按要求进行作答。1=" a "2=" "312;根据上述代码,3的运算结果是()() A、 B、 C、 D、 11.关于有序列表的描述,下列说法正确的是()() A、有序列表没有排列顺序 B、有序列表按顺序排列,并不带有序号 C、有序列表按顺序排列并通过属性定义序号样式 D、有序列表不可以和无序列表嵌套使用 12.若要在网页中插入样式表,以下用法中正确的是()() A、; B、; C、; D、; 13.下列选项中,用于删除当前节点的子节点的方法是()() A、() B、() C、() D、() 14.以下属性中,不能增加盒子尺寸的属性是()。() A、 B、 C、 D、 15.网页程序设计中,运行下面的代码,则对话框中将显示()。< ""> 3 2 (2)(z);<>() A、2 B、2.5 C、5 D、16 得分 二、多选题(每题3分,共计15分)
HTML DOM简要教程
第一部分HTML DOM简介 1 DOM简介 HTML文档对象模型 HTML文档对象模型(Document Object Model)定义了访问和处理 HTML 文档的标准方法。HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。 什么是 DOM? 通过JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。 DOM 被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3) DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。 ?Core DOM 定义了一套标准的针对任何结构化文档的对象 ?XML DOM定义了一套标准的针对XML 文档的对象 ?HTML DOM定义了一套标准的针对HTML 文档的对象 2 DOM节点 节点 根据 DOM,HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的: ?整个文档是一个文档节点 ?每个HTML 标签是一个元素节点 ?包含在HTML 元素中的文本是文本节点 ?每一个HTML 属性是一个属性节点 ?注释属于注释节点 Node层次 节点彼此都有等级关系。 HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。 下面这个图片表示一个文档树(节点树): 3 DOM节点树 文档树(节点数)
web开发知识练习(HTML标签和JavaScript脚本)
网上客服培训考核 ---阶段二HTML标签和JavaScript脚本 试题类型:HTML标签和JavaScript脚本 考核类型:开卷
1. HTML(Hypertext Markup Language超文本标记语言)是一种用来制作超文本文 档的简单标记语言。利用各种标记(tags)来标识文档的结构以及标识超链(Hyperlink)的信息 2.HTML的标记总是封装在由 < 和 > 构成的一对尖括号之中。 除少数几个转义序列之外,HTML标记忽略大小写,即
、
、、
等众多的标记它们所定义的文本、图像等将会在浏览器的框内显示出来,标记中还可以有很多属性,以下是主要的几种设置背景颜色bgcolor =”颜色码”,设置文本颜色 text = “颜色码”,设置链接颜色 link = “颜色码”,设置已使用的链接的颜色 vlink = “颜色码”,设置正在被击中的链接的颜色 alink = “颜色码”。 7.
……,一共有六对标题的标记对 13.用来使文本以粗体效果的形式输出; 14.用来使文本以斜体效果的形式输出; 15.用来使文本以带下划线的形式输出。 16.则用来输出加重语气文本(通常也是斜体加黑体)。 17. 是一对很有用的标记对,它可以对输出文本的字体大小、颜色进 行随意地改变,这些改变主要是通过对它的两个属性 size 和 color 的控制来实现的。 size属性用来改变字体的大小,取值范围从1到7;而color属性则用来改变文本的颜色 18. 是单标记,它通过src属性指定当前位置要插入的图像文件,标记还有alt、javascript_dom
什么是DOM? 通过JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口,连同对HTML元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。 在1998年,W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。 所有的浏览器都执行了这个标准,因此,DOM的兼容性问题也几乎难觅踪影了。 DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。 DOM被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3): Core DOM 定义了一套标准的针对任何结构化文档的对象 XML DOM 定义了一套标准的针对XML文档的对象 HTML DOM 定义了一套标准的针对HTML文档的对象。 HTML DOM 节点 HTML文档中的每个成分都是一个节点。 节点 根据DOM,HTML文档中的每个成分都是一个节点。 DOM是这样规定的: ?整个文档是一个文档节点 ?每个HTML标签是一个元素节点 ?包含在HTML元素中的文本是文本节点 ?每一个HTML属性是一个属性节点
注释属于注释节点 Node 层次 节点彼此都有等级关系。 HTML文档中的所有节点组成了一个文档树(或节点树)。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。 文档树(节点数) 请看下面这个HTML文档:
DOM Lesson one
Hello world! 上面所有的节点彼此间都存在关系。 除文档节点之外的每个节点都有父节点。举例, 和的父节点是节点,文本节点"Hello world!"的父节点是节点。 大部分元素节点都有子节点。比方说,节点有一个子节点:和是同辈,因为它们的父节点均是节点。 节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点,以此类推。比方说,所有的文本节点都是节点的后代,而第一个文本节点是节点的后代。 节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点,以此类推。比方说,所有的文本节点都可把节点作为先辈节点。关于JavaScript DOM的学习总结
关于JavaScript的学习总结 通过对《JavaScript DOM编程艺术》这本书的学习,总共学习到三大部分的内容:JavaScript1,JavaScript DOM和CSS样式表。CSS和JavaScript 都是通过控制页面标签的方式,来完善页面,使页面更美观,内容更丰富。 一、JavaScript部分 1.关于JavaScript js脚本语言 JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。 2.JS变量 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。如果一个变量没有声明就使
用,或是声明了没有设置值都是undefined。 3.数据类型的定义 数值类型: var age=33; 字符串类型: var mood=”happy” 布尔值类型: var add=true; 数组类型: var list= Array(2) list[0]=”jhon”; list[1]=33; 或者: var list=Array(“jhon”,33) (注:数组内可定义任意类型的数据,且数组下标从0 开始) NULL类型: var name=null ;或name=””; Undefined类型: var person; 对象类型: var jer= new person; 对象类型是一种非常重要的数据类型.对象是自我包含的数据集合,包含在对象里的数据可以通过两种方式--属性(property)和方法(method) 访问 例如: person.age Math.round() 4.JS操作符 算数操作符:加法(+),减法(-),乘法(*),除法(/) 如: var num=1+1; var num=num-1; var num=num*num; var num=num/2;
DOM常用节点类型汇总
https://www.360docs.net/doc/9d16138473.html, web前端培训教程:DOM常用节点类型汇总 DOM 基础课程中,我们了解了DOM 的节点并且了解怎样查询和操作节点,而本身这些不同的节点,又有着不同的类型。
https://www.360docs.net/doc/9d16138473.html, 1.Node 类型 Node 接口是DOM1 级就定义了,Node 接口定义了12 个数值常量以表示每个节点的类型值。除了IE 之外,所有浏览器都可以访问这个类型。
https://www.360docs.net/doc/9d16138473.html, 虽然这里介绍了12 种节点对象的属性,用的多的其实也就几个而已。 alert(Node.ELEMENT_NODE); //1,元素节点类型值 alert(Node.TEXT_NODE); //2,文本节点类型值 我们建议使用Node 类型的属性来代替1,2 这些阿拉伯数字,有可能大家会觉得这样岂不是很繁琐吗?并且还有一个问题就是IE 不支持Node 类型。 如果只有两个属性的话,用1,2 来代替会特别方便,但如果属性特别多的情况下,1、2、3、4、5、6、7、8、9、10、11、12,你根本就分不清哪个数字代表的是哪个节点。当然,如果你只用1,2 两个节点,那就另当别论了。 IE 不支持,我们可以模拟一个类,让IE 也支持。 if (typeof Node == 'undefined') { //IE 返回 window.Node = { ELEMENT_NODE : 1,
https://www.360docs.net/doc/9d16138473.html, TEXT_NODE : 3 }; } 2.Document 类型 Document 类型表示文档,或文档的根节点,而这个节点是隐藏的,没有具体的元素标签。 document; //document document.nodeType; //9,类型值 document.childNodes[0]; //DocumentType,第一个子节点对象 document.childNodes[0].nodeType; //非IE 为10,IE 为8 document.childNodes[1]; //HTMLHtmlElement document.childNodes[1].nodeName; //HTML 如果想直接得到标签的元素节点对象HTMLHtmlElement,不必使用childNodes属性这么麻烦,可以使用documentElement 即可。 document.documentElement; //HTMLHtmlElement 在很多情况下,我们并不需要得到标签的元素节点,而需要得到更常用的
JAVASCRIPT
Javascript 114、alert怎样换行? \r\n 115、什么情况用HTML控件,什么情况用WEB控件,并比较两者差别 如果有数据提交到server端时用web control好。一般为了提高效率能用html control在客户端执行,就用html control。 116、JavaScript中的对象. JavaScript中的Object是一组数据的key-value的集合,有点类似于Java中的有这些数据都是Object里的property.通常情况下,JavaScript中建立一个对象用”new”加上constructor function来实现.如new Date(),new Object()等. var book=new Object(); https://www.360docs.net/doc/9d16138473.html,="JavaScript is Cool"; book.author="tom"; book.pages=514; 上面例子中的name和page就是名为book的对象中的property.我们可以用delete 来删除Object中的property:“delete https://www.360docs.net/doc/9d16138473.html,;”.除了Object,Date等buildin 的对象外,我们可以写自己的constructor function,然后使用new就可以建立自己的对象.如上面的book可以写成: function Book(name,author,page){ https://www.360docs.net/doc/9d16138473.html,=name; this.author=author; this.page=page; } var abook=new Book("JavaScript is Cool","tom",514); 117、function的用法 在JavaScript中,function是一种数据类型,所有的function都是从buildin的Function object衍生的对象.所以在JavaScript中function可以作为参数传递,可以作为Object的property,也可以当作函数返回值.function在JavaScript中有两种用法,一种是当作constructor,前面加上new keyword用来建立对象.一种是当作method,为其他对象调用. 注意function和method在中文里的意思相当,在有些语言里也可以通用.但是在JavaScript中,它们还是有所区别的.function本身是是一个对象,而当作为一个方法他属于一个对象时,就成为了一个这个对象的method,相当于一个对象种的属性.也就是说method是相对于一个对象而言的,function在某些情况下成为了一个对象的method. function Book(name,author,page){ https://www.360docs.net/doc/9d16138473.html,=name; this.author=author; this.page=page;
使用phantomjs操作DOM并对页面进行截图需要注意的几个问题
使用phantomjs操作DOM并对页面进行截图需要注意的几个问题 phantomjs是一个无界面浏览器,可用于网页截图和前端自动化测试,基于webkit 内核(也就是chrome使用的内核),并使用js编写业务脚本来请求、浏览和操作页面。最近前端监控需要用到phantomjs,特地研究了一下这个组件,遇到几个坑,这里汇总起来,希望对大家尤其是刚入门者有所帮助。 1、如何操作页面中的DOM元素? 这个问题比较简单,官方API提供了page.evaluate函数,范例代码: page.evaluate(function() { var plist = document.querySelectorAll("a");//获取所有链接 }); 2、如何滚动到页面底部? 部分页面使用了lazyload,比如图片或js的延迟加载,只有滚动到底部才会触发,因此对于这种页面,如果要展示完整的页面,则需设法使底部可见,主要有3个办法: 1、使浏览器足够大,这样底部就显示了,可以设置viewPortSize很大:page.viewportSize = {width: 4800,height: 8000}; 2、通过BOM方法操作滚动条,可以把滚动条滚动到一个很大的值,如:window.scrollTo(0,10000);也可以滚动到适应的高度:window.document.body.scrollTop = document.body.scrollHeight; 3、如何延迟截图? 页面请求的资源,如图片、异步cgi、js等,返回的时间以及执行的长短都是不确定的,如果截图过早,可能很多空白区域,因此需要定时截图,在打开页面后,使用setTimeout来延迟截图: window.setTimeout(function () { page.render("json2form.png"); phantom.exit(); }, 1000);
JavaScript对Table操作大全
js对Table操作大全