DOM-获取节点&常见事件

什么是API？

         软件系统预先定义的接口，直接让程序员去调用即可。
         每一种开发语言都有自己的API。
         例如console.log方法。就是JS的一个API。
         System.out.print()就是Java的一个API

文档对象模型

        文档对象模型简称：DOM
        用于处理HTML文档的编程接口。
        翻译：对HTML内部的标签进行处理。

DOM节点

html内部的所有标签 的另外一个叫法:  DOM节点.

通过DOM技术获取HTML元素（DOM节点）的4种方法

 方法1:通过标签名获取元素
 

var a = document.getElementsByTagName("h3");

此时就已经获取到了页面上所有的h3标签 注意：返回的一定是一个数组（遍历）.

即使页面上只有一个h3标签,也是数组.  要想处理就必须要遍历才能处理.

方法2:通过class名获取元素

var b = document.getElementsByClassName("a");

此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组（遍历）

方法3:通过name获取元素

var c = document.getElementsByName("b");

此时就已经获取到了页面上所有的name为a标签 注意返回的一定是一个数组（遍历)

方法4:通过id获取元素 因为id是唯一标识符 所以返回的是一个元素,可以直接处理

常见的操作节点的三个属性

1.innerText表示给标签内部重新赋值或取值  这里是文本值
                    
                    2.innerHtml表示给标签内部重新赋值或取值  这里是html值
                    
                    3.value 改变表单元素内部的value值
                    
                    注意方法1和方法2只能作用于非表单元素  
                    例如 h标签  a标签   p标签等等  或者理解为只能作用有 开标签和闭标签的。  <h3>   </h3>
                    
                    第三个方法只能作用于表单元素
                    例如input   或者理解为只能作用有 只有开标签的。  <input  type="text" />

如何修改页面中某个元素(DOM节点)的CSS样式

方法1(适用于仅仅只需要修改一丢丢CSS样式)

步骤1:获取节点
步骤2:通过style.xxx熟悉  即可完成赋值或取值  其中XXX表示指定的CSS样式

var p = document.getElementById("abc");
p.style.color = "red";
p.style.backgroundColor = "blue";
console.log(p.style.color);

方法2(适用于需要修改较多的CSS样式)

步骤1:将所有要修改的样式 全部封装到指定的style标签中 形成一个class的样式
步骤2:获取指定的元素节点 然后通过.className来给元素赋予一个指定的类名.

js中的事件
用户对前台页面做出的一些操作 来触发一些函数

常见的事件如下:
            1.单击事件: onclick  用处最多.
            2.双击事件: ondblclick  
            3.鼠标移入事件: onmouseover
            4.鼠标移出事件: onmouseout
            5.键盘输入事件:onkeyup
            6.失去焦点事件:onblur
            7.获取焦点事件:onfocus
            8.表单提交事件:onsubmit
            9.下拉菜单事件:onchange
            
            事件的语法如下:
            xxx表示获取的元素节点  abc表示什么事件
            xxx.onabc = function(){   }