API（应用程序编程接口）
预先定义的函数
Web API
浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
DOM（文档对象模型）
1. 什么是DOM
W3C推荐的处理可扩展标记语言（HTML或XML）的标准编程接口，通过DOM可以改变网页的内容、结构和样式
2. 获取元素
var timer = document.getElementById('time');
//console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
//获取普通元素
//1. 根据ID获取
var ol = document.getElementById('ol'); //元素
//2. 根据标签名获取元素
var lis = document.getElementsByTagName('li'); //元素集合
//H5新增获取元素方式
//1.根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box'); //元素集合
//2.返回指定选择器的第一个元素对象
var nav = document.querySelector('#nav'); //元素
//3.返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box'); //元素集合
//获取特殊元素
// 1.获取body 元素
var bodyEle = document.body;
// 2.获取html 元素
var htmlEle = document.documentElement;
3. 事件基础
// 谁 怎么触发 出发后干什么
// 执行事件步骤 事件源 事件类型 事件处理程序
// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
4. 操作元素
常见元素属性修改
常见元素属性：innerHTML、innerText、src、href、id、src、href、alt、title
//元素对象.属性名 = 值
img.src = 'images/zxy.jpg';
img.title = '张学友思密达';
innerHTML和innerText
var div = document.querySelector('div');
// innerText 和 innerHTML的区别
// 1. innerText 不识别html标签 非标准 去除空格和换行
// 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
div.innerText = '<strong>今天是：</strong> 2019';
div.innerHTML = '<strong>今天是：</strong> 2019';
// 这两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
表单属性设置以及this的使用
可以通过DOM改变以下的表单属性：type、value、checked、selected、disabled
表单的值是通过value 来改变，而不是innerHTML
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function() {
// 表单里面的值 文字内容是通过 value 来修改的
input.value = "输入";
// 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
btn.disabled = true;
//或使用这个
// this 指向的是事件函数的调用者 btn
this.disabled = true;
}
样式属性操作
操作style属性
//元素对象.style.样式属性 = 值
//JS的样式命名采取的是驼峰命名法
//产生的是行内样式
this.style.backgroundColor = 'purple';
操作className属性
//元素对象.className = 值
//是className
//直接修改类名，覆盖原来的类
this.className = 'first change';
自定义属性
<div id="demo" index="1" class="nav"></div>
<script>
var div = document.querySelector('div');
// 1. 获取元素的属性值
// (1) element.属性
//获取内置属性值
console.log(div.id);
//(2) element.getAttribute('属性')
//获取我们程序员自己添加的属性我们称为自定义属性 index
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
//2.设置属性值
// (1) element.属性= '值'
//设置内置属性值
div.id = 'test';
div.className = 'navs';
// (2) element.setAttribute('属性', '值');
//主要针对于自定义属性
div.setAttribute('index', 2);
// class 特殊 这里面写的就是class 不是className
div.setAttribute('class', 'footer');
// 3 移除属性 removeAttribute(属性)
div.removeAttribute('index');
</script>
H5自定义属性
- H5规定自定义属性
data-开头做为属性名并且赋值。
<div data-index=“1”></div>
- 获取H5自定义属性
//1.兼容性获取 element.getAttribute(‘data-index’);
//2. H5新增 element.dataset.index
// 或 element.dataset[‘index’]
// ie 11才开始支持
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
5. 排他思想
如果有同一组元素，我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法：
- 所有元素全部清除样式（干掉其他人）
- 给当前元素设置样式 （留下我自己）
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
// 1. 获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组 里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
//事件触发事件
btns[i].onclick = function() {
// (1) 我们先把所有的按钮背景颜色去掉 干掉所有人
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// (2) 然后才让当前的元素背景颜色为pink 留下我自己
//this 指向的是事件函数的调用者 btns[i]
//这里需要使用this,而不是btns[i]
//因为这只是一个事件注册函数
//说明事件在特定条件下被触发后所执行的事件
//而当事件被触发的时候，循环已经结束，此时的i始终不变
this.style.backgroundColor = 'pink';
}
}
6. 节点操作
利用父子兄节点关系获取元素， 逻辑性强， 但是兼容性稍差
标签、属性、文本、注释等都是节点Node
节点基础
节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个
基本属性。
元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3（文本节点包含文字、空格、换行等）
一般将把节点划分为不同的层级关系，常见的是父子兄层级关系
获取父级节点
<div class="box">
<span class="erweima">×</span>
</div>
<script>
//node.parentNode
//parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
//如果指定的节点没有父节点则返回 nul
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
console.log(erweima.parentNode);
</script>
获取子节点
- parentNode.childNodes（标准）
但parentNode.childNodes返回包含指定节点的子节点的集合,该集合为即时更新的集合,且返回值里面包含了所有的子节点，包括元素节点，文本节点, 如果只想要获得里面的元素节点，则需要专门处理,根据nodeType == 1判断 - parentNode.children（非标准）
parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回,得到了各个浏览器的支持,重点掌握这个
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
// DOM 提供的方法（API）获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
</script>
获取第1个子节点
- parentNode.firstChild
返回第一个子节点，找不到则返回null。也是包含所有的节点 - parentNode.firstElementChild
返回第一个子元素节点，找不到则返回null。
但有兼容性问题，IE9 以上才支持 - parentNode.chilren[0]
获取最后1个子节点
- parentNode.lastChild
返回最后一个子节点，找不到则返回null。也是包含所有的节点 - parentNode.lastElementChild
返回最后一个子元素节点，找不到则返回null。
但有兼容性问题，IE9 以上才支持 - parentNode.chilren[parentNode.chilren.length - 1]
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<script>
var ol = document.querySelector('ol');
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>
获取上一个兄弟节点
- node.previousSibling
返回当前元素的上一个兄弟元素节点，找不到则返回null。
也是包含所有的节点。 - node.previousElementSibling
返回当前元素上一个兄弟元素节点，找不到则返回null。
但有兼容性问题，IE9 以上才支持
获取下一个兄弟节点
- node.nextSibling
返回当前元素的下一个兄弟元素节点，找不到则返回null。
也是包含所有的节点。 - node.nextElementSibling
返回当前元素下一个兄弟元素节点，找不到则返回null。
但有兼容性问题，IE9 以上才支持
<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div');
// 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
console.log(div.nextSibling);
console.log(div.previousSibling);
// 2. nextElementSibling 得到下一个兄弟元素节点
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);
</script>
取消兼容性
//兼容性函数
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
创建节点
document.createElement()
添加节点
- node.appendChild(child)
将一个节点添加到指定父节点的子节点列表末尾 - node.insertBefore(child, 指定元素)
将一个节点添加到父节点的指定子节点前面
<ul>
<li>123</li>
</ul>
<script>
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child)
//node 父级 child 是子级 后面追加元素
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
</script>
7. 经典案列
全选和取消全选案例
// 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
// 获取元素
//获取全选按钮
var j_cbAll = document.getElementById('j_cbAll');
//获取子按钮
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
// 全选按钮注册事件
j_cbAll.onclick = function() {
// this.checked 当前复选框的选中状态
console.log(this.checked);
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
// 给所有的子复选框注册单击事件
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break;
}
}
// 设置全选按钮的状态
j_cbAll.checked = flag;
}
}
tab栏
// 获取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li'); //列表头
var items = document.querySelectorAll('.item'); //内容
// for循环，给选项卡绑定点击事件
for (var i = 0; i < lis.length; i++) {
// 开始给5个小li 设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
// 1. 上的模块选项卡，当前这一个底色会是红色，其余不变（排他思想）
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
下拉菜单
// 1. 获取元素
var nav = document.querySelector('.nav');
var lis = nav.children; // 得到4个小li
// 2.循环注册事件
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}
留言板
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2. 注册事件
btn.onclick = function() {
if (text.value == '') {
alert('您没有输入内容');
return false;
} else {
// console.log(text.value);
// (1) 创建元素
var li = document.createElement('li');
// 先有li 才能赋值
li.innerHTML = text.value;
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
}
}
</script>
</body>