DOM
DOM常用节点类型
元素节点 - 1；属性节点 - 2；文本节点 - 3；注释节点 - 8；文档节点 - 9
查看节点
-
查看元素下的子节点
-
el.children 子元素（不是标准中的操作）
lastElementChild 最后一个子元素
el.childNodes 子节点（包括空白内容和转行内容）
-
-
查看元素的父元素（父节点）
- el.parentNode
-
下一个兄弟元素
- nextElementSibling 下一个兄弟元素(nextSibling 下一个兄弟节点，包括文本节点)
-
上一个兄弟元素
- previousElementSibling 上一个兄弟元素 (previousSibling 上一个兄弟节点，包括文本节点)
创建一个元素
object element createElement("tagName");
元素创建完，不添加到页面中的话，看不到它
-
parent.appendChild(el);
在parent中追加一个子元素el，（把el添加到parent的最末尾），如果操作的是一个已经存在页面中的元素，会把元素从原来的父级下，直接剪切过来
-
parentNode.insertBefore(childNode1,childNode2)
往一个节点的指定子节点前边插入一个节点，如上：childNode1插入到childNode2前边
删除一个节点
-
parentNode.removeChild(childNodes)
从一个节点中删除指定的子节点。返回值： 被删除的这个节点
定位父级
el.offsetParent
查找到el根据定位的父级元素，都没有就查找到body
ofset
- offsetWidth/offsetHeight 可视宽/高
- offsetTop/offsetLeft 和定位父级之间的偏移
getBoundingClientRect()
-
获取元素的盒模型信息
返回值对象 ｛
left 元素左侧相对于可视区左侧的距离
top 元素顶部相对于可视区顶部的距离
right 元素右侧相对于可视区左侧的距离
bottom 元素底部相对于可视区顶部的距离
width 可视宽度
height 可视高度
｝
-
获取可视区宽高
- document.documentElement.clientWidth;//可视区宽度
- document.documentElement.clientHeight//可视区高度
-
client和offset的区别
offsetWidth/offsetHeight //width + padding + border
-
clientWidth/clientHeight //width + padding
offsetLeft/offsetTop //和定位父级之间的距离
clientLeft/clientTop //元素的边框
属性操作的第三种方法
注意： 尽量不要使用或者减少使用dom的操作，性能不太好
- node.getAttribute(attr) 获取元素指定属性名的属性值
- node.setAttribute(attr,value) 设置元素指定属性名的属性值
- node.removeAttribute(attr) 删除元素的指定属性
特点：可以操作行间自定义的属性；可以获取src,href等的相对地址
节点操作
- parentNode.replaceChild(node,childNode)
- node用来替换的节点，childNodes被替换的子节点
- node.cloneNode(boolean) 克隆一个节点
- true：克隆元素和元素包含的子孙节点
- flase：克隆元素到但不包含元素的子孙节点
表格操作
- table.tHead 获取thead
- table.tFoot 获取tfoot
- table.tBodies[i] 获取tbody 注意table可以拥有多个tbody，所以获取到的是一组
- table.tHead.rows/table.rows 获取tr 注意获取到的是一组
- table.rows[i].cells 获取单元格 th,td 注意获取到的是一组，单元格要在row里边获取
表单操作
-
input
- text / radio / checkbox
select
-
textarea
统一使用node.value获取值
获取 radio / checkbox 是否选中用node.checkbox
表单事件
- onchange 主要用在 select / radio / checkbox / range 中 选中的状态发生改变
- oninput 输入类型表单控件value发生变化
- onfocus 当元素获得焦点时候
- node.focus() 使元素得到焦点
- onblur 当元素失去焦点的时候
- node.blur() 使元素失去焦点
- onsubmit 当表单提交的时候
- node.submit 提交这个表单
- onreset 当表单重置的时候
- node.reset() 重置这个表单
BOM
dom属于bom（bom包含dom）
bom事件
-
window.open(url,打开方式，窗口特征)
- 返回值：打开的新窗口的页面属性
winow.open在高版本下的限制
- 只能在事件中操作，否则可能会被阻止掉
- 一个事件只能打开一个，第二个可能会被阻止
window.close() 关闭当前窗口
window下的对象
-
window.navigator 浏览器信息
- userAgent 用户代理信息
-
window.location 地址栏信息
- href 完整的地址（读/写）
- search 地址栏查询信息（问号到#号之间的所有内容）
- hash #之后的字符（锚点）
- onhashchange hash发生改变的时候
-
window.screen 显示器信息
-
scroll 滚动条
//获取可视区和整个文档的高度 window.innerWidth,window.innerHeight //可视区 document.documentElement.clientHeight //可视区 document.body.clientHeight//整个文档高度 document.documentElement.scrollHeight//文档高度 window.onscroll = function(){ //滚动条滚动 //滚动条滚动距离(滚动距离) console.log(document.documentElement.scrollTop,document.documentElement.scrollLeft); //chrome下无效 console.log(document.body.scrollTop,document.body.scrollLeft); // 火狐下无效 IE整体不识别 console.log(window.scrollY,window.scrollX);//IE整体不识别 console.log(window.pageYOffset,window.pageXOffset);//IE8及以下不识别 /* IE9-IE11不识别 2,3 IE8一下只识别 1 */ ｝ ** 兼容不同浏览器 var scrollY = document.documentElement.scrollTop||document.body.scrollTop; **- window.scrollTo(x,y) 设置滚动条距离
-
-
window.history 浏览器历史记录
- history.back(); 返回历史记录的上一页
- history.forward(); 进入历史记录的下一页
- history.go(nub); 进入具体某一页
