DOM
DOM
DOM：文档对象模型(Document Object Model)，又称为文档树模型。是一套操作HTML和XML文档的API。
DOM可以把HTML和XML描述为一个文档树，树上的每一个分支都可以视为一个对象，通过DOM可以添加、修改和移除文档上的某一部分。
节点
在HTML当中一切都是节点（node）。
每一个HMTL标签都是一个元素节点（标签）。
标签中的文字则是文字节点。（文本）
标签的属性是属性节点。（属性）
DOM节点的获得
常用：
1）通过 id 找到 HTML 元素
document.getElementById("demo");
标签=document.getElementById(“demo”); 通过ID获得标签
他的返回值是一个标签，可以直接使用。获得属性值，设置属性。
2）通过标签名找到 HTML 元素
document.getElementsByTagName("div");
标签数组= document.getElementsByTagName(“div”); 通过标签名获得标签数组
3）通过类名找到 HTML 元素
document.getElementsByClassName("a");
通过类名查找 HTML 元素在 IE 5,6,7,8 中无效
标签数组= document.getElementsByClassName(“a”);通过类名获得标签数组
节点的访问关系
节点的访问关系是以属性的方式存在的。
DOM的节点不是孤立的，我们可以通过节点之间的先对关系去获取节点。
父节点（parentNode）
调用者是节点，一个节点只有一个父节点。
获取方法：节点.parentNode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var pNode = document.getElementsByTagName("p")[0];
console.log(pNode);
var divNode = pNode.parentNode;//获取父节点
console.log(divNode);
}
</script>
</head>
<body>
<div>
<p>子节点</p>
</div>
</body>
</html>
兄弟节点
Sibling就是兄弟的意思。
Next：下一个的意思。
Previous:上一个的意思。
nextSibling：调用者是节点。IE6、7、8中指下一个元素节点（标签）。在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）。
nextElementSibling：在火狐谷歌IE9都指的是下一个元素节点。
总结：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling
下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling
previousSibling：调用者是节点。IE678中指前一个元素节点（标签）。在火狐谷歌IE9+以后都指的是前一个节点（包括空文档和换行节点）。
previousElementSibling：在火狐谷歌IE9都指的是前一个元素节点。
总结：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling。
下一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling
单个子节点
firstChild：调用者是父节点。IE678中指第一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是第一个节点（包括空文档和换行节点）。
firstElementChild:在火狐谷歌IE9都指的第一个元素节点。
第一个子节点=父节点.firstElementChild || 父节点.firstChild
lastChild:调用者是父节点。IE678中指最后一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点）。
lastElementChild：在火狐谷歌IE9都指的最后一个元素节点。
最后一个子节点=父节点.lastElementChild|| 父节点.lastChild
所有子节点
childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点
火狐 谷歌等高本版会把换行也看做是子节点
子节点数组 = 父节点.childNodes; 获取所有节点。
children：非标准属性，它返回指定元素的子元素集合。
但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
children在IE6/7/8中包含注释节点
在IE678中，注释节点不要写在里面。
子节点数组 = 父节点.children;
DOM节点的操作
节点的操作都是函数或者方法。
创建节点
常用：
document.createElement("标签名");
插入节点
使用方法： 父节点.appendChild();
父节点.appendChild(新节点); 父节点的最后插入一个新节点
使用方法：父节点.insertBefore(要插入的节点，参考节点)；
父节点.insertBefore(新节点,参考节点)在参考节点前插入;
如果参考节点为null，那么将在节点最后插入一个节点。
删除节点
用法：用父节点删除子节点。
父节点.removeChild（子节点）；必须指定要删除的子节点
节点自己删除自己：
不知道父级的情况下，可以这么写：node.parentNode.removeChild(node)
复制节点 （ oldNode.cloneNode（true） ）
新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点
复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）
节点属性（节点.属性）
获取：getAttribute(名称)、节点.属性、节点[“属性”]。
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)
注意：IE6、7不支持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var imgNode = document.getElementsByTagName('img')[0];
console.log(imgNode.src);//获取属性
console.log(imgNode['width']);//获取属性
console.log(imgNode.getAttribute("alt"));//获取属性
imgNode.width = "400";//修改属性
imgNode.setAttribute("id", "dog");//设置属性
imgNode.removeAttribute("alt");//删除属性
}
</script>
</head>
<body>
<div>
<img src="img/34.jpg" alt="小狗" width="200"/>
</div>
</body>
</html>
改变HTML内容
document.write() 可用于直接向 HTML 输出流写内容。
document.getElementById(id).innerHTML=new HTML
改变 HTML 样式
语法：
node.style.property=new style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var divNode = document.getElementsByTagName('div')[0];
divNode.style.color = "white";
divNode.style.width = "200px";
divNode.style.height = "400px";
divNode.style.border = "1px solid black";
divNode.style.backgroundColor="red";
}
</script>
</head>
<body>
<div>按钮</div>
</body>
</html>
事件
JS是以事件驱动为核心的一门语言。
事件三要素：
- 事件源
- 事件
- 事件驱动程序
常用的事件：
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。
注册事件
1,element.事件
例：
var btn = document.getElementsByTagName('button')[0];
btn.onclick= function（）{
}
这种方法后面的事件会层叠前面的事件。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var btn = document.getElementById("btn");
btn.onclick = function () {
console.log(1);
}
btn.onclick = function () {
console.log(2);
}
}
</script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
2.addEventListener(IE9之前：attachEvent)
语法：
element.addeventListener(“事件”,“function”,boolean)；
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var btn = document.getElementById("btn");
btn.addEventListener("click",function () {
console.log(1);
});
btn.addEventListener("click",function () {
console.log(2);
});
}
</script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
移除事件
1.element.onclick = null;
2.removeEventListener(IE9之前：detachEvent)；
window.onload = function () {
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click",fn);
btn1.removeEventListener("click",fn);//移除事件
}
function fn() {
console.log("1");
}
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var btn = document.getElementsByTagName('button')[0];
var inputNode = document.getElementsByTagName('input')[0];
btn.onclick = function () {
if (inputNode.value == "") {
alert("输入框为空");
} else {
alert("不为空");
}
}
}
</script>
</head>
<body>
<div>
<input type="text" name="user"/>
<button>按钮</button>
</div>
</body>
</html>
兼容写法
<script>
var btn = document.getElementsByTagName("button")[0];
EventListenr = {
addEvent: function (ele, fn, str) {
//通过判断调用的方式兼容IE678
//判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
if (ele.addEventListener) {
//直接调用
ele.addEventListener(str, fn);
} else if (ele.attachEvent) {
ele.attachEvent("on" + str, fn);
} else {
//在addEventListener和attachEvent都不存在的情况下，用此代码
ele["on" + str] = fn;
}
},
removeEvent: function (ele, fn, str) {
if (ele.removeEventListener) {
ele.removeEventListener(str, fn);
} else if (ele.detachEvent) {
ele.detachEvent("on" + str, fn);
} else {
ele["on" + str] = null;
}
}
}
EventListen.addEvent(btn, fn, "click");
EventListen.removeEvent(btn, fn, "click");
function fn() {
alert(1);
}
</script>
BOM
浏览器对象模型
window对象
window对象是JavaScript中的顶级对象
所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window
常用方法：
window.open(url,target,param)
url 要打开的地址
target新窗口的位置 _blank _self _parent(父框架)
param 新窗口的一些设置
返回值，新窗口的句柄
window.close() 关闭窗口
新窗口.moveTo(5,5) 移动到指定的位置
新窗口.moveBy(200，200) 相对新窗口移动指定像素
新窗口.resizeTo() 把窗口的大小调整到指定的宽度和高度。
循环执行（等待时间过去之后执行）
var timerId = setInterval(code,interval);
clearInterval(timerId);
间隔时间执行，不是特别精确
定时执行（立刻执行）
var timerId = setTimeout(code,interval);
clearTimeout(timerId);
location对象
window.location
location相当于浏览器地址栏
可以将url解析成独立的片段
location对象的属性
href
hash 返回url中#后面的内容，包含#
host 主机名，包括端口
hostname 主机名
pathname url中的路径部分
protocol 协议 一般是http、https
search 查询字符串
location.assign() 改变浏览器地址栏的地址，并记录到历史中
设置location.href 就会调用assign()。一般使用location.href 进行页面之间的跳转
location.replace() 替换浏览器地址栏的地址，不会记录到历史中
location.reload() 重新加载
Navigator 对象
Navigator 对象包含有关浏览器的信息。
appCodeName 返回浏览器的代码名
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
platform 返回运行浏览器的操作系统平台
userAgent 返回由客户机发送服务器的user-agent 头部的值
History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
后退
history.back()
history.go(-1) 0是刷新
前进
history.forward()
history.go(1)
下一篇：
如果你觉得本文对你有帮助，麻烦动动手指顶一下，可以帮助到更多的开发者，如果文中有什么错误的地方，还望指正，转载请注明转自喻志强的博客 ，谢谢！
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
