[js学习] web APIs

Web API学习day1

API(应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。

DOM

文档对象模型(DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口。通过DOM可以改变网页的内容、结构和样式。

Dom获取元素

<div id="time">2020-4-18</div>    
<ul id="nav">        
	<li>周四</li>        
	<li>周六</li>        
	<li>周日</li>    
</ul>    
<div class="box">盒子1</div>   
<div class="box">盒子2</div>    
<script>        
 //文档页面从上向下加载，所以script必须写在标签下面        
 //1、getElementById() 通过id名获取元素        
 var timer = document.getElementById('time');	
 console.dir(timer);//打印返回的元素对象，更好的查看里面的属性和方法
      
  //2、getElementsByTagName() 根据标签名获取  得到的是对象的集合     
var lis = document.getElementsByTagName('li');
console.log(lis[0]);
  //3、element.getElementsByTagName()可以得到这个元素里面的某些标签 
var nav = document.getElementById('nav');        
var lis2 = nav.getElementsByTagName('li');
        
 //以下是H5新增方法        
 //4、getElementsClassTagName() 根据类名选元素的集合        
 var boxs = document.getElementsByClassName('box');
        
//5、querySelector() 返回指定选择器的第一个元素对象,选择器里面必须要加符号
var firstBox = document.querySelector('.box');        
var time2 = document.querySelector('#time');        
var li1 = document.querySelector('li');
       
//6、querySelectorAll()返回指定选择器的所有元素        
var boxs2 = document.querySelectorAll('.box');
    
//--------------------------        
//获取body标签        
var bodyEle = document.body;
        
//获取html元素        
var htmlEle = document.documentElement;
</script>

事件基础

//事件由三部分组成：事件源，事件类型，事件处理程序        
//事件源 事件除法的对象        
var btn = document.getElementById('btn');        
//事件类型(如何触发) 如鼠标点击(onclick)，鼠标经过，键盘按下        
//事件处理程序 通过一个函数赋值的方式完成        
btn.onclick = function() {            
	alert('hhhhh');        
}

操作元素

//改变元素内容        
//1、element.innerText 从起始位置到终止位置，但它去除html标签，即不识别html标签，同时空格和换行也会去掉        
//2、element.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行(!W3C标准！)        
var btn2 = document.querySelector('#btn2');        
var div = document.querySelector('div');        
btn2.onclick = function(){            
	div.innerText = "2020-4-18";        
}        
div.innerHTML('<strong>2020-4-18</strong>');

//改变元素属性        
元素.属性 = '';