Dom和Bom妙味笔记

DOM部分

1.dom简介

Document Object Model   (文档对象模型)

简单来说就是：document提供了一些API（接口），赋予开发者操作页面的能力。

nodeType ：判断节点类型

childNodes ：获取某个节点下的所有子节点

children：获取某个节点下的所有元素子节点   //不是标准的属性，但所有浏览器都支持
attributes ：属性节点

nodeName ：查看节点的属性名        

nodeValue ：查看节点的属性值

2.元素属性操作及获取宽高

Elem.getAttribute('key')           //获取元素行间的属性

Elem.setAttribute('key' , 'value')         //设置元素的行间属性

Elem.removeAttribute('key')               //删除元素的行间属性

/*
  特点：可以操作行间自定义的属性

        可以获取src、href等的相对地址

*/

元素的宽/高

          node.offsetWidth   /   node.offsetHeight           //计算边框

          node.clientWidth     /   node.clientHeight           //不计算边框

可视区的宽/高
          document.documentElement.clientWidth

          document.documentElement.clientHeight    

分析需求//让一个不确定宽高的元素居中显示

          元素的left = （可视区域宽-元素的宽）/ 2
          元素的top = （可视区域高-元素的高） / 2

3.元素的操作
 document.creatElement('')       //通过标签名的形式创建一个元素

父节点.appendChild(子节点)   //把子节点添加到父节点的末尾

父节点.insertBefore( 子节点1 , 子节点2 )       //把子节点1插到子节点2前面

父节点.removeChild( 子节点 )           //从父节点中删除指定的子节点

父节点.replaceChild( 想要呈现的子节点1 ，被替换的子节点2 )       // 子节点1替换子节点2 （剪切的效果）

节点.cloneNode(布尔值)                 /*       克隆一个节点

true：克隆元素和元素包含的子孙节点

false（默认）：克隆元素但不包含元素的子孙节点   */

4.表格、表单操作

table.tHead       //获取表格头部

table.tFoot         //获取表格底部
table.tBodies     //获取表格主体，获取到的是一个集合

头部or底部or主体 . rows       //获取表格的行

rows[ n ] . cells       //获取单元格

Bom部分

1.Bom

Browser Object Model     浏览器对象模型

open（）方法：打开一个新窗口

close（）方法：关闭窗口       /*

      Firefox：默认无法关闭；

      chrome：默认直接关闭；
      ie：询问用户；

  */

window.navigator.userAgent       浏览器信息

window.location                           浏览器地址信息
window.location.href                   url

window.location.search               url?及？后面的内容

window.location.hash                   url#及#后面的内容

2.文档获取宽高及窗口时间
 滚动条滚动距离

      document.documentElement.scrollTop           可视区顶部到文档顶部的距离

      document.documentElement.scrollLeft           可视区左端到文档左端的距离

内容宽/高

      Elem.scrollHeight                       内容高

      Elem.scrollWidth                       内容宽