DOM和BOM一些基础用法

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在高版本下的限制
1. 只能在事件中操作，否则可能会被阻止掉
2. 一个事件只能打开一个，第二个可能会被阻止
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); 进入具体某一页