DOM
1.获取元素
//普通获取元素方法
document.getElementById('father'); //根据元素的id值获取元素
document.getElementsByTagName('p'); //根据元素的标签名获取元素对象集合
// h5新增获取元素方法
document.getElementsByClassName('Box'); //根据类名获取元素对象集合
// querySelector 只返回指定选择器的第一个元素对象
document.querySelector('.box'); //根据类选择器获取元素
document.querySelector('#id'); //根据id选择器获取元素
document.querySelector('p'); //根据标签选择器获取元素
document.querySelectorAll('.box'); //根据指定选择器返回所有元素集合
// 特殊元素获取：
document.body; //返回body元素
document.documentElement; //返回html元素
2.鼠标事件
var div = document.querySelector('div');
div.onclick = function() {}; //点击
div.onmouseover = function() {}; //经过
div.onmouseout = function() {}; //离开
div.onfocus = function() {}; //获得焦点
div.onblur = function() {}; //失去焦点
div.onmousemove = function() {}; //鼠标移动
div.onmouseup = function() {}; //鼠标弹起
div.onmousedown = function() {}; //鼠标按下
div.onmouseenter = function() {}; //鼠标进入指定元素，不会冒泡
div.onmouseleave = function() {}; //鼠标离开指定元素，不会冒泡
//mouseenter 和mouseover的区别
//mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发
//因为mouseenter不会冒泡,跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡3.元素内容和属性的操作
// 改变元素内容
div.innerText; //innerText会去除空格和换行，innerText会把子元素标签也去除，设置内容时innerText不会识别html
div.innerHTML; //innerHTML会保留空格和换行，设置内容时innerHTML会识别html
//常见元素属性操作
img.src = 'images/zxy.jpg';
img.title = '张学友思密达';
//表单元素属性操作
input.value = '被点击了'; //设置表单元素的值
input.type = 'password'; //设置表单元素类型
input.disabled = true; //表单元素是否被禁用
input.checked = true; //单选框或复选框是否被选中
// 样式属性操作(只能获取和设置内置属性)
div.style.width = '250px'; //设置元素style的样式属性和值
div.style.backgroundColor = 'purple';
div.className = 'current'; //设置元素的类名
// 自定义属性获取和设置(主要设置自定义属性)
div.getAttribute('属性名'); //获取自定义属性
div.setAttribute('属性名', '值'); //设置自定义属性
div.setAttribute('class', 'current'); //例
div.removeAttribute('属性名'); //移除指定属性
//设置h5自定义属性(规定自定义属性以data-开头做为属性名并赋值)
div.setAttribute('data-index', 2); //设置属性名为data-index的属性值为2
//获取h5自定义属性(只能获取data-开头的)
div.getAttribute('data-index'); //兼容方式获取
div.dataset.index; //dataset 是一个集合里面存放了所有以data开头的自定义属性
div.dataset['index']; //另一种写法
4.节点操作
div.parentNode; //返回当前节点的父节点，返回的是最近的一个父节点
div.children; // 返回当前节点的子元素节点的集合
div.firstElementChild; //返回当前节点的第一个子元素节点(有兼容问题)
div.lastElementChild; //返回当前节点的最后一个子元素节点(有兼容问题)
div.children[0]; //返回当前节点的第一个子元素节点
div.children[div.children.length - 1]; //返回当前节点的最后一个子元素节点
//兄弟节点 有兼容问题
div.nextElementSibling; //当前元素的下一个兄弟节点
div.previousElementSibling; //当前元素的上一个兄弟节点
// 添加节点的步骤
var li = document.createElement('li'); //1.创建一个节点括号内指定要创建的标签类型，并赋值给一个变量
div.appendChild(li); //2.指定一个父元素节点并把刚才创建的节点添加到该父元素的子节点列表的末尾
div.insertBefore(li, div.children[0]); //将一个节点添加到父节点的指定子节点的前面
//新增添加节点方式h5,position取值('beforebegin'元素自身的前面,'afterbegin'元素内部的第一个子节点前面,'beforeend'元素内部的最后一个子节点之后,'afterend'元素自身的后面)
element.insertAdjacentHTML(position, text); //参数都为字符串，text为被解析的html或xml字符串
// 删除节点
div.removeChild(div.children[0]); //删除指定父元素的一个子节点，返回删除的节点
// 复制节点
div.cloneNode(true); //true为深拷贝，复制标签和内容;false或空为浅拷贝，只复制标签不复制内容
// 创建元素三种方式
document.write('<div>123</div>'); //直接将内容写入页面的文档流
div.innerHTML = '<div>123</div>'; // 将内容写入某个DOM节点
document.createElement('li'); //创建一个节点括号内指定要创建的标签类型
// 生成若干个元素，采用拼接字符串，效率慢
var inner = document.querySelector('.inner');
for (var i = 0; i <= 100; i++) {
inner.innerHTML += '<a href="#">百度</a>'
}
// 生成若干个元素，采取数组拼接，效率快
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
5.事件监听
div.onclick = function() {}; //传统方式注册事件
div.addEventListener('click', function() {}) //方法监听方式注册事件(ie678不支持)
div.attachEvent('onclick', function() {}); // 仅ie678支持,注意要加on
// 删除事件
div.onclick = null; //传统方式删除事件
div.addEventListener('click', fn); //1.注册带有函数名的注册事件
div.removeEventListener('click', fn); //2.移除带有指定函数名的注册事件
div.detachEvent('onclick', fn); //移除使用attachEvent方式注册的事件
//事件对象
div.addEventListener('click', function(e) {
e = e || window.event; //兼容处理方式获取事件对象e
e.target; // 返回触发事件对象
e.srcElement; // ie678返回触发事件对象
e.type; // 返回事件的类型 click、mouseover...
e.stopPropagation(); // 阻止冒泡
e.cancelBubble = true; // ie678 阻止冒泡
e.preventDefault(); // 阻止默认事件
e.returnValue = false; // ie678 阻止默认事件
});
// 禁止右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
// 禁止选中文字
document.addEventListener('selectstart', function(e) {
e.preventDefault();
});
//鼠标事件对象
div.addEventListener('click', function(e) {
e.pageX; //相对于文档页面的X坐标
e.pageY; //相对于文档页面的Y坐标
e.clientX; //相对于浏览器窗口可视区的X坐标
e.clientY; //相对于浏览器窗口可视区的Y坐标
e.screenX; //相对于电脑屏幕的X坐标
e.screenY; //相对于电脑屏幕的Y坐标
})
// 键盘事件
// keydown和keypress在文本框内时文字还未放入文本框时就会执行
document.onkeyup = function() {}; //不区分按下键的大小写
document.onkeydown = function() {}; //不区分按下键的大小写
document.onkeypress = function() {}; //区分按下键的大小写，但不识别功能键
document.addEventListener('keyup', function(e) {
console.log(e.keyCode); //返回按下的键对应的ASCll值
});
BOM
1.顶级对象window
//顶级对象window
window.onhashchange = function() {}; //当地址栏的锚点发生变化，触发该事件
window.onload = function() {}; //页面加载事件，只能写一个，否则会覆盖之前
window.addEventListener('load', function() {}); //页面加载事件，可以写多个不会冲突，load当文档内容完全加载完成才会触发该事件(包括图像、脚本文件、CSS 文件等)
document.addEventListener('DOMContentLoaded', function() {}); //页面加载事件，DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等,所以DOMContentLoaded比load先执行，仅ie9以上支持
// 窗口大小发生变化事件
window.onresize = function() {};
window.addEventListener('resize', function() {});
// 当前浏览器窗口大小
window.innerHeight; //当前浏览器窗口的高度
window.innerWidth; //当前浏览器窗口的宽度
// 定时器方法(前面的window可省略），时间单位毫秒，不写默认为0
setTimeout(function() {}, 2000); //回调函数是一个匿名函数
setTimeout(callback, 2000); //回调函数是一个有名函数
setInterval(function() {}, 2000); //会一直重复调用里面的回调函数，而setTimeout只会调用一次
clearInterval(timer); //清除Interval定时器，()写要清除的定时器的标识符
//location属性和方法(用于获取或设置窗体的URL)
var hash = location.hash; //获取当前锚点值
location.href = 'http://www.itcast.cn'; //返回或设置URL
location.search; //返回参数
location.assign('http://www.itcast.cn'); //和href类似，重定向页面
location.replace('http://www.itcast.cn'); //替换当前页面，不记录历史，不能后退
location.reload(true); //刷新，为true时强制刷新
//history的方法(用于对浏览器历史记录进行交互)
history.forward(); //前进
history.back(); //后退
history.go(1); //前进1步
history.go(-1); //后退1步
//navigator对象(可以返回由客户机发送服务器的 user-agent 头部的值)
//下面前端代码可以判断用户的哪个终端打开页面，实现跳转
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; //用手机打开时显示的页面
} else {
window.location.href = ""; //用电脑打开时显示的页面
}
2.元素的三大系列
//元素偏移量 offset 系列
p.offsetParent; //返回元素的带有定位的父元素，没有父元素或父元素没有定位返回body
p.offsetTop; //返回元素相对带有定位的父元素的上偏移
p.offsetLeft; //返回元素相对带有定位的父元素的左偏移
p.offsetWidth; //返回元素自身的宽度，包括边框，内边距，内容区宽度，不带单位，只读
p.offsetHeight; //返回元素自身的高度，包括边框，内边距，内容区高度，不带单位，只读
//元素可视区 client 系列
p.clientTop; //返回元素上边框大小
p.clientLeft; //返回元素左边框大小
p.clientWidth; //返回元素自身的宽度，包括内边距，内容区宽度，不包括边框，不带单位
p.clientHeight; //返回运输自身的高度，包括内边距，内容区高度，不包括边框，不带单位
//元素滚动 scroll 系列
p.scrollTop; //返回元素被卷去的上侧距离，不带单位
p.scrollLeft; //返回元素被卷去的左侧距离，不带单位
p.scrollWidth; //返回元素的实际宽度，不包括边框，不带单位
p.scrollHeight; //返回元素的实际高度，不包括边框，不带单位
window.pageYOffset; //页面被卷去的头部
window.pageXOffset; //页面被卷去的左侧
995
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
