API和Web API
API 是程序员提供的接口,实现某功能,不需要纠结内部。
Web API 主要是浏览器提供的一套浏览器功能和页面元素的API(DOM和BOM)。
DOM
DOM是文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML或XML)的编程接口,可通过DOM接口改变页面的内容、结构和样式。
DOM树:
文档:一个页面就是一个文档。
元素:页面中的所有标签。
节点:页面中的所有内容(标签、属性、文本、注释)。
DOM把以上内容都看作对象。
获取元素
-
通过ID获取:
document.getElementById("id值");
var top=document.getElementById("top");
注:1.参数id是字符串,且大小写敏感。
2.返回的事一个对象元素。
3.使用console.dir()
可查看返回对象的属性和方法。 -
通过标签获取(获取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指定。 -
通过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高