JS核心第一天
一.API 和Web API
- API是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现
- Web API主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果。
- Web API -般都有输入和输出(函数的传参和返回值), Web API很多都是方法(函数)
4.学习Web API可以结合前面学习内置对象方法的思路学习
二.DOM简介
1.1什么是DOM
文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推荐的处理可扩展标记语言( HTML
或者XML )的标准编程接口。
W3C已经定义了一-系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。
1.2DOM树
三.获取元素
- 根据ID获取
var element= document.getElementById(id);
- 根据标签名获取
var element= document.getElementByTagName()
//返回带有指定标签名的对象集合,以伪数组的形式储存
还可以获取某个元素(父元素)内部所有指定标签名的子元素.
element .getElementsByTagName( '标签名');
注意:父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。
- 通过HTML5新增的方法获取
1.document . getElementsByClassName(类名') ; //根据类名返回元素对象集合
2.document . querySelector ( '选择器') ;
//根据指定选择器返回第一个元素对象
3.document . querySe1ectorAll( '选择器');
//根据指定选择器返回
- 特殊元素获取
获取body元素
1. doucumnet. body // 返回body元素对象
获取htmI元素
1. document . documentElement
//返回htm1元素对象
四.事件基础
3.1事件概述：
JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。
简单理解:触发–响应机制。网页中的每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。
<body>
<button id= "btn">唐伯虎</ button>
<script>
//点击一个按钮，弹出对话框
// 1.事件是有三部分组成 事件源事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源事件被触发的对象 谁按钮
var btn = document . getElementById('btn' );
//(2) 事件类型
如何触发什么事件比如鼠标点击(onclick)还是鼠标经过还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式完成
btn.onclick = function() {
alert('点秋香');
}
</script>
</body>
3.2执行事件的步骤
1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采取函数赋值形式)
3.3常见的鼠标事件
五.操作元素
1.改变元素内容
element.innerText=’ ’
从起始位置到终止位置的内容,但它不识别html标签，同时空格和换行也会去掉
element.innerHTML=’ ’
起始位置到终止位置的全部内容,识别html标签,同时保留空格和换行
2.常用元素属性操作
- innerText、 innerHTML 改变元素内容
- src、href
- id、alt、title
3表单元素的属性操作
利用DOM可以操作如下表单元素的属性:
type、value、checked、 selected、 disabled
以value为例
<button>按钮</button>
<input type="text" value="输入 内容">
<script>
// 1.获取元素
var btn = document . querySelector( ' button');
var input = document . querySelector( ' input');
// 2.注册事件处理程序
btn.onclick = function</
最低0.47元/天 解锁文章
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
