1.什么webAPI?
-
API:就是一些方法或者属性的统称.
总结:用来操作网页的方法或者属性--->操作对象 特点:记各种操作网页的方法和属性
1.1.DOM
2.1.DOM就是来操作网页的,网页有事由标签组成的,DOM最后就是在操作网页中的标签
console.log将对象,变量以字符串的形式输出到控制台console.dir().将信息以对象键值对的形式输出到控制台中
1.2 DOM树
- 文档:一个页面就是一个文档,DOM中使用DOCUMENT表示
- 节点:网页中所有的内容,在文档树中都是节点,使用node表示
- 标签节点:网页中所有的标签,称为元素节点,又简称元素,使用element表示
1.3 获取元素
1.31 根据ID获取
语法:document.getElementById('id')
作用:通过id获取元素对象.
参数:id值,区分大小写的字符串
返回值:元素对象,或者null
<div id='time'>2019-9-9</div>
var div = document.getElementById('time');
console.log(div);
1.32 根据标签名来获取元素
语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）
1.返回的是获取过来元素对象的集合,以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[o]);
2.如果里面只有一个li 返回的还是伪数组
3.如果里面没有li 返回的是空的伪数组形式
<ol id='ol'> </ol>
4.element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素例如:ol[0];
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
注意:getElementsByTagName()获取到的是动态集合,即:当前页面增加了标签,这个集合页增加元素
1.33 H5新增获取元素方式
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
</script>
1.34 获取特殊元素(body,html)
1.获取document.body //返回Body元素对象
2.document.documentElement //返回html元素对象
1.4 事件基础
1.42 事件三要素
- 事件源(谁) : 触发事件的元素
- 事件类型(什么事件) : 例如click点击事件
- 事件处理程序(做啥) : 事件触发后要执行的代码(函数形式),事件处理函数
<button id="btn">唐伯虎</button>
<script>
点击一个按钮,弹出对话框
1.事件由3部分组成 事件源 事件类型 事件处理程序 我们称为事件三要素
(1):事件源 事件被触发的对象 谁 按钮
(2):事件类型 如何触发 什么事件 点击还是经过 还是键盘按下
(3):事件处理程序 通过一个函数赋值的方式完成
btn.onclick = function() {
alert('点秋香');
}
</script>
１.５ 操作元素
1.51改变元素内容(获取或设置)
1. innerText改变元素内容
var btn = document.querySelector('button');
div.innerHTML = getDate();
button.innerHTML = getDate();
2.innerText和innerHTML的区别
-
获取内容时的区别:
innerText会去除空格和换行,而innerHTML会保留空格和换行 -
设置内容时的区别:
innerText不会识别html,而inner HTML会识别
1.52 常用元素的属性操作
1.获取属性的值
元素对象.属性名
2.设置属性的值
元素对象.属性名= 值
ldh.onclick = function(){
img.src = 'images/ldh.jpg';
img.tile = '刘德华';
}
1.53 表单元素的属性操作
同上
btn.onclick = function(){
input.value = '来点字';
//btn.disabled = true;
this.disabled = true;
}
1.54 样式属性操作
通过js修改元素的大小,颜色,位置等样式
- 1.方式一:通过操作style属性
元素对象的style属性也是一个对象
元素对象.style.样式属性 = 值;
div.onclick = function(){
this.style.backgroundColor = 'skyblue';
this.style.width = '30px';
}
- 2.方式二:通过操作className属性
元素对象.className = 值;
因为class是关键字,所以使用className;
