DOM 一,节点 HTML 文档中的所有内容都是节点: 整个文档是一个文档节点document,每个 HTML 元素是元素节点,HTML 元素内的文本是文本节点,每个 HTML 属性是属性节点,注释是注释节点 二,获取节点类型的三种方式 Nodetype Nodetype获取节点的类型 1 element 元素节点 2 attr 属性节点 3 Text 文本节点 8 comment注释节点 nodeName 元素节点的 nodeName 是标签名称(大写) 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document nodeValue 对于文本节点,nodeValue 属性包含文本。 对于属性节点,nodeValue 属性包含属性值。 文档节点和元素节点,nodeValue 属性的值始终为 null。 三,创建元素 document.write() document.createElement() box.innerHTML 四,Event事件的兼容写法 获得event对象兼容性写法 event || window.event; event.target||event.srcElement 五,绑定事件的新方式 addEventListener和attachEvent方法 son.addEventListener('click', once1); 对象.addEventListener("事件类型",事件处理函数,false) 参数1:事件的类型---事件的名字,没有on 参数2:事件处理函数---函数(命名函数,匿名函数) 参数3:布尔类型,是否冒泡 区别 this不同,addEventListener 中的this是当前绑定事件的对象 六,移除解绑事件 三,绑定解绑 绑定事件 addEventListener var son = document.querySelector(".son"); son.addEventListener('click', once1,false); function once1() { alert(1) } 绑定事件attachEvent() 解绑事件 son.removeEventListener('click', once1,false); function once1() { alert(1) } 解绑事件的其他方法 对象.detachEvent("on事件类型",函数名字); 元素.onclick=null; 七,如何阻止冒泡(存在兼容性) e.stopPropagation(); 谷歌和火狐支持, window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持 BOM 一,对话框 alert() prompt() confirm() 二,加载事件 Onload事件 onload 事件会在页面或图像加载完成后立即发生。 onload 通常用于 <body> 元素,在页面完全载入后(包括图片、css文件等等。)执行脚本代码。 三,Location对象 常用属性 地址栏上#及后面的内容 console.log(window.location.hash); 主机名及端口号 console.log(window.location.host); 主机名 console.log(window.location.hostname); 文件的路径---相对路径 console.log(window.location.pathname); 端口号 console.log(window.location.port); 协议 console.log(window.location.protocol); 搜索的内容 console.log(window.location.search); 浏览器地址 window.location.href 跳转的 my$("btn1").onclick = function () { window.location.href = "15test.html";}; Navigator对象 通过userAgent可以判断用户浏览器的类型 console.log(window.navigator.userAgent); 四,定时器 SetInteval() clearInteval() setTimeout() 五,阻止默认事件 w3c的方法是e.preventDefault() IE则是使用e.returnValue = false;