html web api,Web API

DOM

根据id获取元素

var div = document.getElementById('main');

注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

根据标签名获取元素

var divs = document.getElementsByTagName('div');

for (var i = 0; i < divs.length; i++) {

var div = divs[i];

}

根据name获取元素

var inputs = document.getElementsByName('hobby');

for (var i = 0; i < inputs.length; i++) {

var input = inputs[i];

}

根据类名获取元素

var mains = document.getElementsByClassName('main');

for (var i = 0; i < mains.length; i++) {

var main = mains[i];

}

根据选择器获取元素

var text = document.querySelector('#text');

var boxes = document.querySelectorAll('.box');

for (var i = 0; i < boxes.length; i++) {

var box = boxes[i];

}

事件

var box = document.getElementById('box');

box.onclick = function() {

console.log('代码会在box被点击后执行');

};

属性操作

非表单元素的属性

href、title、id、src、className

var link = document.getElementById('link');

console.log(link.href);

console.log(link.title);

var pic = document.getElementById('pic');

console.log(pic.src);

innerHTML和innerText

var box = document.getElementById('box');

box.innerHTML = '我是文本

我会生成为标签

';

console.log(box.innerHTML);

box.innerText = '我是文本

我不会生成为标签

';

console.log(box.innerText);

HTML转义符

""

''

&&

>>  // greater than  大于

空格   

©©

表单元素属性

value 用于大部分表单元素的内容获取(option除外)

type 可以获取input标签的类型(输入框或复选框等)

disabled 禁用属性

checked 复选框选中属性

- selected 下拉菜单选中属性

自定义属性操作

getAttribute() 获取标签行内属性

setAttribute() 设置标签行内属性

removeAttribute() 移除标签行内属性

与element.属性的区别: 上述三个方法用于获取任意的行内属性。

样式操作

使用style方式设置的样式显示在标签行内，通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

var box = document.getElementById('box');

box.style.width = '100px';

box.style.height = '100px';

box.style.backgroundColor = 'red';

类名操作

修改标签的className属性相当于直接修改标签的类名

var box = document.getElementById('box');

box.className = 'show';

创建元素的三种方式

document.write()

document.write('新设置的内容

标签也可以生成

');

innerHTML

var box = document.getElementById('box');

box.innerHTML = '新内容

新标签

';

document.createElement()

var div = document.createElement('div');

document.body.appendChild(div);

节点操作

节点属性

nodeType 节点的类型

1 元素节点

2 属性节点

3 文本节点

nodeName  节点的名称(标签名称)

nodeValue  节点值

元素节点的nodeValue始终是null

节点层级

var box = document.getElementById('box');

console.log(box.parentNode);

console.log(box.childNodes);

console.log(box.children);

console.log(box.nextSibling);

console.log(box.previousSibling);

console.log(box.firstChild);

console.log(box.lastChild);

注意

childNodes和children的区别，childNodes获取的是子节点，children获取的是子元素

nextSibling和previousSibling获取的是节点，获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素

​nextElementSibling和previousElementSibling有兼容性问题，IE9以后才支持

总结

节点操作，方法

appendChild()

insertBefore()

removeChild()

replaceChild()

节点层次，属性

parentNode

childNodes

children

nextSibling/previousSibling

firstChild/lastChild

事件详解

注册事件的三种方式

var box = document.getElementById('box');

box.onclick = function () {

console.log('点击后执行');

};

box.addEventListener('click', eventCode, false); // 浏览器兼容性问题，IE9以后才支持

box.attachEvent('onclick', eventCode); // IE6-IE10支持

function eventCode() {

console.log('点击后执行');

}

移除事件的三种方式

box.onclick = null;

box.removeEventListener('click', eventCode, false);

box.detachEvent('onclick', eventCode);

兼容代码

function addEventListener(element, type, fn) {

if (element.addEventListener) {

element.addEventListener(type, fn, false);

} else if (element.attachEvent){

element.attachEvent('on' + type,fn);

} else {

element['on' + type] = fn;

}

}

function removeEventListener(element, type, fn) {

if (element.removeEventListener) {

element.removeEventListener(type, fn, false);

} else if (element.detachEvent) {

element.detachEvent('on' + type, fn);

} else {

element['on'+type] = null;

}

}

事件的三个阶段

1.捕获阶段

2.当前目标阶段

3.冒泡阶段

事件对象.eventPhase属性可以查看事件触发时所处的阶段

事件对象的属性和方法

event.type 获取事件类型

clientX/clientY    所有浏览器都支持，窗口位置

pageX/pageY      IE8以前不支持，页面位置

event.target || event.srcElement 用于获取触发事件的元素

event.preventDefault() 取消默认行为

阻止事件传播的方式

标准方式 event.stopPropagation();

IE低版本 event.cancelBubble = true; 标准中已废弃

常用的鼠标和键盘事件

onmouseup 鼠标按键放开时触发

onmousedown 鼠标按键按下触发

onmousemove 鼠标移动触发

onkeyup 键盘按键按下触发

onkeydown 键盘按键抬起触发

BOM

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

BOM的顶级对象window

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window

注意：window下一个特殊的属性 window.name

对话框

alert()

prompt()

confirm()

页面加载事件

onload

window.onload = function () {

// 当页面加载完成执行

// 当页面完全加载所有内容(包括图像、脚本文件、CSS 文件等)执行

}

onunload

window.onunload = function () {

// 当用户退出页面时执行

}

定时器

setTimeout()和clearTimeout()

// 创建一个定时器，1000毫秒后执行，返回定时器的标示

var timerId = setTimeout(function () {

console.log('Hello World');

}, 1000);

// 取消定时器的执行

clearTimeout(timerId);

setInterval()和clearInterval()

定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数

// 创建一个定时器，每隔1秒调用一次

var timerId = setInterval(function () {

var date = new Date();

console.log(date.toLocaleTimeString());

}, 1000);

// 取消定时器的执行

clearInterval(timerId);

location对象

location对象是window对象下的一个属性，使用的时候可以省略window对象

location可以获取或者设置浏览器地址栏的URL

location成员

assign()委派，可以让页面跳转到指定地址

reload()重新加载，参数为true强制从服务器获取页面，false如果浏览器有缓存会从缓存中获取页面

replace()替换掉地址栏中的地址，但是不记住历史

hash/host/hostname/search/href……

URL组成

scheme://host:port/path?query#fragment

http://www.itheima.com:80/a/b/index.html?name=zs&age=18#bottom

scheme：通信协议，常用的http,ftp,maito等

host：主机，服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。

port：端口号，整数，可选，省略时使用方案的默认端口，如http的默认端口为80。

path：路径，由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

query：查询，可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zs

fragment：信息片断，字符串，锚点.

history对象

back()

forward()

go()

navigator对象

userAgent

特效

偏移量

offsetParent用于获取距离当前元素最近的定位父级元素

offsetWidth，offsetHeight 获取大小，包括padding和border

offsetLeft，offsetTop 距离定位父元素的距离，如果没有定位父元素就是body

客户区大小

clientWidth，clientHeight 获取大小，包括padding，但不包括border，不包括滚动条

clientLeft，clientTop 是border的宽度

滚动偏移

scrollWidth，scrollHeight 内容大小，包括padding和未显示的内容，不包括滚动条

scrollLeft，scrollTop 滚动出去的距离