Dom、事件

問答

  • dom對象的innerText和innerHTML有什么區別？

innerHTML:
　　從對象的起始位置到終止位置的全部內容,包括Html標簽。
　“<span style="color:red">test1</span> test2 ”。
test.innerText:
　　從起始位置到終止位置的內容, 但它去除Html標簽
　　上例中的text.innerTest的值也就是“test1 test2”, 其中span標簽去除了。

  • elem.children和elem.childNodes的區別？

elem.children
屬性返回一個動態的HTMLCollection集合，由當前節點所有的Element子節點組成；
elem.childNodes
返回一個NodeList對象（類數組對象），包括但不限于Element節點，還包括Text節點（換行，空格）和
注釋節點。

  • 查詢元素有幾種常見的方法？

  • 1.getElementById()
    getElementById方法返回匹配指定ID屬性的元素節點。如果沒有發現匹配的節點，則返回null。這也是獲取一個元素最快的方法
    var elem = document.getElementById("test");

  • getElementsByClassName()
    getElementsByClassName方法返回一個類似數組的對象（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實時反映在返回結果中。這個方法不僅可以在document對象上調用，也可以在任何元素節點上調用。

  • var elements = document.getElementsByClassName(names);
    getElementsByClassName方法的參數，可以是多個空格分隔的class名字，返回同時具有這些節點的元素。

  • getElementsByTagName()
    getElementsByTagName方法返回所有指定標簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection對象，也就是說，搜索結果是一個動態集合，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document對象上調用，也可以在任何元素節點上調用。

  • var paras = document.getElementsByTagName("p");
    上面代碼返回當前文檔的所有p元素節點。注意，getElementsByTagName方法會將參數轉為小寫后，再進行搜索。

  • getElementsByName()
    getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化。

  • // 假定有一個表單是<form name="x"></form> var forms = document.getElementsByName("x"); forms[0].tagName // "FORM"
    注意，在IE瀏覽器使用這個方法，會將沒有name屬性、但有同名id屬性的元素也返回，所以name和id屬性最好設為不一樣的值。

  • querySelector()
    querySelector方法返回匹配指定的CSS選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null。

var el2 = document.querySelector('#myParent > [ng-click]');```
querySelector方法無法選中CSS偽元素。

  • querySelectorAll()
    querySelectorAll方法返回匹配指定的CSS選擇器的所有節點，返回的是NodeList類型的對象。NodeList對象不是動態集合，所以元素節點的變化無法實時反映在返回結果中。

  • elementList = document.querySelectorAll(selectors);
    querySelectorAll方法的參數，可以是逗號分隔的多個CSS選擇器，返回所有匹配其中一個選擇器的元素。
    var matches = document.querySelectorAll("div.note, div.alert");
    上面代碼返回class屬性是note或alert的div元素。

  • elementFromPoint()
    elementFromPoint方法返回位于頁面指定位置的元素。

  • var element = document.elementFromPoint(x, y);
    上面代碼中，elementFromPoint方法的參數x和y，分別是相對于當前窗口左上角的橫坐標和縱坐標，單位是CSS像素。
    elementFromPoint方法返回位于這個位置的DOM元素，如果該元素不可返回（比如文本框的滾動條），則返回它的父元素（比如文本框）。如果坐標值無意義（比如負值），則返回null。

  • 如何創建一個元素？如何給元素設置屬性？

可以通過createElement()方法創建新的HTML元素節點；通過setAttribute()方法設置元素屬性。
var newDiv=document.createElement('div'); newDiv.setArrribute('class','wrap');

  • 元素的添加、刪除？
<body>
  <h1>What to buy</h1>
  <p>Don't forget to buy this stuff.</p>
  <ul id="purchases">
    <li>A tin of beans</li>
    <li class="sale">Cheese</li>
    <li class="sale important">Milk</li>
  </ul>
  <script type="text/javascript">
    var newLi = document.createElement('li');             // 創建新的 li 元素節點
    var oldLi = document.querySelector('.important');     // 獲取需要刪除的元素節點
    var newContent = document.createTextNode('Apple')     // 創建新的內容節點
    var ul = document.getElementById('purchases');        // 獲取需要添加位置的父元素節點
    ul.removeChild(oldLi);                                // 從父節點上刪除子節點
    newLi.appendChild(newContent);                        // 將內容節點添加到新的 li 節點上
    newLi.setAttribute('class','sale');                   // 給新的 li 節點添加 class 屬性
    ul.appendChild(newLi);                                // 將 newLi 添加到 HTML 內
  </script>
</body>

  • DOM0 事件和DOM2級在事件監聽使用方式上有什么區別？

  • DOM0事件是將時間作為元素的一個屬性，當需要對事件進行監聽時，只要將需要執行的函數賦值給這個屬性即可，需要刪除該事件監聽是只需將該屬性的值改為null即可；該方法操作直觀簡便，兼容性最好，但一個事件只能綁定一個函數。

// HTML
var btn = document.querySelector('#btn');
// JS
btn.onclick = function() {
  console.log('DOM0');
}
  • DOM2級事件是使用元素的addEventListener和removeEventListener方法對事件進行監聽，事件類型和處理函數做為上述方法的參數，其中addEventListener方法只能通過removeEventListener取消。該方法可以為一個事件綁定多個函數。
// HTML
var btn = document.querySelector('#btn');
// JS
btn.addEventListener('click', function(){
  console.log('DOM2');
})
  • attachEvent與addEventListener的區別？
  • addEventListener對IE8 及之前的版本不兼容，只能用attachEvent對事件進行監聽，同時，監聽事件的取消也只能用detachEvent實現而不能使用removeEventListener。
  • attachEvent添加的事件處理程序只能發生在事件冒泡過程中，而addEventListener的第三個參數可以決定事件處理程序是在捕獲階段還是在冒泡階段處理，一般瀏覽器默認發生在冒泡階段（即第三個參數默認為false）；
  • addEventListener方法第一個參數是事件類型（如click、load），而attachEvent的第一個參數是事件名稱（如onclick、onload）；
  • 二者事件處理程序的作用域不同。addEventListener事件的作用域是元素本身，而attachEvent的事件處理程序會在全局作用域內運行；
  • 為一個事件添加多個事件處理程序時，執行順序不同。addEventListener會按照處理程序添加的順序執行，而attachEvent執行多個事件處理程序的順序沒有規律。
  • 解釋IE事件冒泡和DOM2事件傳播機制？
  • IE事件冒泡機制中事件最開始是由最具體的元素接收，逐層往上向其祖先元素進行傳播，其祖先元素可以在此過程中接收事件并引發事件處理程序；
  • DOM2事件傳播在根節點到事件發生的具體元素過程中提供了截取事件的機會，然后則是冒泡機制。
  • 如何阻止事件冒泡？ 如何阻止默認事件？

通過stopPropagation()方法可以阻止事件冒泡；
e.stopPropagation() IE e.cancelBubble = true;

通過preventDefault()可以阻止默認事件。
e.preventDefault() IE e.returnValue = false;

代碼

  • 有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容
<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</script>
  • 補全代碼，要求：
    • 當點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內容為用戶輸入的非空字符串；當點擊結尾添加時在<li>前端6班</li>后添加用戶輸入的非空字符串.
    • 當點擊每一個元素li時控制臺展示該元素的文本內容。
<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結尾添加</button>
<script>
//todo ...
</script>
  • 補全代碼，要求：當鼠標放置在li元素上，會在img-preview里展示當前li元素的data-img對應的圖片。
<ul class="ct">
    <li data-img="1.png">鼠標放置查看圖片1</li>
    <li data-img="2.png">鼠標放置查看圖片2</li>
    <li data-img="3.png">鼠標放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
//todo ...
</script>

  • 實現如下圖Tab切換的功能


  • 實現下圖的模態框功能


代碼預覽:
代碼1
代碼2
代碼3
代碼4
代碼5

              本文版權歸作者饑人谷_Josh和饑人谷所有，轉載請注明來源
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容