Js-web-api (Dom Bom Event Binding Ajax Request Storage)

Dom operation

html is a special structure of xml
 dom: browsers structure the html code they get into a model that browsers can recognize and js can operate on

Obtaining DOM Nodes 
	var div1=document.getElementById('div1');//element 
	Var divList = document. getElements ByTagName ('div'); // collection 
	console.log(divList.length) 
	console.log(divList[0])
	 
	Var containerList = document. getElements ByClassName (". contaner")// collection 
	Var pList = document. querySelector All ('p')// collection 
②property 
	var pList=document.querySelectorAll('all'); 
	var p=pList[0]; 
	console.log(p.style.width) 
	p.style.width='100px' 
	console.log(p.className) 
	p.className='p1'
	 
	// Get nodeName and nodeType 
	console.log(p.nodeName) 
	console.log(p.nodeType) 
	
New node
 Query subnodes
 Query parent node
 Delete node
	 
Question 1. What is the basic data structure of dom? 
	tree 
Question 2. What are the common API s for Dom operations? 
	Obtain DOM nodes, as well as properties and attributes of nodes 
	(2) Get parent node and child Nodes / parentNode
	(3) Add new nodes and delete them 
Question 3. Are Attribute s and Property of Dom Nodes different? 
	property is only a modification of the attributes of a JS object 
	Attribute is a modification of html tag attributes

BOM operation

navigator Test Browser Model
screen
location
history

	var ua=navigator.userAgent 
	var isChrome=ua.indexOf('Chrome') 
	console.log(isChrome) 

	console.log(screen.width) 
	console.log(scr)
	 
	console.log(location.href) 
	console.log(location.protocal) 
	console.log(location.pathname) 
	console.log(location.search) 
	console.log(location.hash)
	 
	history.back() 
	histort.forward()

Event

General Event Binding

	var btn=document.getElementById('btn1'); 
	btn.addEventListener('click',function(event){ 
	console.log('clicked') 
	})
	 
	function bindEvent(elem,type,fn){ 
	elem.addEventListener(type,fn) 
	}
	 
	var a=document.getElementById('link1') 
	bindEvent(a,'click',function(e){ 
	e.preventDefault() //Prevent default behavior 
	alert('clicked') 
	})
 
	//Note: AboutIECompatibility of Low Version 
	①IELow version usage attachEvent Binding events, andW3CDifferent standards 
	②IELow version usage is very small, many websites have not supported it. 
	//Suggestions onIECompatibility of Low Version: Understanding is enough, no further study is needed. 
	//If you encounter the right oneIELow edition requires rigorous interviews and resolute abandonment

Event Bubbling
Events defined in the parent div are bubbled up after the child event is executed
How to prevent event bubbling: e.stopPropagation()

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="div1">
      <p id="p1">activation</p>
      <p id="p2">cancel</p>
      <p id="p3">cancel</p>
      <p id="p4">cancel</p>
    </div>
    <div id="div2">
      <p id="p5">cancel</p>
      <p id="p6">cancel</p>
    </div>
 
    <script type="text/javascript">
    // Using the mechanism of preventing bubbles: the window is activated when clicking p1 only
      function bindEvent(elem,type,func) {
        elem.addEventListener(type,func)
      }
      var p1 = document.getElementById('p1')
      bindEvent(p1,'click',function(e){
        e.stopPropagation()
        alert('activation')
      })
      bindEvent(body,'click',function (e) {
        alert('cancel')
      })
	
	// Click on the p tag in div to print the number of child nodes currently clicked in div
	function addE(){
	  var elem = document.getElementById('div1')
	  elem.addEventListener('click',function(){
	    console.log('div1 by click ----- ')
	  })
	  var elemChild = elem.children
	  console.log(elem)
	  
	  for(var i=0;i<elemChild.length;i++){
	    var iChild = elemChild[i]
	    iChild.index = i;
	    
	    iChild.onclick = (function(i){
	      return function(e){ // Use closures to solve the problem of always printing the last child node
	        console.log(e);
	        console.log('The first '+i+' individual div Be clicked')
	      }
	    })(i)
	  }
	}
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="div1">
      <a href="#">a1</a>
      <a href="#">a2</a>
      <a href="#">a3</a>
      <a href="#">a4</a>
      <a href="#">a5</a>
      <p>fjdk</p>
      <h1>jfkd</h1>
      <!-- ...More will be added at any time a Label -->
    </div>
    <script type="text/javascript">
      // Require dynamic event binding by proxy, binding all a tags in div1
      var div = document.getElementById('div1')
      function bindEvent(elem,type,func) {
        elem.addEventListener(type,func)
      }
      bindEvent(div,'click',function(e){
        console.log(e) // MouseEvent
        console.log(e.target) //  Complete a label object <a href="">a3</a>
        console.log(e.target.nodeName); // They are all capitalized.
        if(e.target.nodeName === 'A'){
          alert(e.target.innerHTML)
        }
      })
    </script>
  </body>
</html>

Posted by versatilewt on Wed, 09 Oct 2019 15:43:26 -0700

Programmer Group

Js-web-api (Dom Bom Event Binding Ajax Request Storage)

Dom operation

BOM operation

Event

Hot Keywords