黑马程序员技术交流社区

标题: jsAPI [打印本页]

---

作者: z-snow    时间: 2019-4-25 12:55
标题: jsAPI
### API ：DOM & BOM

### 一、DOM：
文档对象模型,是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
### DOM 树：
- 文档：一个页面就是一个文档，DOM 中使用 document 表示
-  元素：页面中的所有标签都是元素，DOM 中使用 element 表示
-  节点：网页中的所有内容都是节点（标签、属性、文本、注释等），用 node 表示
DOM 把以上内容都看做是对象

#### 二、操作元素
##### **1》、获取元素对象**
1、**根据id获取元素：**
document.getElementById('box');  
- 注意：【返回值】
a、此方法的参数必须是字符串，不加引号，会获取变量名为box的元素
、获取到元素返回的是元素对象，获取不到返回的是null

2、**根据标签名获取元素：**
**（1）** 从文档中根据标签名获取元素：document.getElementsByTagName('div')
**（2）** 从标签中根据标签名获取元素：
var box = documents.getElementById('div');
var lis = box.getElementsByTagName('li');
- 注意：【返回值】
获取到,返回伪数组，里面包含了每个元素对象，
获取不到返回的是一个空的伪数组

3、**h5新增的获取元素方法（有兼容性问题）**
**（1）根据类名获取元素**：
a、从文档中获取：document.getElementsByClassName()
b、从标签中获取：
var box = document.getElementById('div');
var lis = box.getElementsByClassName('li');
- 注意：【返回值】
获取到，返回伪数组；
获取不到，返回空的伪数组

**（2）根据选择器来获取**
<1>返回第一个对象
- 1 、从文档中获取指定选择器中的第一个对象： document.querySelector('选择器');
- 2、从指定标签中获取
var box = document.getElementById('div');
var lis = box.querySelector('li');
- 注意：【返回值】
获取到返回元素对象，
获取不到返回null

<2> 返回所有对象
- 1 、从文档中获取指定选择器中的所有对象： document.querySelectorAll('选择器');
- 2、从指定标签中获取
var box = documents.getElementById('div');
var lis = box.querySelectorAll('li');
- 注意：【返回值】
获取到返回伪数组，
获取不到返回空伪数组

**注意：**
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector('#nav');

**（3）获取特殊元素**
doucument.body  // 返回body元素对象
document.documentElement  // 返回html元素对象

####  2》操作元素内容
a、获取内容：
- 1、元素对象.innerText 【过滤html标签、空格、换行。】
- 2、元素对象.innerHTML，【原封不动的获取标签中间的内容，常用】

b、修改内容：
- 1、元素对象.innerText = 新内容; 【不识别html标签】
- 2、元素对象.innerHTML = 新内容; 【识别html标签】

#### 3》操作元素属性
a 、获取属性：
1、元素对象.属性名（只能获取标签自带的属性）
2、元素对象.getAttribute('属性名') ：既可以获取自带的属性，还可以获取自定义的属性
b、修改属性：
1、元素对象.属性名 = 新值;（只能修改标签自带的属性）
2、元素对象.setAttribute('属性名','属性值');(既可以修改（添加）自定义，也可以修改自带属性)

c、移出属性：元素对象.removeAttribute('属性名')
- 注意：表单元素的状态属性【例如：disabled、checked】，js中用true和false来设置其状态。
        元素对象.disabled = true;
        元素对象.checked = true;
#### 4》操作元素样式
   1）元素对象.style.样式名 = 样式值;【样式少时用】
        2）通过修改class属性来设置元素对象.className = 类名;【样式多时用】



#### 三、事件
定义:当用户做了某个操作，出现相应的特效
1、事件三要素：事件源，事件类型，事件处理程序
2、执行时间步骤：
（1）. 获取事件源：获取元素对象
（2）. 注册事件（绑定事件）
元素对象.事件类型  = function(){
    // 特效代码
}
常用的事件类型
        单击事件, onclick
        获得焦点事件, onfocus
        失去焦点事件，onblur
        鼠标移入事件, onmouseover
        鼠标移出事件，onmouseout
（3）. 添加事件处理程序（采取函数赋值形式）
事件处理函数中的this：事件处理函数中有1个关键字this代表事件源对象


---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2