1.什么属性用于获取 HTML 文件的根节点
html文件的根节点为html,获取方式为document.documentElement
扩展:
通过父节点获取子节点:
parentObj.firstChild 获取已知父节点的第一个子节点
parentObj.lastChild 获取已知父节点的最后一个子节点
parentObj.childNodes 获取已知父节点的子节点数组(这里我在IE 7中获取的是所有直接的子节点)
parentObj.children 获取已知节点的直接子节点数组(在IE7中和childNodes效果一样)
parentObj.getElementsByTagName(tagName) 返回已知子节点中类型为指定值的子节点数组
通过临近节点获取兄弟节点:
neighbourNode.previousSibing 获取已知节点的前一个兄弟节点
neighbourNode.nextSibing 获取已知节点的下一个兄弟节点
通过子节点获取父节点:
1、childNode.parentNode 获取已知节点的父节点
上面的方法基本都是可以递归是使用的,parentObj.firstChild.firstChild.firstChild...但是这样的代码有一种傻傻的赶脚。。
2.要求用JavaScript实现下面的功能:在一个文本框中内容发生改变后,单击页面的其他部分将弹出一个消息框显示文本框中的内容,下面语句正确的是
onchange事件,在文本框内容发生变化切光标离开时触发
onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。
onchange事件触发的关键是:事件会在域的内容改变时发生
3.下列对象或数组的创建方式错误的是
JS创建数组的三种方法
var myCars = new Array(); myCars[0] = "Saab"; myCars[1] = "Volvo"; myCars[2] = "BMW";
2 简洁方式-直接实例化
var myCars = new Array("Saab","Volvo","BMW");
3 字面-隐式创建
var myCars = ["Saab","Volvo","BMW"];
创建数组并指定长度(只有一个值的时候为起初的长度,可自己增加值来改变这个长度):new Array(size);
数组名.方法
js创建对象的6种方式总结
1、new 操作符 + Object 创建对象
var person = new Object(); person.name = "lisi"; person.age = 21; person.family = ["lida","lier","wangwu"]; person.say = function(){ alert(this.name); }
2、字面式创建对象
var person ={ name: "lisi", age: 21, family: ["lida","lier","wangwu"], say: function(){ alert(this.name); } };
以上两种方法在使用同一接口创建多个对象时,会产生大量重复代码,为了解决此问题,工厂模式被开发。
3、工厂模式
function createPerson(name,age,family) { var o = new Object(); o.name = name; o.age = age; o.family = family; o.say = function(){ alert(this.name); } return o; } var person1 = createPerson("lisi",21,["lida","lier","wangwu"]); //instanceof无法判断它是谁的实例,只能判断他是对象,构造函数都可以判断出 var person2 = createPerson("wangwu",18,["lida","lier","lisi"]); console.log(person1 instanceof Object); //true
工厂模式解决了重复实例化多个对象的问题,但没有解决对象识别的问题(但是工厂模式却无从识别对象的类型,因为全部都是Object,不像Date、Array等,本例中,得到的都是o对象,对象的类型都是Object,因此出现了构造函数模式)。
4、构造函数模式
function Person(name,age,family) { this.name = name; this.age = age; this.family = family; this.say = function(){ alert(this.name); } } var person1 = new Person("lisi",21,["lida","lier","wangwu"]); var person2 = new Person("lisi",21,["lida","lier","lisi"]); console.log(person1 instanceof Object); //true console.log(person1 instanceof Person); //true console.log(person2 instanceof Object); //true console.log(person2 instanceof Person); //true console.log(person1.constructor); //constructor 属性返回对创建此对象的数组、函数的引用
对比工厂模式有以下不同之处:
1、没有显式地创建对象
2、直接将属性和方法赋给了 this 对象
3、没有 return 语句
以此方法调用构造函数步骤:
1、创建一个新对象
2、将构造函数的作用域赋给新对象(将this指向这个新对象)
3、执行构造函数代码(为这个新对象添加属性)
4、返回新对象 ( 指针赋给变量person ??? )
可以看出,构造函数知道自己从哪里来(通过 instanceof 可以看出其既是Object的实例,又是Person的实例)
构造函数也有其缺陷,每个实例都包含不同的Function实例( 构造函数内的方法在做同一件事,但是实例化后却产生了不同的对象,方法是函数 ,函数也是对象)
因此产生了原型模式
5、原型模式
function Person() { } Person.prototype.name = "lisi"; Person.prototype.age = 21; Person.prototype.family = ["lida","lier","wangwu"]; Person.prototype.say = function(){ alert(this.name); }; console.log(Person.prototype); //Object{name: 'lisi', age: 21, family: Array[3]} var person1 = new Person(); //创建一个实例person1 console.log(person1.name); //lisi var person2 = new Person(); //创建实例person2 person2.name = "wangwu"; person2.family = ["lida","lier","lisi"]; console.log(person2); //Person {name: "wangwu", family: Array[3]} // console.log(person2.prototype.name); //报错 console.log(person2.age); //21
原型模式的好处是所有对象实例共享它的属性和方法(即所谓的共有属性),此外还可以如代码第16,17行那样设置实例自己的属性(方法)(即所谓的私有属性),可以覆盖原型对象上的同名属性(方法)。
6、混合模式(构造函数模式+原型模式)
构造函数模式用于定义实例属性,原型模式用于定义方法和共享的属性
function Person(name,age,family){ this.name = name; this.age = age; this.family = family; } Person.prototype = { constructor: Person, //每个函数都有prototype属性,指向该函数原型对象,原型对象都有constructor属性,这是一个指向prototype属性所在函数的指针 say: function(){ alert(this.name); } } var person1 = new Person("lisi",21,["lida","lier","wangwu"]); console.log(person1); var person2 = new Person("wangwu",21,["lida","lier","lisi"]); console.log(person2);
4.下面可以获取浏览器在卷动后,隐藏的文档部分的高度的属性是
网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签
document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。所以,如果要得到网页的真正的scrollTop值,可以这样:
var scrollTop=document.body.scrollTop+document.documentElement.scrollTop;
这两个值总会有一个恒为0,所以不用担心会对真正的scrollTop造成影响。一点小技巧,但很实用。
所谓常量即只能读取不能编辑(删除,修改)的变量。
js并没有原始的常量说法(即自定义的,原生态的),但是可以用一些偏僻的路子去创建。
1:const es6中的声明关键词。
上面声明了两个变量,当执行修改操作时就将报错。从某种程度上来说,const是可以创建变量(基本类型)的。但是对引用类型就捉襟见肘。
当声明的变量是一个引用类型时即对象,对对象的操作(删除,修改,添加)都是可以进行的。
const PI = 3.14159265;
一般不推荐使用 const 关键字,因为它不是 ECMAScript 语法的一部分。当需要常量的时候一般是以命名习惯来约束的,亦即使用大写字母加下划线。
如果需要“真正的”常量的话,可以使用 ECMA 5 的 defineProperty 方法,
例如:
1 var M = {}; 2 Object.defineProperty(M, 'PI', { 3 get: function() { return 3.14; } 4 }); 5 或者 6 7 var M = {}; 8 Object.defineProperty(M, 'PI', { 9 value: 3.14, 10 writable: false 11 });
注意由于这个方法是 ECMA 5 的一部分,所以在 node 上用是完全没有问题的,但是就请不要在浏览器端用了(除非不打算支持 IE 以及一些旧版本的浏览器用户)。
6.以下选项中哪个是正则的量词 :
+代表其前边的字符重复1~无限多次
普通字符
普通字符包括没有显式指定为元字符的所有可打印和不可打印字符。这包括所有大写和小写字母、所有数字、所有标点符号和一些其他符号。
非打印字符
非打印字符也可以是正则表达式的组成部分。下表列出了表示非打印字符的转义序列:
字符 | 描述 |
---|---|
cx | 匹配由x指明的控制字符。例如, cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则,将 c 视为一个原义的 'c' 字符。 |
f | 匹配一个换页符。等价于 x0c 和 cL。 |
匹配一个换行符。等价于 x0a 和 cJ。 | |
匹配一个回车符。等价于 x0d 和 cM。 | |
s | 匹配任何空白字符,包括空格、制表符、换页符等等。等价于 [ f v]。注意 Unicode 正则表达式会匹配全角空格符。 |
S | 匹配任何非空白字符。等价于 [^ f v]。 |
匹配一个制表符。等价于 x09 和 cI。 | |
v | 匹配一个垂直制表符。等价于 x0b 和 cK。 |
特殊字符
所谓特殊字符,就是一些有特殊含义的字符,如上面说的 runoo*b 中的 *,简单的说就是表示任何字符串的意思。如果要查找字符串中的 * 符号,则需要对 * 进行转义,即在其前加一个 : runo*ob 匹配 runo*ob。
许多元字符要求在试图匹配它们时特别对待。若要匹配这些特殊字符,必须首先使字符"转义",即,将反斜杠字符 放在它们前面。下表列出了正则表达式中的特殊字符:
特别字符 | 描述 |
---|---|
$ | 匹配输入字符串的结尾位置。如果设置了 RegExp 对象的 Multiline 属性,则 $ 也匹配 ' ' 或 ' '。要匹配 $ 字符本身,请使用 $。 |
( ) | 标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。要匹配这些字符,请使用 ( 和 )。 |
* | 匹配前面的子表达式零次或多次。要匹配 * 字符,请使用 *。 |
+ | 匹配前面的子表达式一次或多次。要匹配 + 字符,请使用 +。 |
. | 匹配除换行符 之外的任何单字符。要匹配 . ,请使用 . 。 |
[ | 标记一个中括号表达式的开始。要匹配 [,请使用 [。 |
? | 匹配前面的子表达式零次或一次,或指明一个非贪婪限定符。要匹配 ? 字符,请使用 ?。 |
将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。例如, 'n' 匹配字符 'n'。' ' 匹配换行符。序列 '\' 匹配 "",而 '(' 则匹配 "("。 | |
^ | 匹配输入字符串的开始位置,除非在方括号表达式中使用,此时它表示不接受该字符集合。要匹配 ^ 字符本身,请使用 ^。 |
{ | 标记限定符表达式的开始。要匹配 {,请使用 {。 |
| | 指明两项之间的一个选择。要匹配 |,请使用 |。 |
限定符
限定符用来指定正则表达式的一个给定组件必须要出现多少次才能满足匹配。有 * 或 + 或 ? 或 {n} 或 {n,} 或 {n,m} 共6种。
正则表达式的限定符有:
字符 | 描述 |
---|---|
* | 匹配前面的子表达式零次或多次。例如,zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。 |
+ | 匹配前面的子表达式一次或多次。例如,'zo+' 能匹配 "zo" 以及 "zoo",但不能匹配 "z"。+ 等价于 {1,}。 |
? | 匹配前面的子表达式零次或一次。例如,"do(es)?" 可以匹配 "do" 、 "does" 中的 "does" 、 "doxy" 中的 "do" 。? 等价于 {0,1}。 |
{n} | n 是一个非负整数。匹配确定的 n 次。例如,'o{2}' 不能匹配 "Bob" 中的 'o',但是能匹配 "food" 中的两个 o。 |
{n,} | n 是一个非负整数。至少匹配n 次。例如,'o{2,}' 不能匹配 "Bob" 中的 'o',但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。 |
{n,m} | m 和 n 均为非负整数,其中n <= m。最少匹配 n 次且最多匹配 m 次。例如,"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。 |
由于章节编号在大的输入文档中会很可能超过九,所以您需要一种方式来处理两位或三位章节编号。限定符给您这种能力。下面的正则表达式匹配编号为任何位数的章节标题:
/Chapter [1-9][0-9]*/
请注意,限定符出现在范围表达式之后。因此,它应用于整个范围表达式,在本例中,只指定从 0 到 9 的数字(包括 0 和 9)。
这里不使用 + 限定符,因为在第二个位置或后面的位置不一定需要有一个数字。也不使用 ? 字符,因为使用 ? 会将章节编号限制到只有两位数。您需要至少匹配 Chapter 和空格字符后面的一个数字。
如果您知道章节编号被限制为只有 99 章,可以使用下面的表达式来至少指定一位但至多两位数字。
/Chapter [0-9]{1,2}/
上面的表达式的缺点是,大于 99 的章节编号仍只匹配开头两位数字。另一个缺点是 Chapter 0 也将匹配。只匹配两位数字的更好的表达式如下:
/Chapter [1-9][0-9]?/
或
/Chapter [1-9][0-9]{0,1}/
*、+限定符都是贪婪的,因为它们会尽可能多的匹配文字,只有在它们的后面加上一个?就可以实现非贪婪或最小匹配。
例如,您可能搜索 HTML 文档,以查找括在 H1 标记内的章节标题。该文本在您的文档中如下:
<H1>Chapter 1 - 介绍正则表达式</H1>
贪婪:下面的表达式匹配从开始小于符号 (<) 到关闭 H1 标记的大于符号 (>) 之间的所有内容。
/<.*>/
非贪婪:如果您只需要匹配开始和结束 H1 标签,下面的非贪婪表达式只匹配 <H1>。
/<.*?>/
如果只想匹配开始的 H1 标签,表达式则是:
/<w+?>/
通过在 *、+ 或 ? 限定符之后放置 ?,该表达式从"贪心"表达式转换为"非贪心"表达式或者最小匹配。
定位符
定位符使您能够将正则表达式固定到行首或行尾。它们还使您能够创建这样的正则表达式,这些正则表达式出现在一个单词内、在一个单词的开头或者一个单词的结尾。
定位符用来描述字符串或单词的边界,^ 和 $ 分别指字符串的开始与结束, 描述单词的前或后边界,B 表示非单词边界。
正则表达式的定位符有:
字符 | 描述 |
---|---|
^ | 匹配输入字符串开始的位置。如果设置了 RegExp 对象的 Multiline 属性,^ 还会与 或 之后的位置匹配。 |
$ | 匹配输入字符串结尾的位置。如果设置了 RegExp 对象的 Multiline 属性,$ 还会与 或 之前的位置匹配。 |
匹配一个单词边界,即字与空格间的位置。 | |
B | 非单词边界匹配。 |
注意:不能将限定符与定位符一起使用。由于在紧靠换行或者单词边界的前面或后面不能有一个以上位置,因此不允许诸如 ^* 之类的表达式。
若要匹配一行文本开始处的文本,请在正则表达式的开始使用 ^ 字符。不要将 ^ 的这种用法与中括号表达式内的用法混淆。
若要匹配一行文本的结束处的文本,请在正则表达式的结束处使用 $ 字符。
7.以下哪些属性不是事件对象event的属性
C、实时获取元素针对于offsetParent的left坐标
Event 对象
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!
其中:event.target不支持IE浏览器。
1,事件句柄(事件函数):以on开头的若干
2,鼠标/键盘属性:

3,

Js event事件在IE、FF兼容性问题
1,event对象
IE:有window.event对象
FF:没有window.event对象。可以通过给函数的参数传递event对象。
如:
<input type="button" onmousemove="showDiv(event);"//event不需要加引号
function showDiv(event)
{
var event=window.event||event;
event.clientX;
event.clientY;
}
2,event.srcElement||event.target
Javascript event.srcElement
感觉这个挺好,可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称。
注意获取的标记都以大写表示,如"TD","TR","A"等。所以把看过的一些抄下来,不记得的时候再来看看。
event.srcElement从字面上可以看出来有以下关键字:事件,源 他的意思就是:当前事件的源,我们可以调用他的各种属性 就像:document.getElementById("")这样的功能,经常有人问 firefox 下的 event.srcElement 怎么用,在此详细说明:
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:firefox 下的 event.target = IE 下的 event.srcElement
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
8.下列哪个不是javascript中的关键字或保留字
关键字是js有特定含义的词汇,保留字是js后面扩展会用的词汇,都不能用来作为变量名和函数名,请查看上图:
let在某个{}内部使用时,外部不能访问该let声明的变量
用 let 声明变量没有声明提升
let声明的变量, 变量声明之前该变量不可用,这种现象就称作暂时性死区;
let 不允许重复修改变量
不允许修改的是常量
1.let和var类似,
(1)let与var不同的点:let没有预编译,变量提升这个过程,let声明的变量只能在当前作用域内访问到(一个{}可以看做是一个作用域),在全局var声明的变量属于window,而let声明的不属于
let a = 12; (function () { console.log(a); let a = 5; }());
可见上面代码中是会报错的,如果a是var声明的,那么就不会报错、输出a的值是undefined
(2)虽然说let声明的变量不允许重复声明,但是在for循环中貌似又是可以的

for (let i = 0; i < 10; i++) { let i = "abc"; console.log(i); //这里输出的是abc }
for (let i = 0; i < 10; i++) { let i = "abc"; console.log(i); //这里输出的是abc }
上面for声明i的小括号可以看做是一个父级作用域,{}执行体可以看做是子级作用域,具体for为什么可以重复声明我也不是很清楚。。
(3)块级作用域{},在es6当中引入块级作用域,每个{}都属于一个块级,然而每个块级的中的变量都是相互隔离的访问不到的

//块级作用域
{
let ooo = 13;
{
let ooo = 18;
console.log(ooo); //18
}
console.log(ooo); //13
}
//块级作用域 { let ooo = 13; { let ooo = 18; console.log(ooo); //18 } console.log(ooo); //13 }
{ let ooo = 13; { console.log(ooo); //报错 (此处为死区) let ooo = 12; } console.log(ooo); }
(4)let关键字和var关键字在for中的区别
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i]=function(){
console.log(i);
}
}
arr[6](); //输出的是10
var arr = [];
for (let i = 0; i < 10; i++) {
arr[i]=function(){
console.log(i);
}
}
arr[2](); //输出的是2
var arr = []; for (var i = 0; i < 10; i++) { arr[i]=function(){ console.log(i); } } arr[6](); //输出的是10 var arr = []; for (let i = 0; i < 10; i++) { arr[i]=function(){ console.log(i); } } arr[2](); //输出的是2
for循环中用var声明的最后输出的是10大家应该都是知道。因为在函数执行的时候i已经变成10了而为什么let声明的却不是10呢,是因为let声明的变量只在本轮循环有效,所以每一次循环i都是一个新的变量,所以最后输出的是6。有点疑惑的是,如果说每次i都是重新声明的,那怎么知道上一轮循环的是多少,从而计算出本轮循环的值?这是因为JavaScript引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。
10.字符串的match方法的语法格式为:str.match(searchvalue) 或者 str.match(regexp),下列说法错误的是()注:RegExp是正则的构造函数
如果regexp参数不是RegExp对象,则需要首先把它传递给RegExp构造函数,将其转换为RegExp对象
函数的返回值存放匹配结果的数组。该数组的内容依赖于regexp是否具有全局标志g
全局匹配返回的数组的内容与非全局匹配返回的数组内容是一样的
全局匹配时,返回所有与regexp匹配的内容,非全局匹配时,第一个元素为匹配内容,后面为分组捕获的内容
foo.att
foo["att"]
foo{"att"}
访问一个对象的属性有两种方式:
1. foo.att
2. foo["att"]
D选项与B选项属于相同的访问方式
12.正则对象的方法包括
test();
index()
exec()
match()
正则的对象方法只有2个,其他属于字符串的方法.
exec() 找到了返回数组,找不到返回null.
test() true或false.
13.如何阻止事件冒泡
cancelBubble
return true
event.preventDefault
event.stopPropagation()
浏览器有一些默认行为,比如右键菜单,点击跳转,文字选中效果,拖拽鬼影等,如果出现莫名其妙的问题,也可能是默认行为导致的,阻止默认行为:event.preventDefault和return false,阻止冒泡:cancelBubble和event.stopPropagation();