一、dom對(duì)象的innerText和innerHTML有什么區(qū)別？

innerText設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的文本。如果有HTML標(biāo)簽，它會(huì)過濾掉HTML標(biāo)簽，并且在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容。
innerHTML屬性返回該元素包含的 HTML 代碼（包括元素、注釋和文本節(jié)點(diǎn)）。該屬性可讀寫，常用來設(shè)置某個(gè)節(jié)點(diǎn)的內(nèi)容。
如果將innerHTML屬性設(shè)為空，等于刪除所有它包含的所有節(jié)點(diǎn)。

<div id="text">
  <p>
   abc
    <span>def</span>
  </p>
</div>
<script>console.log(text.innerText)</script> // 輸出 ： "abc def"
<script>console.log(text.innerHTML)</script>
//輸出 ："  <p> abc <span>def</span> </p> "
<script>text.innerHTML='';console.log(text.innerHTML)</script>//輸出： 空節(jié)點(diǎn)

二、elem.children和elem.childNodes的區(qū)別？

elem.children屬性返回一個(gè)HTMLCollection對(duì)象（包含了元素的通用集合，還提供了用來從該集合中選擇元素的方法和屬性。），包括當(dāng)前元素節(jié)點(diǎn)的所有子元素。它是一個(gè)類似數(shù)組的動(dòng)態(tài)對(duì)象（實(shí)時(shí)反映網(wǎng)頁元素的變化）。這個(gè)屬性與Node.childNodes屬性的區(qū)別是，它只包括HTML元素類型的子節(jié)點(diǎn)，不包括其他類型的子節(jié)點(diǎn)。

例子

三、查詢?cè)赜袔追N常見的方法？

1.`document.querySelector`、`document.querySelectorAll`

ocument.querySelector方法接受一個(gè)CSS選擇器作為參數(shù)，返回匹配該選擇器的元素節(jié)點(diǎn)。
document.querySelectorAll方法返回一個(gè)NodeList對(duì)象，包含所有匹配給定選擇器的節(jié)點(diǎn)。
document.querySelectorAll('DIV:not(.ignore)');選中div元素，那些class含ignore的除外
但是，它們不支持CSS偽元素的選擇器和偽類的選擇器（比如:link和:visited）。
并且這兩種方法在HTML文檔上和HTML元素上都能調(diào)用。

2.`document.getElementsByTagName()`

document.getElementsByTagName方法返回所有指定HTML標(biāo)簽的元素，返回值是一個(gè)類似數(shù)組的HTMLCollection對(duì)象，可以實(shí)時(shí)反映HTML文檔的變化。該方法在HTML文檔上和HTML元素上都能調(diào)用。

ar paras = document.getElementsByTagName('p');
paras instanceof HTMLCollection // true

3.`document.getElementsByClassName()`

document.getElementsByClassName方法返回一個(gè)類似數(shù)組的對(duì)象，包括了所有class名字符合指定條件的元素，元素的變化實(shí)時(shí)反映在返回結(jié)果中。由于class是保留字，所以JavaScript一律使用className表示CSS的class。如果參數(shù)是一個(gè)空格分隔的字符串，元素的class必須符合所有字符串之中所有的class才會(huì)返回。

var elements = document.getElementsByClassName('foo bar');
上面代碼返回同時(shí)具有foo和bar兩個(gè)class的元素，foo和bar的順序不重要。

4.`document.getElementsByName()`

document.getElementsByName方法用于選擇擁有name屬性的HTML元素（比如<form>、<radio>、<img>、<frame>、<embed>和<object>等），返回一個(gè)類似數(shù)組的的對(duì)象（NodeList對(duì)象的實(shí)例），因?yàn)?code>name屬性相同的元素可能不止一個(gè)。

// 表單為 <form name="a"></form>
var forms = document.getElementsByName('a');
forms[0].tagName // "FORM"

5.`getElementById()`

getElementById方法返回匹配指定id屬性的元素節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。
該方法只能在HTML文檔上調(diào)用，不能在HTML元素上調(diào)用。

6.`document.elementFromPoint()`

document.elementFromPoint方法返回位于頁面指定位置最上層的Element子節(jié)點(diǎn)。
var element = document.elementFromPoint(50, 50);
兩個(gè)參數(shù)，依次是相對(duì)于當(dāng)前視口左上角的橫坐標(biāo)和縱坐標(biāo)，單位是像素。

四、如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性？

創(chuàng)建元素：
- createElement方法用來生成網(wǎng)頁元素節(jié)點(diǎn)。參數(shù)為元素的標(biāo)簽名。
- createTextNode方法用來生成文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容。
設(shè)置屬性：
- element.setAttribute(name, value);接收的2個(gè)參數(shù)分別是需要設(shè)置的屬性名和屬性值。如果指定的屬性已經(jīng)存在，則其值變?yōu)閭鬟f的值。
元素的添加：
- Node.appendChild() 方法將一個(gè)節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾。
  語法：var child = node.appendChild(child);
- Node.insertBefore()方法，在當(dāng)前節(jié)點(diǎn)的某個(gè)子節(jié)點(diǎn)之前再插入一個(gè)子節(jié)點(diǎn)。
  語法：var insertedElement = parentElement.insertBefore(newElement, referenceElement);
  語法解析：1.新元素：你想插入的元素（newElement）
  2.目標(biāo)元素：你想把這個(gè)新元素插入到哪個(gè)元素（targetElement）之前。
  3.父元素：目標(biāo)元素的父元素（parentElement）
元素的刪除：
- Node.removeChild()方法從DOM中刪除一個(gè)子節(jié)點(diǎn)。返回刪除的節(jié)點(diǎn)。
  舉例：

<body>
<div id="test">世界
  <div id="nested">hello</div>
</div>
  <script>
    var a=document.getElementById("test");
    var p=document.createElement('p')
    var text=document.createTextNode('你好')
    var b=document.createElement('p')
     p.appendChild(text)
     a.appendChild(p)  //世界 hello 你好
    //  b.appendChild(text)
    //  a.insertBefore(b,a.firstChild)    // 你好 世界 hello
   var d_nested = document.getElementById("nested");
   var throwawayNode = a.removeChild(d_nested); // 世界 你好
  </script>
</body>

六、DOM0事件和DOM2級(jí)在事件監(jiān)聽使用的方式上有什么區(qū)別？

DOM 0級(jí)事件,通過javascript制定事件處理程序的傳統(tǒng)方式。就是將一個(gè)函數(shù)賦值給一個(gè)事件處理屬性。一個(gè)事件處理程序只能對(duì)應(yīng)一個(gè)處理函數(shù)。這些屬性通常全部小寫。
例子：

var btn = document.getElementById("mybtn")
btn.onclick = function(){
alert(this.id); //"mybtn"
btn.onclick=null;//刪除事件處理程序，單擊按鈕將不會(huì)有任何動(dòng)作發(fā)生。

使用DOM0級(jí)方法指定的事件處理程序被認(rèn)為是元素的辦法。因此，這時(shí)候的事件處理程序是在元素的作用域中運(yùn)行；換句話說，程序中的this
引用當(dāng)前元素，正如上面的例子。
DOM 2級(jí)事件，定義了兩個(gè)方法，用于處理指定和刪除事件處理程序的操作：addEventListener() 和 removeEventListener()。通過addEventListener()添加的事件只能通過removeEventListener()來刪除。
所有DOM節(jié)點(diǎn)都包含這兩個(gè)方法，并且都接受3個(gè)參數(shù)：
1.要處理的事件名
2.作為事件處理程序的函數(shù)
3.一個(gè)布爾值，布爾值如果是true，表示在捕獲階段調(diào)用事件處理程序，如果是flase，表示在冒泡階段調(diào)用事件處理程序。
例子：

var body=document.body
body.addEventListener('click',function(){
  document.body.appendChild(document.createTextNode('1'))
}) // aaa 1

body.removeEventListener('click',function(){
  document.body.appendChild(document.createTextNode('1'))
})//aaa 1
//這樣不能移除 上面的函數(shù)。
//如果 給函數(shù)添加一個(gè)名字如下：
var body=document.body
body.addEventListener('click',function a(){
  document.body.appendChild(document.createTextNode('1'))
})
body.removeEventListener('click',a)
})
// 這樣也沒有辦法移除，因?yàn)樽饔糜虻年P(guān)系。
// //用以下方法：
var body=document.body
function a(){
  document.body.appendChild(document.createTextNode('1'))
}
body.addEventListener('click',a)
body.removeEventListener('click',a)

使用DOM 2級(jí)方法添加事件處理程序的主要好處是可以添加多個(gè)事件處理程序，這也是與DOM 0級(jí)事件最主要的區(qū)別。

七、`attachEvent`與`addEventListener`的區(qū)別？

attachEvent 是早期IE瀏覽器（IE8及早期版本）的一個(gè)專有的替代性標(biāo)準(zhǔn)，替代EventTarget.addEventListener()方法。該特性是非標(biāo)準(zhǔn)的。
語法：attached = target.attachEvent(eventNameWithOn, callback)
attachEvent與addEventListener的區(qū)別：
- 接受的參數(shù)
  attachEvent接受2個(gè)參數(shù)：事件名稱，事件處理函數(shù)。只支持冒泡。
  addEventListener接受3個(gè)參數(shù)：事件名稱，事件處理函數(shù)，布爾值。冒泡、捕獲都支持。
- 事件名稱
  attachEvent事件名稱前面要加“on”，如“onclick”，
  addEventListener不需要，如“click”。
- 作用域
  attachEvent會(huì)在全局作用域中運(yùn)行，即this = window。
  addEventListener是在元素作用域中運(yùn)行，this指的是當(dāng)前元素。
- 刪除方式
  attachEvent使用detachEvent刪除添加事件。
  addEventListener使用removeEventListener刪除添加事件。

八、解釋IE事件冒泡和DOM2事件傳播機(jī)制？

IE事件冒泡：事件開始時(shí)由最具體的元素接收，然后逐級(jí)向上傳播到較為不具體的元素。如下圖，當(dāng)我們點(diǎn)擊div里面文本的時(shí)候，click會(huì)先在<div>元素上發(fā)生，然后沿著DOM樹向上傳播，在每一級(jí)的節(jié)點(diǎn)都會(huì)發(fā)生直到傳播到document對(duì)象。

冒泡和捕獲圖解
DOM 2事件規(guī)定的事件包括三個(gè)階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段。首先發(fā)生的是事件捕獲階段，為截獲事件提供了機(jī)會(huì)。然后是實(shí)際的目標(biāo)接收到事件。最后一個(gè)階段是冒泡階段，可以在這個(gè)階段對(duì)事件作出響應(yīng)。

DOM2事件傳播機(jī)制

*在DOM事件流中，實(shí)際的目標(biāo)（div元素）在捕獲階段不會(huì)接收到事件。這意味著在捕獲階段事件從document到<html>再到<body>后就停止了。下一個(gè)階段是“處于目標(biāo)”階段，于是事件在<div>上發(fā)生，并在事件處理中被看出冒泡階段的一部分。然后冒泡階段發(fā)生，事件又傳播回文檔。
但I(xiàn)E、Safari、Chrome、Firefox和opera9.5及更高版本都會(huì)再捕獲階段觸發(fā)事件對(duì)象上的事件。結(jié)果，就是有兩個(gè)機(jī)會(huì)在目標(biāo)對(duì)象上面操作事件。

九、如何阻止事件冒泡？如何阻止默認(rèn)事件？

stopPropagation()方法可以阻止事件冒泡。例如：

  <div id="test">
      <input id="myBtn" type="button" value="點(diǎn)擊我"/>
  </div>
<script>
 var oDiv = document.getElementById("test");
  var oBtn = document.getElementById("myBtn");
  oDiv.addEventListener("click",function(){
      console.log(this.id+"我被冒泡了");
  },false);
oBtn.addEventListener("click",function(){
      console.log(this.id+"我被冒泡了");
  },false); //當(dāng)沒有終止冒泡時(shí)的輸出結(jié)果："myBtn我被冒泡了"   "test我被冒泡了"
  oBtn.addEventListener("click",function(ev){
      console.log(this.id);
      ev.stopPropagation();
  },false); // 輸出結(jié)果："myBtn我被冒泡了"   "myBtn"  
</script>

reventDefault()方法用來取消事件默認(rèn)行為。例如：

<body>
  <div id="test">
      <a id="myLink" >百度</a>
  </div>
</body>
<script>
  var link = document.getElementById("myLink");
  link.addEventListener("click",function(ev){
      ev.preventDefault();//取消a鏈接點(diǎn)擊轉(zhuǎn)跳到指定的URL的默認(rèn)行為。
  },false);
</script>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

DOM、事件

DOM、事件

一、dom對(duì)象的innerText和innerHTML有什么區(qū)別？

二、elem.children和elem.childNodes的區(qū)別？

三、查詢?cè)赜袔追N常見的方法？

1.`document.querySelector`、`document.querySelectorAll`

2.`document.getElementsByTagName()`

3.`document.getElementsByClassName()`

4.`document.getElementsByName()`

5.`getElementById()`

6.`document.elementFromPoint()`

四、如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性？

六、DOM0事件和DOM2級(jí)在事件監(jiān)聽使用的方式上有什么區(qū)別？

七、`attachEvent`與`addEventListener`的區(qū)別？

八、解釋IE事件冒泡和DOM2事件傳播機(jī)制？

九、如何阻止事件冒泡？如何阻止默認(rèn)事件？

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

DOM、事件

一、dom對(duì)象的innerText和innerHTML有什么區(qū)別？

二、elem.children和elem.childNodes的區(qū)別？

三、查詢?cè)赜袔追N常見的方法？

1.document.querySelector、document.querySelectorAll

2.document.getElementsByTagName()

3.document.getElementsByClassName()

4.document.getElementsByName()

5.getElementById()

6.document.elementFromPoint()

四、如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性？

六、DOM0事件和DOM2級(jí)在事件監(jiān)聽使用的方式上有什么區(qū)別？

七、attachEvent與addEventListener的區(qū)別？

八、解釋IE事件冒泡和DOM2事件傳播機(jī)制？

九、如何阻止事件冒泡？如何阻止默認(rèn)事件？

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、dom對(duì)象的innerText和innerHTML有什么區(qū)別？

二、elem.children和elem.childNodes的區(qū)別？

三、查詢?cè)赜袔追N常見的方法？

1.`document.querySelector`、`document.querySelectorAll`

2.`document.getElementsByTagName()`

3.`document.getElementsByClassName()`

4.`document.getElementsByName()`

5.`getElementById()`

6.`document.elementFromPoint()`

四、如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性？

六、DOM0事件和DOM2級(jí)在事件監(jiān)聽使用的方式上有什么區(qū)別？

七、`attachEvent`與`addEventListener`的區(qū)別？

八、解釋IE事件冒泡和DOM2事件傳播機(jī)制？

九、如何阻止事件冒泡？如何阻止默認(rèn)事件？