Web APIs(1)

JS的组成

Web APIs与javascript基础的区别

Web APIs是js基础的应用，大量使用js基础做页面交互效果

API 与 Web AIP的区别

• API是提供给程序员的一种工具，以便更好的完成想要实现的功能。(充电接口)
• Web API是浏览器提供的一套操作浏览器功能与页面元素的API(DOM与BOM)

API 与 Web API的总结

• API是为程序员提供的一个接口，帮助我们实现某种功能，会用即可。
• Web AIP 主要是针对于浏览器提供的接口，主要针对浏览器做交互效果
• Web API一般都有输入和输出（函数的传参与返回值） Web ApI很多都是方法

DOM

DOM:文档对象模型，提供访问与操作网页内容的接口与方法。通过DOM，可以改变网页的结构与外观与样式

DOM树

• 一个页面就是一个文档，DOM中用document表示
• 页面中所有的元素被称为标签，DOM中用element表示
• 网页中所有的内容都是节点（标签 属性 文本 注释），DOM中使用node 表示

以上内容都可以看作对象

获取元素

通过id名获取

通过getElementById(id)获取

注意事项

• 返回元素对象
• 参数是一个大小写敏感的字符串
• 页面加载是从上往下加载的，所以script元素写在内容之下
• console.dir（）可以打印返回的元素对象，更好的查看元素对象的属性与方法

    
    
    



    
hello 
    

根据标签名获取元素

根据getElementsByTagName('标签名')获取
注意事项

• 参数为一个大小写敏感的字符串
• 返回值是一个元素对象集合，以伪数组的方式进行存储
• 可以通过遍历获取每一个元素对象
• 获取到的元素对象是动态的

    
    
    



    

        
WEB前段自学者
        
WEB前段自学者
        
WEB前段自学者
        
WEB前段自学者
        
WEB前段自学者
        
WEB前段自学者
    

    

如何获取某个元素里面的标签呢

思路

• 可以先获取元素的id
• 再通过id名获取标签

    
    
    



    
    

        
WEB前端
        
WEB前端
        
WEB前端
        
WEB前端
        
WEB前端
        
WEB前端
    


    

        
hello
        
hello
        
hello
        
hello
        
hello
        
hello
        
hello
        
hello
    

    

根据类名获取元素(html5新增方法）

getElementsByClassName('类名')

注意事项

• 参数为一个大小写敏感的字符串
• 返回值为元素对象集合
• 具有兼容性，是html5新增的方法

    
    
    



    
盒子
    
盒子
    

通过querySelector('选择器')来获取元素

注意事项

• 获取的是指定选择器的第一个元素对象
• 参数里面选择器必须要加符号

    
    
    



    
盒子1
    
盒子2

    

通过通过querySelectorAll('选择器')来获取元素

注意事项

• 返回值为指定选择器的所有元素对象集合
• 参数里面的选择器必须要加符号。

    
    
    



    

        
hello
        
hello
        
hello
        
hello
    
    

获取特殊元素（html body）