js之DOM操作

1.API的概念：

           API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。例如：alert()、 prompt()、log()、reverse()、getMonths()

2.DOM概念：

             事件基础文档对象模型， 又称为文档树模型

         文档：一个网页可以称为文档

         节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

         元素：网页中的标签

         属性：标签(元素)的属性

3.获取元素6种方式：

        ①根据id获取元素：

               var 变量名 =document.getElementById("id")

        ②根据类名获取元素：

                var 变量名=document.getElementsByClass("类名")

                 这样获取到的是个伪数组

        ③根据name获取元素：

                var 变量名=document.getElementsByName("name名")

        ④根据标签获取元素：

                var 变量名=document.getElementsByTagName("标签名")

        ⑤根据选择器获取单个元素：

                var 变量名=document.getquerySelector("选择器")

                  获取指定选择器的第一个元素，参数就是选择器的名称

        ⑥根据选择器获取多个元素：

               var 变量名=document.getquerySelectorAll("选择器")

                 获取指定选择器的所有的元素，参数就是选择器的名称

4.事件：即触发-相应机制

         ①事件三要素{

                              触发源：触发事件的元素

                              事件类型：事件的触发方式（鼠标点击或键盘点击）

                              事件处理程序：触发事件后要执行的代码

                           }

         ②事件的基本使用：

                                  三步走战略：

                                   ❶获取元素

                                   ❷绑定事件

                                   ❸写事件要执行的函数

                                  var box = document.getElementById('box');

                                   box.onclick = function () {

                                  console.log('代码会在box被点击后执行');

                                   };

         ③非表单元素的属性操作

         ④表单元素的属性操作

         ⑤InnerText和InnerHTML

             前者指被选元素的文本内容

             后者指被选元素的富文本内容（包括文本内容及其style）

5.this指向问题{

                      ①普通函数中： this 指向 window

                             什么是普通函数：就是在script标签中用function方法名（）{}的方式定义的函数                            

 function b1() {
      console.log(this);
        }
       b1()

                      ② 构造函数中， this 指向实例化对象

                          构造函数就是用下面这种方式创建的对象                          

        

var Person = function (name, sex) {
             this.name = name
             this.sex = sex
             console.log(this);
       }
       var p1 = new Person("张三", "女")

                      ③ 对象函数中， this 指向当前的对象

                          对象函数就是对象里面的函数

var penson1 = {
        name: "李四",
        sex: "男",
        kanthis: function () {
         console.log(this);
             }
       }
       penson1.kanthis()

                      ④ 事件函数中， this 指向事件源

                           时间函数就是绑定事件的函数                       

 

  var b2 = document.getElementsByTagName("button")[0]
       b2.onclick = function () {
             console.log(this);
       }
 }

2.隐藏元素的4种方法{

                                ①src=""不占位置                                   

 

  document.getElementsByTagName("button")[1].onclick = function () {
            document.getElementsByTagName("img")[0].src = ""
      }

                                ②display="none"不占位置

document.getElementsByTagName("button")[2].onclick = function () {
            document.getElementsByTagName("img")[1].style.display = "none"
      }

                                ③visibility="hidden"占位置

document.getElementsByTagName("button")[3].onclick = function () {
            document.getElementsByTagName("img")[2].style.visibility = "hidden"
      }

                                ④opacity(透明度)占位置

 document.getElementsByTagName("button")[4].onclick = function () {
            document.getElementsByTagName("img")[3].style.opacity = 0
      }
}

3.防止a链接跳转的3种方法{

                                         ①在行内直接返回false

 <a href="http://www.baidu.com" onclick="return false">百度1</a>

                                         ②在行内调用方法放回false

<a href="http://www.baidu.com" onclick="return fun2()">百度2</a>
fun2 = function () {
            return false
      }

                                         ③绑定事件

document.getElementsByTagName("a")[2].onclick = function () {
       return false
}