DOM+面向對象面試題

時間 2019-12-13

原文原文鏈接

1.dom常見的節點類型---------------------------解彬1510-B
1.nodeType------節點類型，元素節點是1，文本節點是3.
2.firstChild----該元素節點包含的第一個子節點
3.lastChild---該元素節點包含的最後一個子節點
4.nextSibling----該節點的後一個兄弟節點
5.previousSibling---該節點的前一個兄弟節點
6.childNodes----子節點列表，能夠經過node.childNodes[index]來獲取子節點
7.nodeName----節點名稱，對於元素節點，返回tagName，對於文本返回#textjavascript

2.dom方法大全---------------------------解彬1510-B

1.document.createElement(TagName) --建立指定元素
2._dom.appendChild(子元素)----添加新節點
3._dom.getAttribute(屬性名)----返回元素的屬性
4._dom.setAttribute(屬性名，屬性值)----設置元素屬性
5._dom.removeAtrribute(屬性名)----刪除屬性
6._dom.removeChild(子元素)----刪除節點
7._dom.replaceChild(新元素，子元素)----替換節點
8._dom.hasChildNodes()-----是否有子元素
3.什麼是dom？---------------------------解彬1510-Bcss

dom其實就是把一個html或者xml等符合w3c標準的文檔內容模擬成一個java對象，這樣才能給java或者js來操做。
；
4.寫一個獲取非行間樣式的函數---------------------------解彬1510-B
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)//ie
{
return obj.currentStyle(attr);
}
else{//標準瀏覽器
obj.getComputedStyle(attr,false);
}
}
else
{
obj.style[attr] = value;
}
}html

5.阻止冒泡函數---------------------------解彬1510-B
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
document.getElementById('need_hide').onclick = function(e) {
stopPropagation(e);
}
6.JS的繼承性---------------------------解彬1510-B
window.color = 'red';
var o = {color: 'blue'};
function sayColor(){
alert(this.color);
}
//一、this的指向
//二、call的用法
sayColor(); //red
sayColor.call(this); //red this指向的是window對象
sayColor.call(window); //red
sayColor.call(o); //bluejava

7.document load 和document ready的區別---------------------------解彬1510-B
Document.onload 是在結構和樣式加載完才執行js
Document.ready原生種沒有這個方法，jquery中有 $().ready(function)
DOM Ready是在dom加載完成後就能夠直接對dom進行操做，好比一張圖片只要<img>標籤完成，不用等這個圖片加載完成，
就能夠設置這個圖片的寬高的屬性或樣式等；Dom Load是在整個document文檔（包括了加載圖片及其餘信息）加載完成後就
能夠對dom直接進行操做，好比一張圖片要等這個圖標加載完成後才能設置圖片的寬高的屬性或樣式等；好比一個圖片的瀏覽效果，
一般若是圖片尺寸很大的狀況下，爲了阻止圖片把頁面撐開一般會限定圖片的寬高或給高度，若是是單張圖片或者是多張規格比較
贊成的圖片下咱們能夠直接在<img>上價格寬度或者高度的屬性
<img src=「img.jpg」 alt=「碼頭的大照片」width=「100」 height=「90」>，好比（推薦）或者能夠在css樣式中加寬度或者
高度的屬性。可是如果這些張規格比例不統一的圖片要瀏覽呢？那就有問題，你設置寬高可能形成圖片的嚴重失真。在ie6以後ie7，
ie8還有其餘主流瀏覽器支持css2.1中的min-width，min-height，max-width，這樣咱們就能夠用min-width，min-height，
max-width解決這些問題，可是ie6除非是拋棄性能問題有css表達式這個時候ie的作好解決方案就是Dom Ready而不是Dom Load,
由於一般大圖片加載的時候會一點一點的加載。這個在尺寸大，字節多，網速慢的時候表現的很是明顯，用Dom Load，一般是
先把頁面撐開，加載完成後再把圖片重設寬高，圖片加載多少時間，這個一面就會撐開多久，
用戶會很是難受。node

八、簡述列舉文檔對象模型DOM裏document的經常使用的查找訪問節點的方法並作簡單說明---------------------------解彬1510-B
Document.getElementById 根據元素id查找元素
Document.getElementByName 根據元素name查找元素
Document.getElementTagName 根據指定的元素名查找元素jquery

九、有哪項方式能夠對一個DOM設置它的CSS樣式？　 -----許瑞瑞1510B
外部樣式表，引入一個外部css文件
內部樣式表，將css代碼放在 <head> 標籤內部
內聯樣式，將css樣式直接定義在 HTML 元素內部程序員

十、當一個DOM節點被點擊時候，咱們但願可以執行一個函數，應該怎麼作？ -----許瑞瑞1510B
直接在DOM裏綁定事件：<div onclick=」test()」></div>
在JS裏經過onclick綁定：xxx.onclick = test
經過事件添加進行綁定：addEventListener(xxx, ‘click’, test)
那麼問題來了，Javascript的事件流模型都有什麼？
「事件冒泡」：事件開始由最具體的元素接受，而後逐級向上傳播
「事件捕捉」：事件由最不具體的節點先接收，而後逐級向下，一直到最具體的
「DOM事件流」：三個階段：事件捕捉，目標階段，事件冒泡web

十一、DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。 -----許瑞瑞1510B
1.) 建立新節點
createDocumentFragment() // 建立一個DOM片斷
createElement() // 建立一個具體的元素
createTextNode() // 建立一個文本節點
2.) 添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() // 在已有的子節點前插入一個新的子節點
3.) 查找
getElementsByTagName() // 經過標籤名稱
getElementsByName() // 經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的)
getElementById() // 經過元素Id，惟一性面試

十二、CSS中能夠經過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視範圍內？ -----許瑞瑞1510B
最基本的：
設置display屬性爲none，或者設置visibility屬性爲hidden
技巧性：
設置寬高爲0，設置透明度爲0，設置z-index位置在-1000chrome

13.如何顯示/隱藏一個dom元素？請用原生的JavaScript方法實現 -----許瑞瑞1510B
dom.style.display=」none」;
dom.style.display=」」;

1四、javascript面向對象中繼承實現 ------1510B 楊姣姣

javascript面向對象中的繼承實現通常都使用到了構造函數和Prototype原型鏈，簡單的代碼以下：

1五、構造函數使用this的典型應用 ------1510B 楊姣姣

function Animal(name, color) {
this.name = name;
this.color = color;
}

1六、如何擴展prototype? ------1510B 楊姣姣

A.prototype.B = C;

A是某個構造函數的名字

B是這個構造函數的屬性

C是想要定義的屬性的值

17.、dom的節點類型？ ------1510B 楊姣姣
元素節點、屬性節點文本節點註釋節點 document

1八、對象是怎麼樣建立的?————————————陳蓉蓉 1510-B
答：1.用var obj={}就能夠建立一個對象
2.用new Object()也能夠建立一個對象
1九、JS建立對象的方法： ————————————陳蓉蓉 1510-B
　　（a）工廠模式：用函數來封裝以特定接口建立對象的細節。
　　　　　　function createPerson(name, age, job){
　　　　　　　　　　var o = new Object();
　　　　　　　　　　o.name = name;
　　　　　　　　　　o.age = age;
　　　　　　　　　　o.job = job;
　　　　　　　　　　o.sayName = function(){
　　　　　　　　　　alert(this.name);
　　　　　　　　　　};
　　　　　　return o;
　　　　　　}
　　　　var person1 = createPerson(「Nicholas」, 29, 「Software Engineer」);
　　　　var person2 = createPerson(「Greg」, 27, 「Doctor」);
　　　　缺點：工廠模式雖然解決了建立多個相識對象的問題，但卻沒有解決對象識別的問題（即怎樣知道一個對象的類型）。
（b）構造函數模式：ECMAScript中的構造函數能夠用來建立特定類型的對象。能夠建立自定義的構造函數，從而定義自定義對象類型的屬性和方法。
　　　　　　function Person(name, age, job){
　　　　　　　　this.name = name;
　　　　　　　　this.age = age;
　　　　　　　　this.job = job;
　　　　　　　　this.sayName = function(){
　　　　　　　　alert(this.name);
　　　　　　　　};
　　　　　　}
　　　　　　var person1 = new Person(「Nicholas」, 29, 「Software Engineer」);
　　　　　　var person2 = new Person(「Greg」, 27, 「Doctor」);
　　　　缺點：使用構造函數的主要問題，就是每一個方法都要在每一個實例上從新建立一遍。不要忘了——ECMAScript中的函數是對象，所以每定義一個函數，就是實例化一個對象。
（c）原型模式：咱們建立的每一個函數都有一個prototype（原型）屬性，這個屬性是一個指針，指向一個對象，而這個對象的用途是包含能夠由特定類型
　　　　的全部實例共享的屬性和方法。使用原型對象的好處是可讓全部對象共享它包含的屬性和方法
　　　　　　function Person(){
　　　　　　}
　　　　　　Person.prototype.name = 「Nicholas」;
　　　　　　Person.prototype.age = 29;
　　　　　　Person.prototype.job = 「Software Engineer」;
　　　　　　Person.prototype.sayName = function(){
　　　　　　　　alert(this.name);
　　　　　　};
　　　　　　var person1 = new Person();
　　　　　　person1.sayName(); //」Nicholas」
　　　　　　var person2 = new Person();
　　　　　　person2.sayName(); //」Nicholas」
　　　　　　alert(person1.sayName == person2.sayName); //true
　　　　缺點：原型中全部屬性是被不少實例共享的，這種共享對於函數很是合適。可是對於引用類型值的屬性來講，問題就比較突出了。
（d）組合使用構造函數模式和原型模式：建立自定義類型的最多見方式，就是使用組合使用構造函數模式和原型模式。構造函數模式用於定義實例屬性，
　　　　　　而原型模式用於定義方法和共享的屬性。
　　　　　　function Person(name, age, job){
　　　　　　　　this.name = name;
　　　　　　　　this.age = age;
　　　　　　　　this.job = job;
　　　　　　　　this.friends = [「Shelby」, 「Court」];
　　　　　　}
　　　　　　Person.prototype = {
　　　　　　　　constructor: Person,
　　　　　　　　sayName : function () {
　　　　　　　　alert(this.name);
　　　　　　　　}
　　　　　　};
　　　　　　var person1 = new Person(「Nicholas」, 29, 「Software Engineer」);
　　　　　　var person2 = new Person(「Greg」, 27, 「Doctor」);
　　　　　　person1.friends.push(「Van」);
　　　　　　alert(person1.friends); //」Shelby,Court,Van」
　　　　　　alert(person2.friends); //」Shelby,Court」
　　　　　　alert(person1.friends === person2.friends); //false
　　　　　　alert(person1.sayName === person2.sayName); //true

20、簡述建立函數的幾種方式————————————陳蓉蓉 1510-B
答：第一種（函數聲明）：
function sum1(num1,num2){
return num1+num2;
}
第二種（函數表達式）：
var sum2 = function(num1,num2){
return num1+num2;
}
匿名函數：
function(){}:只能本身執行本身
第三種（函數對象方式）：
var sum3 = new Function("num1","num2","return num1+num2");

21.DOM中有幾種類型的節點-----------------------------------王辰豔1510-B
整個文檔是一個文檔節點(Document)
每一個 HTML 標籤是一個元素節點(Element)
每個 HTML 屬性是一個屬性節點(Attribute)
包含在 HTML 元素中的文本是文本節點(Text)

22.Dom中target屬性：-----------------------------------王辰豔1510-B
在須要經過一個函數處理多個事件時，可使用type屬性。例如：
var btn =document.getElementByIdx_x("myBtn");
var handler = function (event){ //定義了一個handler函數
switch (event.type){ //用於處理3個事件
case "click": //1.當鼠標點擊時：彈出Clicked
alert("Clicked");
break;
case "mouseover":
event.target.style.backgroundColor="red"; // 當鼠標移入時，變爲紅色
break;
case "mouseout":
event.target.style.backgroundColor=""; //當鼠標移出時，變爲默認顏色
break;
}
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
這裏經過檢測event.type屬性，讓函數可以肯定發生了什麼事件，並執行相應操做。

23.bind(), live(), delegate()的區別-----------------------------------王辰豔1510-B
bind：綁定事件，對新添加的事件不起做用，方法用於將一個處理程序附加到每一個匹配元素的事件上並返回jQuery對象。
live：方法將一個事件處理程序附加到與當前選擇器匹配的全部元素（包含現有的或未來添加的）的指定事件上並返回jQuery對象。
delegate：方法基於一組特定的根元素將處理程序附加到匹配選擇器的全部元素（現有的或未來的）的一個或多個事件上。

24.JS中的簡單繼承 call方法！-----------------------------------王辰豔1510-B
//頂一個父母類，注意：類名都是首字母大寫的哦！
function Parent(name, money){
this.name = name;
this.money = money;
this.info = function(){
alert('姓名： '+this.name+' 錢： '+ this.money);
}
}
//定義孩子類
function Children(name){
Parent.call(this, name); //繼承姓名屬性，不要錢。
this.info = function(){
alert('姓名： '+this.name);
}
}
//實例化類
var per = new Parent('parent', 800000000000);
var chi = new Children('child');
per.info();
chi.info();

2五、call和apply的區別 -----------------------------------王辰豔1510-B
call和apply相同點：
都是爲了用一個本不屬於一個對象的方法，讓這個對象去執行
toString.call([],1,2,3)
toString.apply([],[1,2,3])
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

區別：call第二個參數開始接受一個參數列表
apply第二個參數開始接受一個參數數組

2六、new操做符具體幹了什麼呢?

一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
二、屬性和方法被加入到 this 引用的對象中。
三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

/**************************************************************/
1510A李鵬亮、孟科宇、馬金良小組的dom面試題

···········1510A孟科宇············
1. 要動態改變層中內容可使用的方法有（AB ）
a)innerHTML
b)innerText
c)經過設置層的隱藏和顯示來實現
d)經過設置層的樣式屬性的display屬性

2. 當按鍵盤A時，使用onKeyDown事件打印event.keyCode的結果是（A ）
a)65
b)13
c)97
d)37
3.documen.write和 innerHTML的區別
document.write只能重繪整個頁面
innerHTML能夠重繪頁面的一部分
4. 下列哪個選項不屬於document對象的方法?（D ）
a)focus()
b)getElementById()
c)getElementsByName()
d)bgColor()
五、當鼠標離開頁面中的全部p標籤時讓它摺疊起來，實現的方法有（ a ）
A、$(‘p’). mouseleave(function(){$(this).slideUp()})
B、$(‘p’). mouseleave(function(){$(this).slideDown()})
C、$(‘p’). mouseleave(function(){this.slideUp()})
D、$(‘p’). mouseover(function(){$(this).slideUp()})
6.在jQuery中，函數（c）可以實現元素顯示和隱藏的互換。
hide()
show()
toggle()
fade()
7.在jQuery中，有如下代碼：
$(「.btn」).click(funtion(){
var json=[
{「S_name」: 「周顏」,「S_sex」: 「男」}，
{「S_name」: 「周穎」,「S_sex」: 「女」}
];
$.each(json,function(index,s){
alert(s.S_name+ 「,」+s.S_sex)
})
})
如下說法正確的是（C）
此代碼不會正常運行
語句1會被執行1次
語句1會被執行2次
$.each()函數的用法有誤
8.下面哪個是用來追加到指定元素的末尾?(c)
A.insertAfter()
B.Append()
C.appendTo()
After()

9.在jQuery中指定一個類，若是存在就執行刪除功能
，若是不存在就執行添加功能，下面哪個是能夠直接完成該功能的？(c)
A.removeClass()
B.deleteClass()
C.toggleClass(class)
addClass()
10.在一個表單中，若是想要給輸入框添加一個輸入驗證，能夠用下面的哪一個事件實現？(D)
A、hover(over,out)
B、keypress(fn)
C、change()
D.change(fn)
11. 你如何利用jQuery來向一個元素中添加和移除CSS類? (答案)

經過利用 addClass() 和 removeClass() 這兩個 jQuery 方法。動態的改變元素的class屬性能夠很簡單例如. 使用類「.active"來標記它們的未激活和激活狀態，等等.

12. jQuery中 detach() 和 remove() 方法的區別是什麼? (答案)

儘管 detach() 和 remove() 方法都被用來移除一個DOM元素, 二者之間的主要不一樣在於 detach() 會保持對過去被解除元素的跟蹤, 所以它能夠被取消解除, 而 remove() 方法則會保持過去被移除對象的引用. 你也還能夠看看用來向DOM中添加元素的 appendTo() 方法.

13. IE和DOM事件流的區別
1.執行順序不同、
2.參數不同
3.事件加不加on
4.this指向問題

14.添加刪除替換插入到某個接點的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

15. 要動態改變層中內容可使用的方法有（AB ）
a)innerHTML
b)innerText
c)經過設置層的隱藏和顯示來實現
d)經過設置層的樣式屬性的display屬性
16. 你是如何將一個 HTML 元素添加到 DOM 樹中的？（答案以下）
你能夠用 jQuery 方法 appendTo() 將一個 HTML 元素添加到 DOM 樹中。這是 jQuery 提供的衆多操控 DOM 的方法中的一個。你能夠經過 appendTo() 方法在指定的 DOM 元素末尾添加一個現存的元素或者一個新的 HTML 元素。
17. 怎麼在元素前添加元素。
insertBefore(node,myNode);
18. 怎麼獲得一個該元素的HTML標籤內容（包括自身），
object.outerHTML

19.offsetWidth /offsetHeight返回數值包括哪幾部分。

x content
o border
o padding
o width / height
x margin

20.clinetWidth/ clientHeight返回數值包括哪幾部分。

x content
x margin
o height/ width
o padding
x border
21.bom和dom的區別
BOM是瀏覽器對象模型，用來獲取或設置瀏覽器的屬性、行爲，例如：新建窗口、獲取屏幕分辨率、瀏覽器版本號等。
DOM是文檔對象模型，用來獲取或設置文檔中標籤的屬性，例如獲取或者設置input表單的value值。

DOM是Document Object Model文檔對象模型的縮寫。根據W3C DOM規範（http://www.w3.org/DOM/），DOM是一種與瀏覽器，平臺，語言無關的接口，使得你能夠訪問頁面其餘的標準組件。簡單理解，DOM解決了Netscape的Javascript和Microsoft的Jscript之間的衝突，給予web設計師和開發者一個標準的方法，讓他們來訪問他們站點中的數據、腳本和表現層對像。
DOM是以層次結構組織的節點或信息片段的集合。這個層次結構容許開發人員在樹中導航尋找特定信息。分析該結構一般須要加載整個文檔和構造層次結構，而後才能作任何工做。因爲它是基於信息層次的，於是 DOM 被認爲是基於樹或基於對象的。
對於特別大的文檔，解析和加載整個文檔可能很慢且很耗資源，所以使用其餘手段來處理這樣的數據會更好。這些基於事件的模型，好比 Simple API for XML（SAX），適用於處理數據流，即隨着數據的流動而依次處理數據。基於事件的 API 消除了在內存中構造樹的須要，可是卻不容許開發人員實際更改原始文檔中的數據。
SAX等模型會從頭到尾的順序解析整個XML文檔，當遇到一個節點的開始或或者結束時，會產生一個時間，程序員能夠註冊事件處理函數以對各個節點進行處理。
另外一方面，DOM 還提供了一個 API，容許開發人員添加、編輯、移動或刪除樹中任意位置的節點，從而建立一個引用程序。這個模型就是基於樹型數據結構的，他在使用以前必須加載整個文檔或者至少是結構良好的文檔片斷
解析器是一個軟件應用程序，設計用於分析文檔（這裏是指 XML 文件），以及作一些特定於該信息的事情。在諸如 SAX 這樣基於事件的 API 中，解析器將向某種監聽器發送事件。在諸如 DOM 這樣基於樹的 API 中，解析器將在內存中構造一顆數據樹。

···········1510A馬金梁：············
Document－－最頂層的節點，全部的其餘節點都是附屬於它的。
Element－－表示起始標籤和結束標籤之間的內容，例如<tag></tab>或者<tag/>。這是惟一能夠同時包含特性和子節點的節點類型。
　　1、獲取節點：
1.document：

getElementById：語法：document.getElementById(元素id) 功能：經過元素id獲取節點。

getElementByName：語法：document.getElementByName(元素name屬性) 功能：經過元素name屬性獲取節點。

getElementByTagName：語法：document.getElementByTagName(元素標籤) 功能：經過元素標籤獲取節點。

2.節點指針：

firstChild ：語法：父節點.firstChild 功能：獲取元素的首個子節點。

lastChild ：語法：父節點.lastChild 功能：獲取元素的最後一個子節點。

childNodes ：語法：父節點.childNodes 功能：獲取元素的子節點列表。

previousSibling：語法：兄弟節點.previousSibling 功能：獲取已知節點的前一個節點。

nextSibling ：語法：兄弟節點.nextSibling 功能：獲取已知節點的後一個節點。

parentNode ：語法：子節點.parentNode 功能：獲取已知節點的父節點。

　　2、建--新建DOM節點
　　　　

1.建立節點：

creatElement：語法: document.creatElement(元素標籤) 功能：建立元素節點。

creatAttribute：語法：document.creatAttribute(元素屬性) 功能：建立屬性節點。

creatTextNode：語法：document.creatTextNode(文本內容) 功能：建立文本節點。

　　　3、增

　　　　一、element.appendChild() 爲元素添加一個新的子元素

　　　　二、insertBefore 任意位置插入元素
前面放的是父級
能夠跟兩個參數第一個參數是要插入的元素第二個參數要要插入位置元素的前面
　　　
　　4、刪

　　　　　element.removeChild() 刪除一個子元素

　　5、改

　　　　1.cloneNode：語法：須要被複制的節點.cloneNode(true/false) 功能：建立指定節點的副本參數：true 複製當前節點及其全部子節點，false 僅複製當前節點

　　　　二、element.isEqualNode() 檢查兩個元素是否相等

三、替換節點：replaceChild：語法：replaceChild(要插入的新元素,將被替換的老元素) 功能：將某個子節點替換爲另外一個。

　　屬性操做　

　　　　一、獲取屬性：
getAttribute：語法：元素節點.getAttrbute(元素屬性名) 功能：獲取元素節點中指定屬性的屬性值。

二、設置屬性：
setAttribute：語法：元素節點.setAttribute(屬性名，屬性值) 功能：建立或者改變元素節點的屬性。

三、刪除屬性：

removeAttribute：語法：元素節點.removeAttribute(屬性名) 功能：刪除元素中的指定屬性。

···············1510A李鵬亮··············
js中的DOM操做彙總：

1、DOM建立

DOM節點（Node）一般對應於一個標籤，一個文本，或者一個HTML屬性。DOM節點有一個nodeType屬性用來表示當前元素的類型，它是一個整數：

Element，元素
Attribute，屬性
Text，文本

DOM節點建立最經常使用的即是document.createElement和document.createTextNode方法：

var node1 = document.createElement('div');
var node2 = document.createTextNode('hello world!');

2、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;

// 查詢子元素
var els = ele.getElementsByTagName('td');
var els = ele.getElementsByClassName('highlight');

// 當前元素的第一個/最後一個子元素節點
var el = ele.firstChild;//對待標準和非標準模式，如childNods
var el = ele.lastChild;
var el = ele.firstElementChild;//非標準不支持
var el = ele.lastElementChild;
// 下一個/上一個兄弟元素節點
var el = ele.nextSibling;
var el = ele.previousSibling;
var el = ele.nextElementSibling;
var el = ele.previousElementSibling;

複製代碼

兼容的獲取第一個子元素節點方法：

var first=ele.firstElementChild||ele.children[0];

3、DOM更改
複製代碼

// 添加、刪除子元素
ele.appendChild(el);
ele.removeChild(el);

// 替換子元素
ele.replaceChild(el1, el2);

// 插入子元素
parentElement.insertBefore(newElement, referenceElement);

//克隆元素
ele.cloneNode(true) //該參數指示被複制的節點是否包括原節點的全部屬性和子節點

複製代碼

4、屬性操做
複製代碼

// 獲取一個{name, value}的數組
var attrs = el.attributes;

// 獲取、設置屬性
var c = el.getAttribute('class');
el.setAttribute('class', 'highlight');

// 判斷、移除屬性
el.hasAttribute('class');
el.removeAttribute('class');

// 是否有屬性設置
el.hasAttributes();

複製代碼

js原生dom操做第二種概括：
1)建立節點：除了可使用createElement建立元素，也可使用createTextNode建立文本節點.

document.body指向的是<body>元素;document.documentElement則指向<html>元素

//建立節點
var createNode = document.createElement("div");
var createTextNode = document.createTextNode("hello world");
createNode.appendChild(createTextNode);
document.body.appendChild(createNode);
document.documentElement.appendChild(createNode);
2)插入節點：可使用appendChild，insertBefore，insertBefore接收兩個參數，第一個是插入的節點，第二個是參照節點，如insertBefore(a,b)，則a會插入在b的前面

//插入節點
var createNode = document.createElement("div");
var createTextNode = document.createTextNode("hello world");
createNode.appendChild(createTextNode);
var div1 = document.getElementById("div1");
document.body.insertBefore(createNode,div1);

3)替換和刪除元素，從replaceChild和removeChild的字面意思看，就是刪除子節點，所以調用者，須要包含子節點div1，否則調用會報錯。返回的節點是替換的或刪除的元素，被替換/刪除的元素仍然存在，但document中已經沒有他們的位置了。

//替換元素
var replaceChild = document.body.replaceChild(createNode,div1);

//刪除元素
var removeChild = document.body.removeChild(div1);
4)節點的屬性：

firstChild:第一個子節點

lastChild:最後一個子節點

childNodes:子節點集合，獲取其中子節點能夠someNode.childNodes[index]或者someNode.childNodes.item(index)

nextSibling:下一個兄弟節點

previousSibling：上一個兄弟節點

parentNode：父節點

<ul id="ul"><li>sdsssssss</li><li>qqqq</li><li>wwww</li><li>eeee</li></ul>

複製代碼
//節點屬性
var ul = document.getElementById("ul");
var firstChild = ul.firstChild;
console.log(firstChild.innerHTML);
var lastChild = ul.lastChild;
console.log(lastChild.innerHTML);
var length = ul.childNodes.length;
console.log(length);

var secondChild = ul.childNodes.item(1);
console.log(secondChild.innerHTML);

var forthChild = ul.childNodes.item(2).nextSibling;
console.log(forthChild.innerHTML);

var thridChild = forthChild.previousSibling;
console.log(thridChild.innerHTML);

var parentNode = forthChild.parentNode;
console.log(parentNode.innerHTML);
複製代碼

5) 文檔片斷，好處在於減小dom的渲染次數，能夠優化性能。

複製代碼
//文本片斷
var fragment = document.createDocumentFragment();
var ul = document.getElementById("ul");
var li = null;
for (var i = 4; i >= 0; i--) {
li = document.createElement("li");
li.appendChild(document.createTextNode("item "+i));
fragment.appendChild(li);
}
ul.appendChild(fragment);
複製代碼

6）克隆元素

someNode.cloneNode(true):深度克隆，會複製節點及整個子節點

someNode.cloneNode(false):淺克隆，會複製節點，但不復制子節點

//克隆
var clone = ul.cloneNode(true);
document.body.appendChild(clone);

注意：

一、childNodes.length存在跨瀏覽器的問題

能夠看到有關列表的html片斷沒有用

<ul id="ul">
<li>sdsssssss</li>
<li>qqqq</li>
<li>wwww</li>
<li>eeee</li>
</ul>
這種書寫格式而是使用沒有換行的格式書寫，是由於在不一樣的瀏覽器中，獲取ul.childNodes.length的結果有差別：

在ie中，ul.childNodes.length不會計算li之間的換行空格，從而獲得數值爲4

在ff、chrome,safari中，會有包含li之間的空白符的5個文本節點，所以ul.childNodes.length爲9

若要解決跨瀏覽器問題，能夠將li之間的換行去掉，改爲一行書寫格式。

二、cloneNode存在跨瀏覽器的問題

在IE中，經過cloneNode方法複製的元素，會複製事件處理程序，好比，var b = a.cloneNode(true).若a存在click,mouseover等事件監聽，則b也會擁有這些事件監聽。

在ff,chrome,safari中，經過cloneNode方法複製的元素，只會複製特性，其餘一切都不會複製

所以，若要解決跨瀏覽器問題，在複製前，最好先移除事件處理程序。