Web API

定义

Web API 是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

DOM

文档：一个页面就是一个文档，用document表示

元素：页面中的所有标签都是元素，用element表示

节点：网页中所有内容都是节点（标签、属性、文本、注释等），用node表示

页面元素获取

根据ID获取

timer = document.getElementById('time');
//返回的是对象
console.dir(timer);
//打印返回的元素对象，更好查看包含的属性和方法

根据标签名获取

document.getElementByTagName('li');
//返回伪数组形式元素对象集合

var ol = document.getElementByTagName('ol')
var li = ol[0].getElementByTagName('li');

通过HTML5新增方法获取

//根据类名返回元素对象集合
document.getElementByClassName();

//根据指定选择器返回 第一个 元素对象
document.querySelector('选择器');

//根据指定选择器返回 所有 元素对象
document.querySelectorAll('.box');

特殊元素获取

//获取body元素
document.body;

//获取html元素
document.decumentElement;

事件(触发响应)

三部分组成：事件源、事件类型、事件处理程序

操作元素

改变元素内容

element.innerText = '';
//起始到终止位置的内容，但去除html标签，同时空格和换行也会去掉，不识别HTML标签

element.innerHTML = '';
//起始到终止位置的全部内容，包括html标签，同时保留空格和换行,识别HTML标签

//修改元素属性
var img = document.querySelector('img');
img.src = '../images/**.png';

//表单值通过value修改
var btn = document.querySelector('button');
var input = document.querySelector('input');
input.value = '****';
//表单禁用，不能被点击
btn.disabled = true;

//样式属性
div.style.width = '200px';
//JS修改为行内样式，权重高
/

自定义属性

//获取属性值
//element.属性名
console.log(img.src);
//只能获得元素自带属性

//H5规定自定义属性data开头：data-属性
//element.getAttribute('属性')
div.getAttribute('id');
//能获取自定义属性

//H5新增获取自定义属性
//

div.dataset.index;
div.dataset['index'];
div.dataset.listName;
div.dataset['listName'];

//设置属性值(主要针对自定义属性)
div.setAttribute('属性','值');

//移除自定义属性
div.removeAttribute('属性');

//H5规定自定义属性data开头：data-***

利用节点层次关系获得元素

节点三个基本属性：nodeType节点类型，nodeName节点名称，nodeValue节点值

元素节点nodeType值为1，属性节点nodeType值为2，文本节点nodeType值为3

父子节点

//获取父节点
var er = document.querySelector('.er');
console.log(er.parentNode);
//得到离元素最近父节点，无父结点返回为空

//获取子节点,包含元素节点、文本节点
console.log(er.childNodes);

//获取子节点，只包含元素节点
console.log(er.children);
//非标准但得到各浏览器支持

//获取的第一个子节点不管文本还是元素节点
console.log(er.firstChild);

//获取的最后一个子节点不管文本还是元素节点
console.log(er.lastChild);

//获取第一个子元素节点,有兼容性问题
console.log(er.firstElementChild);
//获取最后一个子元素节点,有兼容性问题
console.log(er.lastElementChild);

//实际开发解决
console.log(er.children[0]);

/

兄弟节点

//获得下一个兄弟节点，包含文本节点、元素节点
consol.log(div.nextSibling);
//获得上一个兄弟节点，包含文本节点、元素节点
consol.log(div.previousSibling);

//获得下一个兄弟节点，只包含元素节点
consol.log(div.nextElementSibling);
//获得上一个兄弟节点，只包含元素节点
consol.log(div.previousElementSibling);
//有兼容性问题，可封装兼容性函数解决
/

创建和添加节点

//创建元素节点
var li = docunment.createElement('li');
//获取父节点
var ul = docunment.querySelector('ul');
//添加节点,追加在子元素后面
ul.appendChild(li);

//添加在子元素前node.insertBefore(添加元素,指定元素);
ul.insertBefore(li,ul.children[0]);

删除子节点

//node.removeChild(child)
ul.removeChild(ul.children[0]);

复制(克隆)节点

node.cloneNode();
//括号为空或false是浅拷贝，只复制标签，不复制内容
node.cloneNode(true);
////括号内为true是深拷贝，复制标签及内容(包括子节点)

动态创建元素

document.write('
');
//会导致页面重绘，一般不使用

window.onload = function(){}
//页面加载完再加载js

element.innerHTML('');
//采用拼接，效率低；采用数组，效率高

docunment.createElement('a');
//新建，效率高，低于element.innerHTML()采用数组

阻止链接跳转

href内值为javascript：void(0);或者javascript:;