我的js錯題集（1）

時間 2019-11-21

標籤我的欄目 JavaScript 简体版

原文原文鏈接

1.什麼屬性用於獲取 HTML 文件的根節點 javascript

AdocumentElement

BrootElement

CdocumentNode

DdocumentRoot

正確答案: A

解析:

html文件的根節點爲html，獲取方式爲document.documentElementhtml

擴展：java

經過父節點獲取子節點：node

parentObj.firstChild　　                                          獲取已知父節點的第一個子節點
parentObj.lastChild　　                                          獲取已知父節點的最後一個子節點
parentObj.childNodes                                             獲取已知父節點的子節點數組(這裏我在IE 7中獲取的是全部直接的子節點)
parentObj.children                                                  獲取已知節點的直接子節點數組（在IE7中和childNodes效果同樣）
parentObj.getElementsByTagName(tagName)     返回已知子節點中類型爲指定值的子節點數組es6

經過臨近節點獲取兄弟節點：正則表達式

neighbourNode.previousSibing 獲取已知節點的前一個兄弟節點
neighbourNode.nextSibing 獲取已知節點的下一個兄弟節點數組

經過子節點獲取父節點：瀏覽器

　　一、childNode.parentNode 獲取已知節點的父節點app

上面的方法基本都是能夠遞歸是使用的，parentObj.firstChild.firstChild.firstChild...可是這樣的代碼有一種傻傻的趕腳。。ide

2.要求用JavaScript實現下面的功能：在一個文本框中內容發生改變後，單擊頁面的其餘部分將彈出一個消息框顯示文本框中的內容，下面語句正確的是

A<input type="text" onClick="alert(this．value)">

B<input type="text" onChange="alert(this．value)">

C<input type="text" onChange="alert(text．value)">

D<input type="text"onClick="alert(value)">

正確答案: B

解析:

onchange事件，在文本框內容發生變化切光標離開時觸發

擴展：

onchange 事件會在域的內容改變時發生。

onchange 事件也可用於單選框與複選框改變後觸發的事件。

onchange事件觸發的關鍵是：事件會在域的內容改變時發生

3.下列對象或數組的建立方式錯誤的是

A var obj = { };

B var obj = { [ ] }

C var obj = [ { } ]

D var obj = { age:30 }

正確答案: B

解析:

JS建立數組的三種方法

1 常規方式建立數組並給數組元素賦值

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）;

數組名.方法

　　 1）push(5,4,3)--向數組末尾添加新的數組項，返回值新數組的長度，原數組改變

2）pop()--刪除數組最後一項，沒有參數，返回值刪除項，原數組改變

3）unshift()--向數組開頭位置添加，返回值是新數組的長度，原數組改變

4）shift()--刪除數組第一項,沒有參數，返回值刪除項，原數組改變

（如下是擴展方法）：

5）splice()--原數組改變

　　 splice(n,m)--從索引(下標)n開始，刪除m個，返回值以數組的形式返回刪除項

splice(n)--從索引n開始刪除到最後

splice(0)--原數組清空，返回一個和原來同樣的新數組

splice(n,m,z)；從索引(下標)n開始，刪除m個，把z添加到刪除的位置

6）slice(n,m)--從索引n開始，查找到索引m處，不包含m，將查找到的以新數組返回，原數組不變

7）concat--數組的拼接,不改變數組，返回最終鏈接好的新數組；

8）數組轉爲字符串:不改變原數組

toString() join('符號') （數組.join（）能夠直接轉數組）

清空數組的方式：

①arr.splice（0）；

②arr.length = 0；

③arr = [ ];

數組的遍歷：

for , for...in

數組可使用for循環遍歷

也可使用for...in遍歷通常使用for...in

for-in的特色：

沒有循環條件

自動取出下標，

下標默認從 0 開始，最大下標數組長度-1

下標的類型爲string

當須要返回兩個值時，能夠用對象{ }或數組[ ]的形式返回；

只能用for...in遍歷對象，for不能遍歷對象；（由於對象的鍵是一個變量）在遍歷時[ ]中不能加引號；

一些數組類型：

整數數組： [12,3,4,5,6]

字符串數組： ["orange","apple","pear"]

對象數組： [{sname:"jack",age:19},{sname:"lily",age:18}]

二維數組： [[1,3,4],[5,6,7],[1,2,5]] （一個數組的每一項都是一個數組）

js建立對象的6種方式總結

一、new 操做符 + Object 建立對象

var person = new Object();
    person.name = "lisi";
    person.age = 21;
    person.family = ["lida","lier","wangwu"];
    person.say = function(){
        alert(this.name);
    }

二、字面式建立對象

var person ={
        name: "lisi",
        age: 21,
        family: ["lida","lier","wangwu"],
        say: function(){
            alert(this.name);
        }
    };

以上兩種方法在使用同一接口建立多個對象時，會產生大量重複代碼，爲了解決此問題，工廠模式被開發。

三、工廠模式

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，所以出現了構造函數模式）。

四、構造函數模式

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 屬性返回對建立此對象的數組、函數的引用

對比工廠模式有如下不一樣之處：

一、沒有顯式地建立對象

二、直接將屬性和方法賦給了 this 對象

三、沒有 return 語句

以此方法調用構造函數步驟：

一、建立一個新對象

二、將構造函數的做用域賦給新對象（將this指向這個新對象）

三、執行構造函數代碼（爲這個新對象添加屬性）

四、返回新對象 ( 指針賦給變量person ？？？ )

能夠看出，構造函數知道本身從哪裏來（經過 instanceof 能夠看出其既是Object的實例，又是Person的實例）

構造函數也有其缺陷，每一個實例都包含不一樣的Function實例（構造函數內的方法在作同一件事，可是實例化後卻產生了不一樣的對象，方法是函數，函數也是對象）

所以產生了原型模式

五、原型模式

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行那樣設置實例本身的屬性（方法）（即所謂的私有屬性），能夠覆蓋原型對象上的同名屬性（方法）。

六、混合模式（構造函數模式+原型模式）

構造函數模式用於定義實例屬性，原型模式用於定義方法和共享的屬性

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.下面能夠獲取瀏覽器在捲動後，隱藏的文檔部分的高度的屬性是

A window.body.scrollTop

B document.body.scrollTop;

C document.scrolTop;

D documentElement.body.scrollTop

正確答案: B

解析:

網頁可見區域寬： 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形成影響。一點小技巧，但很實用。

5.下列對的對常量的描述或定義不對的是

A 常量名只能用大寫

B const PI = 3.11;

C const pi = 3.14

D 常量定義後不能被修改

正確答案: A

解析:

所謂常量即只能讀取不能編輯（刪除，修改）的變量。

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.如下選項中哪一個是正則的量詞 :

A 100

B num

C +

D .

正確答案: C

解析:

+表明其前邊的字符重複1~無限屢次

普通字符

普通字符包括沒有顯式指定爲元字符的全部可打印和不可打印字符。這包括全部大寫和小寫字母、全部數字、全部標點符號和一些其餘符號。

非打印字符

非打印字符也能夠是正則表達式的組成部分。下表列出了表示非打印字符的轉義序列：

字符	描述
\cx	匹配由x指明的控制字符。例如， \cM 匹配一個 Control-M 或回車符。x 的值必須爲 A-Z 或 a-z 之一。不然，將 c 視爲一個原義的 'c' 字符。
\f	匹配一個換頁符。等價於 \x0c 和 \cL。
\n	匹配一個換行符。等價於 \x0a 和 \cJ。
\r	匹配一個回車符。等價於 \x0d 和 \cM。
\s	匹配任何空白字符，包括空格、製表符、換頁符等等。等價於 [ \f\n\r\t\v]。注意 Unicode 正則表達式會匹配全角空格符。
\S	匹配任何非空白字符。等價於 [^ \f\n\r\t\v]。
\t	匹配一個製表符。等價於 \x09 和 \cI。
\v	匹配一個垂直製表符。等價於 \x0b 和 \cK。

特殊字符

所謂特殊字符，就是一些有特殊含義的字符，如上面說的 runoo*b 中的 *，簡單的說就是表示任何字符串的意思。若是要查找字符串中的 * 符號，則須要對 * 進行轉義，即在其前加一個 \: runo\*ob 匹配 runo*ob。

許多元字符要求在試圖匹配它們時特別對待。若要匹配這些特殊字符，必須首先使字符"轉義"，即，將反斜槓字符\ 放在它們前面。下表列出了正則表達式中的特殊字符：

特別字符	描述
$	匹配輸入字符串的結尾位置。若是設置了 RegExp 對象的 Multiline 屬性，則 $ 也匹配 '\n' 或 '\r'。要匹配 $ 字符自己，請使用 \$。
( )	標記一個子表達式的開始和結束位置。子表達式能夠獲取供之後使用。要匹配這些字符，請使用 $ 和 $。
*	匹配前面的子表達式零次或屢次。要匹配 * 字符，請使用 \*。
+	匹配前面的子表達式一次或屢次。要匹配 + 字符，請使用 \+。
.	匹配除換行符 \n 以外的任何單字符。要匹配 . ，請使用 \. 。
[	標記一箇中括號表達式的開始。要匹配 [，請使用 \[。
?	匹配前面的子表達式零次或一次，或指明一個非貪婪限定符。要匹配 ? 字符，請使用 \?。
\	將下一個字符標記爲或特殊字符、或原義字符、或向後引用、或八進制轉義符。例如， 'n' 匹配字符 '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 描述單詞的前或後邊界，\B 表示非單詞邊界。

正則表達式的定位符有：

字符	描述
^	匹配輸入字符串開始的位置。若是設置了 RegExp 對象的 Multiline 屬性，^ 還會與 \n 或 \r 以後的位置匹配。
$	匹配輸入字符串結尾的位置。若是設置了 RegExp 對象的 Multiline 屬性，$ 還會與 \n 或 \r 以前的位置匹配。
\b	匹配一個單詞邊界，即字與空格間的位置。
\B	非單詞邊界匹配。

注意：不能將限定符與定位符一塊兒使用。因爲在緊靠換行或者單詞邊界的前面或後面不能有一個以上位置，所以不容許諸如 ^* 之類的表達式。

若要匹配一行文本開始處的文本，請在正則表達式的開始使用 ^ 字符。不要將 ^ 的這種用法與中括號表達式內的用法混淆。

若要匹配一行文本的結束處的文本，請在正則表達式的結束處使用 $ 字符。

7.如下哪些屬性不是事件對象event的屬性

A offsetX

B clientX

C offsetLeft

D target

正確答案: C

解析:

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中的關鍵字或保留字