javascript---DOM,BOM对象常用操作

DOM对象

文档对象模型

DOM: Document Object Model 文档对象模型

文档：html页面

文档对象：页面中元素

文档对象模型：定义，为了能够让程序（js）去操作页面中的元素

DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵树中的每一个元素（节点）

---

childNods 获取子元素节点，该属性在标准浏览器下会获取到文本与元素节点，childElementnods这样在标准浏览器下只获取元素。

    childNodes只包含一级子节点，不包含后辈孙级以下的节点

childrent 只读 属性 子节点列表集合 完全兼容（不认非法嵌套的元素）

nodeType 只读 属性 ，当前元素的节点类型

1  : 代表元素节点

2  : 代表属性节点

3  : 代表文本节点

attributes 只读 属性 ，属性列表集合

-------------------------- 子节点与兄弟节点的获取 ---------------------------

firstChild 获取元素子节点第一个元素 标准浏览器 firstElementChild

lastchild 获取元素子节点最后一个元素 标准浏览器 lastElementChild

nextSibling 获取下一个兄弟节点 标准浏览器 nextElementSibling

previousSibling 获取上一个兄弟节点 标准浏览器 previousElementSibling

以上四个有兼容问题，在标准浏览器下要加Element ，不然会获取到文本节点。

---

--------------------------------- 父节点的获取 --------------------------------

parentNode 获取父节点 没有兼容问题

offsetparent 获取离元素最近有定位元素的父节点

 offsetparent 兼容性问题解析

  ie7以下，如果没有定位父级元素会找body，如果有定位父级就找html。

  ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上。

---

--------------------------------------- offsetLeft（top）获取 --------------------------------------------

元素.offsetLeft[Top] : 只读 属性 当前元素到定位父级的距离（偏移值）到当前元素的offsetParent的距离

如果没有定位父级        
    offsetParent -> body
    offsetLeft -> html
        
如果有定位父级
            
    ie7以下：如果自己没有定位，那么offsetLeft[Top]是到body的距离

            如果自己有定位，那么就是到定位父级的距离
        
         其他：到定位父级的距离

---

------------------------------- 获取样式宽高 ----------------------------------

width height

style.width : 样式宽，获取到的是当前样式宽。

clientWidth : 可视区宽，获取到当前样式宽 + padding。

offsetWidth    : 占位宽，获取到当前样式宽 + padding + border。

高度同理

---

文档宽高尺寸

document.documentElement.clienttHeight 可视区的高度

document.documentElement.clientWidth 可视区的宽度

document.documentElement.scrollTop 滚动条距离顶部的距离 兼容写法：document.body.scrollTop

document.documentElement.scrollLeft 滚动条距离左边的距离 兼容同上

obj.scrollHeight 内容高度

obj.scrollWidth 内容宽度

document.documentElement.offsetHeight 文档的高度

兼容写法: document.body.offsetHeight

对象添加删除类名

function toggleClass(element, className) {
  if (!element || !className) {
    return
  }
  let classString = element.className
  const nameIndex = classString.indexOf(className)
  if (nameIndex === -1) {
    classString += '' + className
  } else {
    classString =
      classString.substr(0, nameIndex) +
      classString.substr(nameIndex + className.length)
  }
  element.className = classString
}
let head = document.getElementById("head");
toggleClass(head,'baidu')

判断对象是否是空

function  isEmptyObject(e) {
    	var t;
    	for (t in e)
    		return false;
    	return true;
};
isEmptyObject({})  //true
isEmptyObject('')  //true
isEmptyObject(undefined);  //true

判断类型

检查传入的对象

• 如果是null则返回null(typeof null是返回object)
• 如果是数组则返回array(typeof []是返回object)

function getType(obj) {
    var type;
    return ((type = typeof (obj)) == 'object' ? obj == null && 'null' ||     Object.prototype.toString.call(obj).slice(8, -1) : type).toLowerCase();
}
例:
getType({})
"object"
getType([])
"array"
getType('aa')
"string"
getType(null)
"null"
getType(undefined)
"undefined"

引入文件判断
dataType.js

export const getType = obj => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
export const isNumber = obj => getType(obj) === "number";
export const isString = obj => getType(obj) === "string";
export const isArray = obj => getType(obj) === "array";
export const isObject = obj => getType(obj) === "object";
export const isBoolean = obj => getType(obj) === "boolean";
export const isFunction = obj => getType(obj) === "function";
export const isNull = obj => getType(obj) === "null";
export const isUndefined = obj => getType(obj) === "undefined";
export const isPromise = obj => getType(obj) === "promise";
export const isNode = node => !isNull(node) && !isUndefined(node) && Boolean(node.nodeName) && Boolean(node.nodeType);
export const isElement = element => isNode(element) && element.nodeType === 1;

import {isObject } from  './dataType'
判断是否是对象
let bool = isObject(html);
//是否存在结点node
import {isNode} from './dataType'
 if(!isNode(this.node)) return;

合并对象

function merge(obj1, obj2) {
    if (getType(obj1) != 'object' || getType(obj2) != 'object') {
        console.error('传入的参数必须都为对象');
        return;
    }

    var newObj = {};

    for (var key1 in obj1) {
        newObj[key1] = obj1[key1];
    }

    for (var key2 in obj2) {
        newObj[key2] = obj2[key2];
    }

    return newObj;
}
eg:
merge({a:1},{b:2})
{a: 1, b: 2}
merge({a:1},{b:2,a:2})
{a: 2, b: 2}
eg:
var opts = { url: 'http://www.baidu.com' };
var defaultOpts = { url: '', method: 'get' };
 opts = merge(defaultOpts, opts);
{url: "http://www.baidu.com", method: "get"}

删除空对象

function dealObjectValue(obj) {
  var param = {};
  if ( obj === null || obj === undefined || obj === "" ) return param;
  for ( var key in obj ){
    if(  obj[key] !== null && obj[key] !== undefined && obj[key] !== ""  ){
      param[key] = obj[key];
    }
  }
  return param;
}
eg:
dealObjectValue({name:'wangji',age:''})
{name: "wangji"}

清除数组空数据

function cleanArray(actual) {
  const newArray = []
  for (let i = 0; i < actual.length; i++) {
    if (actual[i]) {
      newArray.push(actual[i])
    }
  }
  return newArray
}
eg:
cleanArray(['11','22',''])
 ["11", "22"]
cleanArray(['11','22',undefined])
["11", "22"]

BOM

BOM: Browser Object Model 浏览器对象模型

open(页面的地址url，打开的方式)； 方法 打开一个新的窗口（页面）。

        如果地址为空，默认打开一个空白页面

        如果打开方式为空，默认新窗口打开（_self 当前窗口打开，_target 新窗口打开）

返回值是打开新窗口的window


close();方法 关闭窗口


兼容性：
    firefox 默认无法关闭

    chrome  默认直接关闭

    ie      默认询问用户



     属性：  

    window.navigator .userAgent     浏览器信息


    window.location  浏览器地址信息

        herf 属性 url

        search 属性  url？后面的内容

        hash 属性 url#后面的内容