Webapi interview question summary 01

1. What is? dom？

1、DOM yes W3C（ World wide web consortium ） Standards for

2、DOM Access defined HTML and XML Standards of documents

W3C DOM The standard is divided into 3 Different parts

1. The core DOM - A standard model for any structured document

2. XML DOM - in the light of XML Standard model for documentation

3. HTML DOM - in the light of HTML Standard model for documentation

   remarks ：DOM yes Document Object Model（ Document object model ） Abbreviation

2. dom Node Attribute and Property What's the difference ？

1、 What is? Property

Every DOM All nodes are one object object , Have their own property and method In principle, property Should only js fuck do , Will not appear in html in （ Silent recognize Belong to sex except Outside ： id/src/href/className/dir/title/lang etc. ）, And others js object equally , Self defined property It will also appear in object Of for…in Ergodic

2、 What is? Attribute

attribute Appear in the dom in ,js Provides getAttribute/setAttribute And other methods to get and change its value , Finally, it acts on html in , Can affect innerHTML Get the value of . Can be accessed by dom Node attributes Property to get Change all of the nodes attribute.（ stay IE<9 in ,attribute What gets and changes is actually property.）

3、 The difference between the two

3.1） Self defined Property And Attribute Out of sync , It's not equal

3.2） Non custom DOM property And attributes Is conditionally synchronized

3.3） Non custom properties (id/src/href/name/value etc. ), adopt setAttribute Modifying its property value can synchronously affect property On , And by .property Modify the attribute value (value) Time will not sync to attribute On , That is, it will not react to html On ( Except for the following situations , Non custom properties It is synchronous between the two ).

3. dom How structure operations are added 、 remove 、 Move 、 Copy 、 Create and find nodes ？

1、 Create a new node

createDocumentFragment() // Create a DOM fragment

createElement() // Create a specific element

createTextnode() // Create a text node

2、 add to 、 remove 、 Replace 、 Insert

appendChild()

removeChild()

replaceChild()

insertBefore() // did not insertAfter()

3、 lookup

getElementsByTagName() // By label name

getElementsByName() // By element Name The value of the property (IE Strong fault tolerance , You get an array , These include id be equal to name It's worth it )

getElementById() // Through elements Id, Uniqueness

4. dom Event model ？

DOM Event model

DOM There are two kinds of event models ： Event capture and event bubbling .

1. Event capture takes click event as an example , Events of the same type will be caused by root —> The ancestor element of the target —> The parent element of the target —> Target element

2. Event bubbling is the opposite of event capture . Trigger from inside to outside ： Target element —> The parent element of the target element —> Paternity The parent element of element —> root

Event communication

Both event capture and event bubble have event propagation stage , The propagation stage is the process from the beginning to the end of the event .

priority ： Capture first , Bubble again .

5. What is event bubbling , How it works ？ How to prevent events from bubbling 、 Default behavior ?

1、 What is event bubbling , How he works ?

Trigger some kind of event on an object （ For example, click onclick event ）, This event will propagate to the parent object of this object , From inside to outside , Until it's dealt with （ All events of the same kind of the parent object will be activated ）, Or it reaches the top of the object hierarchy , namely document object （ Some browsers are window）

2、 Methods to prevent event bubbling

2.1）w3c The method is event.stopPropagation(); Event handling , Stop bubbling , But it will not prevent default behavior （ Jump to hyperlink ）

2.2）IE Is the use event.cancelBubble = true Stop the event from bubbling

2.3）return false; jq In the event processing process , Stop bubbling , Also block default behavior （ Do not jump over link ）

  function bubbles(e) {
    var ev = e || window.event
    if (ev && ev.stopPropagation) {
      //  Not  IE  browser 
      ev.stopPropagation()
    } else {
      // IE  browser (IE11  following )
      ev.cancelBubble = true
    }
    console.log(" The bottom box was clicked ")
  }

3、 Ways to prevent default behavior

3.1）w3c Approach is to e.preventDefault()

3.2）IE Is the use e.returnValue = false;

  // Suppose there is a link <a href="http://baidu.com/" id="testA" >baidu.com</a>
  var a = document.getElementById("testA")
  a.onclick = function (e) {
    if (e.preventDefault) {
      e.preventDefault()
    } else {
      window.event.returnValue == false;
    }
  }