JavaScript DOM获取元素

API 和Web API

1.API
 API ( Application Programming Interface,应用程序编程接口)是一些预先定 义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
 API是给程序员提供的-种工具,以便能更轻松的实现想要完成的功能。
2.Web API
  Web API是浏览器提供的一套操作浏览器功能和页面元素的 API( BOM和DOM)。
  现阶段我们主要针对于浏览器讲解常用的API,主要针对浏览器做交互效果。
  比如我们想要浏览器弹出一个警示框，直接使用alert( '弹出’)
    因为Web API很多,所以我们将这个阶段称为Web APIs
   MDN详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API
3.总结
  1. API是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现
  2. Web API主要是针对于浏览器提供的接口, 主要针对于浏览器做交互效果。
  3. Web API一般都有输入和输出 (函数的传参和返回值) , Web API很多都是方法(函数)

DOM简介

什么是DOM

 文档对象模型( Document Object Model ,简称DOM) , 是W3C组织W3C已经定义了-系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。推荐的处理可扩展标记语言( HTML或者XML )的标准编程接口。
 W3C已经定义了-系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

DOM树

 在DOM中 我们可以将整个页面划分成一中树形结构称为DOM树

DOM中的名词
 ●文档:一个页面就是一 个文档, DOM中使用document表示
 ●元素:页面中的所有标签都是元素, DOM中使用element表示
 ●节点:网页中的所有内容都是节点(标签、属性、文本、注释等), DOM中使用node表示
DOM把以上内容都看做是对象

DOM获取元素

 DOM在我们实际开发中主要用来操作元素。
 我们如何来获取页面中的元索呢?
 获取页面中的元素可以使用以下几种方式:
  ●根据ID获取
  ●根据标签名获取
  ●通过HTML5新增的方法获取
  ●特殊元素获取
1.根据ID获取
 使用getElementByld0方法可以获取带有ID的元素对象
 注意事项
  1.因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面
  2.get获得element元素by通过驼峰命名法
  3.参数id是大小写敏感的字符串
  4.返回的是个元素对象
我们学一个新的 方法 console.dir()
 console.dir打印我们返回的元素对象更好的查看里面的属性和方法
2.根据标签名获取
 使用getElementsByTagName0方法可以返回带有指定标签名的对象的集合。
  返回的是获取过来元素对象的集合以伪数组的形式存储的
注意:
 1.因为得到的是一个对象的集合 ,所以我们想要操作里面的元素就需要遍历。
 2.得到元素对象是动态的

 <ul>
        <li>第一个ul中的li</li>
        <li>第一个ul中的li</li>
        <li>第一个ul中的li</li>
        <li>第一个ul中的li</li>
        <li>第一个ul中的li</li>
    </ul>
    <ul id="u2" >
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
    </ul>
    <script>
        //返回的是获取过来元素对象的集合以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        //我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i<lis.length;i++){ 
            console.log(lis[i]);            
        }

        //element.getElementsByTagName()可 以得到这个元素里面的某些标签 
        var nav = document.getElementById('u2');
        var navlis = nav.getElementsByTagName('li');
        console.log(navlis);
    </script>

3.通过HTML5新增的方法获取 IE9以上才支持
 1. getElementsByClassName(类名’) ; //根据类名返回（获取）元素对象集合
 2.querySelector(‘选择器’)返回指定选择器的第一个 元素对象
  里面的选择器需要加符号 类选择器加点"." id选择器加"#"
 3.querySelectorAll( )返回指定选择器的所有元素对象

    <div class="box" >
        第一个
    </div>
    <div class="box" >
        第二个
    </div>
    <ul id="nav"> 
        <li>第一li</li>
        <li>第二li</li>
    </ul>
    <script>
        //getElementByClassName 根据类名
        var boxs = document.getElementsByClassName('.box');
        console.log(boxs);
        //querySeletor 返回指定选择的第一个元素对象 
        var firstbox = document.querySelector('.box');
        console.log(firstbox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector(li);
        console.log(li);
        //querySelectorAll() 返回指定选择器所有的元素
        var aBox = document.querySelectorAll('.box');
        console.log(aBox);

    </script>

4.获取特殊元素(body,html)

1.获取body元素
 document.body
2.获取 html元素
 document.documentElement; 规范写法

 <script>
    //获取 body
    var bodyel = document.body;
    console.log(bodyel);
    //获取 html
    var htmle =document.html; //不可用
    var htmlel = document.documentElement;
    console.log(htmle);
    console.log(htmlel);
    </script>

今天就到这里 明天该学 基础事件了 不知不觉就写了二十多篇博客了。。 争取来个三六零篇