DOM初步
1、What can I do for you?
DOM可以做什么？
1、 可以向页面上添加元素（属性、文本） -- 增
2、 可以动态的把页面上的元素删除 -- 删
3、 可以修改页面上的元素(属性、文本） -- 改
4、 可以查找到页面上的元素 -- 查
操控页面元素、进行增删改查。
2、一些细节
（1）、在<head>标签中要使得<script>生效，应当加入事件：
window.onload=function(){
写script操作；
}
（2）、href="javascript:void"，此时点击该标签不会跳转；
（3）、disabled="disabled"，禁用该标签；
a.checked=!a.checked； 禁用取反；
3、DOM操作
增
document.createElement() 创建元素；
document.createAttribute() 创建属性；
appendChild 加入子元素；
innerHTML 内部元素；
删
removeChild 删除所有子元素；
innerHTML 清空则使得innerHTML=""；
查
document.getElementById() 没有兼容性问题；
document.getElementsByTagName() 没有兼容性问题；
document.getElementsByClassName() ie9以下不支持；
document.querySelector() 贼好用；
document.querySelectorAll() 贼好用；
改
1、一些小细节
element.className="name";
element.style.background="yellow";
tips：
（1）、 属性的书写（两种）
a) 如果属性只要一个单词，这个单词可以直接写出来并且是小写的
比如：color、border
b）如果属性有多个单词，要把写在css里的横杠去掉，然后根据驼峰命名的方式来写对应的属性
比如：
在css当中，backgrond-color，在js的style当中变成：backgroundColor
（2）、 如果要重置，就让某个属性赋值为空字符串；
（3）、 实际作用在标签的style属性里（行内式），也只能获取到行内样式（注意）；
inputs.type="button";
element.disabled=true;
element.disabled=false;
element.selected=true;
tips：诸如disabled和selected的值都用true和false来控制禁用启用；
element.innerHTML="";
element.innerText=""; 低版本的火狐不支持，低版本支持textContent；
2、注册事件
element.onclick=function(){};
ondblclick 鼠标双击
onkeydown 按下键盘上的一个按键时触发
onkeyup 松开键盘上的一个按键时触发
onchange 文本内容或下拉菜单中的选项发生改变
onfocus 获得焦点，表示文本框等获得鼠标光标
onblur 失去焦点，表示文本框等失去鼠标光标
onmouseover 鼠标悬停
onmouseout 鼠标移出
onload 文档加载完成
onunload 关闭网页时触发
onsubmit 表单提交事件
addEventListener的方式
事件源.addEventListener(事件名称，事件处理程序，false)
早期的火狐和ie6,7,8不支持
attachEvent的用法
事件源.attachEvent(on+事件名称,事件的处理程序)
早期的火狐和ie6,7,8支持
兼容写法：
function addEventListener(element,eventName,fn) {
if(element.addEventListener){
element.addEventListener(eventName,fn,false);
}else {
element.attachEvent("on"+eventName,fn);
}
}
3、节点操作
（1）、创建
document.write； 创建，使用这个方法可以向页面上动态地添加元素;
element.innerHTML； 创建，使用这个方法可以向任意元素中动态地添加元素;
document.createElement(tagName); 创建，使用这个方法可以创建任意元素;
（2）、追加
parent.appendChild(node); 追加，使用这个方法可以向某个父元素的末尾追加一个新的子元素;
（3）、克隆
node.cloneNode(deep); 克隆，使用这个方法可以克隆某个元素到内存中，
只能得到一个节点对象，需要手动添加到页面中;
deep的值：true 深度克隆 克隆当前元素和所有的子元素；
false 浅度克隆 只克隆当前元素(默认)；
（4）、删除
parent.removeChild(node)； 删除，这个方法可以删除某个指定的子元素；
（5）、插入
parent.insertBefore(newNode,oldNode)； 插入，向某个父元素中的指定位置插入一个新的子元素；
（6）、替换
parent.replaceChild(newNode,oldNode)； 替换，将某个父元素的任意一个子元素另外一个元素；
eg：
var node=document.createElement("tagName");
parent.appendChild(node); (创建一个标签，追加到元素中)；
4、节点的概念
（1）、节点属性
节点类型(nodeType)
元素节点： 1；
属性节点： 2；
文本节点： 3；
节点名称(nodeName)
元素节点： 就是对应的标签名，div；
属性节点： 就是对应的属性名称，class；
文本节点： #text；
节点值(nodeValue)
元素节点： null；
属性节点： 就是对应的属性值；
文本节点： 就是对应的文本；
eg：box.nodeType;
（2）、节点
parentNode
一般父节点都是元素节点；
eg:parent.parentNode；
childNodes 获取子节点中的元素节点和文本节点；
children 仅仅获取子节点种的元素节点；
---------------------------
node.nextSibling 下一个兄弟节点；
可以是元素、属性、文本节点；
在ie8及更低版本，是只能获取到元素节点和非空文本节点，但是不影响；
node.nextElementSibling
下一个兄弟元素节点，只会得到一个元素节点；
兼容：ie8不支持；
---------------------------
node.previousSibling 上一个兄弟节点，
可以是元素、属性、文本节点；
在ie8及更低版本，是只能获取到元素节点和非空文本节点，但是不影响；
node.previousElementSibling 上一个兄弟元素节点；
只会得到一个元素节点；
兼容：ie8不支持；
---------------------------
firstChild 得到的是第一个子节点；
可以使元素、文本、属性；在ie8下回忽略空的文本节点；
lastChild 得到的是最后一个子节点；
可以使元素、文本、属性；在ie8下回忽略空的文本节点；
---------------------------
firstElementChild 得到的是第一个元素子节点
ie8下不支持
lastElementChild 得到的是最后一个子节点
ie8下不支持
---------------------------
（3）、方法
childElementCount 获取的是节点之下所有子元素的个数；
ie8不支持；
tips：建议使用parent.children.length;
4、定时器
setTimeout(code,delay)，该计时器只会执行一次，只作延迟动作；
clearTimeout（id）：清除计时器执行动作；
eg:
var id = setInterval(function () {
console.log("新几次哇一次魔hi托次！");
},1000);
document.getElementById("btn").onclick = function(){
clearInterval(id);
}
tips：计时器的返回值是一个句柄，是一个数字id，直接获取即可，
通过返回值可以使用clearTimeout方法，将计时器终止；
setInterval(code,delay)，该计时器每隔一段时间会执行一次code，不断循环；
clearInterval(id):其清除本循环计时器；
tips：使用方法与setTimeout同理。
BOM
Browser Object Model，浏览器对象模型；
window对象
（1）、open 在浏览器打开一个新窗口；
window.open(url,name,specs,replace);
tips：name指是否打开新窗口（_self或_blank），specs是页面选项，replace表示是否需要覆盖历史记录；
（2）、close 关闭其他窗口或自己窗口；
window.close()；
（3）、
window.onload=function(){} 页面加载完毕事件；
window.onunload=function(){} 关闭页面触发该事件；
tips：window对象的组成，DOM、Location、History、Navigator、Screen；
window是页面中所有内容的父元素；
window即指代浏览器窗口，全局函数都由window调用；
Location对象
Location对象包含了浏览器的url信息；
（1）Location属性
hash 获取url的锚部分，就是#后面的数据；
host 获取url的主机和端口；
hostname 获取url的主机名；
href 获取完整的url；
pathname 获取url的路径；
port 获取端口；
protocol 获取url的协议；
search 获取url的参数部分，就是？后面的数据；
（2）reload方法
window.location.reload(forceget);
相当于刷新页面。
forceget：
true - 表示强制重新去服务器请求数据；
false - 表示从本地或缓存中获取数据；
（3）、href方法
location.href = "链接"；
该方法可以将当前页面跳转到指定链接；
History对象
history.back 回到上一个浏览的页面(如果存在)；
用法：history.back();
history.forward 前进到下一个浏览器的页面(如果存在)；
用法：history.forward();
history.go() 可以到达指定的访问过的页面；
用法：history.go(-1); 为-1则跳转到上一个页面；
history.go(1); 为1则跳转到下一个页面；
Navigator对象
Navigator对象包含当前窗口的浏览器信息；
appCodeName 返回浏览器代码名称，返回Mozilla；
appName 返回浏览器名称，返回Netscape；
appVersion 返回浏览器的平台和版本信息；
platform 返回运行浏览器的操作系统信息；
userAgent 返回浏览器发送到服务器的user-agent 头部的值 ；
扫一扫
2631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
