js-web-api(Dom \ Bom \ 事件绑定 \ Ajax请求 \ 存储)

本文链接：https://blog.csdn.net/weixin_43303420/article/details/98631560

Dom操作

html是xml的一种特殊结构
dom ：浏览器把拿到的html代码，结构化为一个浏览器能够识别并且js可操作的一个模型

①获取DOM节点 
	var div1=document.getElementById(‘div1’)；//元素 
	var divList=document.getElementsByTagName(‘div’); //集合 
	console.log(divList.length) 
	console.log(divList[0])
	 
	var containerList=document.getElementsByClassName(“.contaner”)//集合 
	var pList=document.querySelectorAll(‘p’)//集合 
②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’
	 
	//获取nodeName和nodeType 
	console.log(p.nodeName) 
	console.log(p.nodeType) 
	
新增节点
查询子节点
查询父节点
删除节点
	 
问题1、dom是哪种基本的数据结构？ 
	树 
问题2、Dom操作的常用API有哪些？ 
	①获取DOM节点，以及节点的property和Attribute 
	②获取父节点，获取子节点  childNodes/ parentNode
	③新增节点，删除节点 
问题3、Dom节点的Attribute和Property有和区别？ 
	①property只是一个JS对象的属性的修改 
	②Attribute是对html标签属性的修改

BOM 操作

navigator 测试浏览器型号
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()

事件

通用事件绑定

	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() //阻止默认行为 
	alert(‘clicked’) 
	})
 
	注：关于IE低版本的兼容性 
	①IE低版本使用attachEvent绑定事件，和W3C标准不一样 
	②IE低版本使用量以非常少，很多网站都早已不支持 
	建议对IE低版本的兼容性：了解即可，无需深究 
	如果遇到对IE低版本要求苛刻的面试，果断放弃

事件冒泡
在父级div中定义的事件，会在子级事件执行完之后冒泡上来执行
阻止事件冒泡的方法：e.stopPropagation()

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="div1">
      <p id="p1">激活</p>
      <p id="p2">取消</p>
      <p id="p3">取消</p>
      <p id="p4">取消</p>
    </div>
    <div id="div2">
      <p id="p5">取消</p>
      <p id="p6">取消</p>
    </div>
 
    <script type="text/javascript">
    // 利用阻止冒泡的机制实现：只点击 p1 的时候弹窗激活
      function bindEvent(elem,type,func) {
        elem.addEventListener(type,func)
      }
      var p1 = document.getElementById('p1')
      bindEvent(p1,'click',function(e){
        e.stopPropagation()
        alert('激活')
      })
      bindEvent(body,'click',function (e) {
        alert('取消')
      })
	
	// 点击div中的p标签，打印当前点击的是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){ // 使用闭包解决总是打印最后一个子节点
	        console.log(e);
	        console.log('第 '+i+' 个div被点击')
	      }
	    })(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>
      <!-- ...随时会新增更多的 a 标签 -->
    </div>
    <script type="text/javascript">
      // 要求用代理的方式实现 动态事件绑定，绑定 div1 中的所有 a 标签
      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) //  完整的 a 标签 对象 <a href="#">a3</a>
        console.log(e.target.nodeName); // 都是大写
        if(e.target.nodeName === 'A'){
          alert(e.target.innerHTML)
        }
      })
    </script>
  </body>
</html>