JavaScript进阶之DOM（一）

API和Web API

API 是程序员提供的接口，实现某功能，不需要纠结内部。
Web API 主要是浏览器提供的一套浏览器功能和页面元素的API(DOM和BOM)。

DOM

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

DOM树:

文档：一个页面就是一个文档。
元素：页面中的所有标签。
节点：页面中的所有内容（标签、属性、文本、注释）。
DOM把以上内容都看作对象。

获取元素

1. 通过ID获取: document.getElementById("id值");

   var top=document.getElementById("top");
   注：

   1.参数id是字符串，且大小写敏感。
   2.返回的事一个对象元素。
   3.使用console.dir()可查看返回对象的属性和方法。

2. 通过标签获取（获取DOM节点）:document.getElementsByTagName("标签")

   var li=document.getElementsByTagName("li");
   因为是集合所以返回的是全部li元素，若想访问第一个元素可用console.log(li[0]);

   若想遍历元素对象可用：
   for(var i=0;i<li.lenght;i++){ console.log(li[i]); }

   注：

   1.返回的是元素对象集合，以伪数组的形式存储，无论有几个元素（包括空）。
   2.得到的是元素对象是动态的。
   3.若要选择特定区域的元素对象，可用指定父元素的方式element.getElementsTagName("标签名"); ,但父元素必须具体
   例如：
   var ol=doucument.getElementsByTagName("ol"); console.log(ol[0].getElementsByTagName("li"));
   或者直接使用ID指定。

3. 通过HTML5新增的方法获取

   • 类名：document.getElementsByClassName('类名'); //集合
   • 选择器：document.querySelectorAll('选择器');
   • 选择器第一个:document.querySelector('选择器');

   注：选择器类加.,ID加#。 (.box #nav)

若不需考虑兼容性querySelect更强大些。

获取body元素

document.body

获取html元素

document.documentElememt

事件基础

事件：触发响应的机制。
组成：事件是由三部分组成，事件源，事件类型，事件处理程序。

事件源：事件被触发对象
事件类型：如何触发，什么事件
事件处理程序：通过函数赋值方式。

btn.onclick=function(){
alert('响应成功');
}

执行事件的步骤

1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值方式）

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键
onmouseover	鼠标经过
onmouseout	鼠标离开
onfocus	获得鼠标焦点
onblur	失去鼠标焦点
onmousestop	鼠标移动
onmouseup	鼠标弹起
onmousedown	鼠标按下

操作元素

1.改变元素内容

• 不添加绑定事件

  原HTML:
  <h3>你好</h3>

  JS:

  	var h=document.querySelector("h3")[0];    
  	console.log(h.innerHTML)//节点.innerHTML
  	h.innerHTML="hahaha";
  

• 添加绑定事件

    	<button id="cat">猫</button>
    	<button id="dog">狗</button></b>
    	<img src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2247692397,1189743173&fm=5" />
    
    <script>
    	var cat=document.querySelector("#cat");
    	var dog=document.querySelector("#dog");
    	var img=document.querySelector("img");
    	cat.onclick=function(){
    		img.src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2247692397,1189743173&fm=5";
    		img.title="布偶猫";
    	}
    	dog.onclick=function(){
    		img.src="https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1820154701,1076679668&fm=5"
    		img.title="边境牧羊犬";
    	}
    </script>
  

注：修改文本内容时还可以使用innerText,但是innerText不能像innerHTML一样识别修改的样式。
innerText不能识别HTML标签，非标准，获取元素内容时会去除空格和换行。
innerHTML可以识别HTML标签，W3C标准，获取元素时会保留空格和换行。

2.修改元素样式

原HTML:
<div class="box"> <span>你真好</span> </div>

JS:
var b=document.querySelector(".box") b.innerHTML="<b>你真棒</b>"

3.获取input里面的内容

JS:
var ipt=document.querySelector("input"); console.log(ipt.value)//节点.value ipt.value="你真帅"；

表单元素里面的值是通过value来修改的。如果想某个表单被禁用可以.disabled=true,该表单颜色变灰
不可使用。

4.样式属性
* 行内样式操作element.style.属性
例如：div.style.backgroundColor="blue";//驼峰命名
注：JS产生样式是行内元素，权重比CSS高
abled=true,该表单颜色变灰
不可使用。

4.样式属性
* 行内样式操作element.style.属性
例如：div.style.backgroundColor="blue";//驼峰命名
注：JS产生样式是行内元素，权重比CSS高