DOM BOM

一、DOM本质

document object model ： 文档对象模型
将html代码结构化为浏览器可识别和js可识别的东西即DOM
DOM基本数据结构：树

二、DOM操作

1、获取节点：

document.getElementById();
document.getElemenstByTagName();
document.getElemenstByClassName();

获取父元素：

var div1 = document.getElementById('div1');
var parent = div1.parentElement;

获取子元素：

var div1 = document.getElementById('div1');
var child = div1.childNodes;

property与attribute区别：

property是js对象的一个属性的修改

var obj = {x:100,y:200};
console.log(obj.x);//100 


var p=document.getElementsByTagName('p')[0];
console.log(p.nodeName); //p

Attribute 是对html标签属性的修改

var pList = document.querySelectorAll('p');
var p=pList[0];
p.getAttribute('data-name');
p.setAttribute('data-name','imooc');
p.getAttribute('style');
p.setAttribute('style','font_size:30px;')

2、新增节点：

var div1 = document.getElementById('div1');
var p = document.createElement('p');  //创建节点
div1.appendChild(p);  //用于添加新节点获移动已有节点

3、移除节点：

var div1 = document.getElementById('div1');
var child = div1.childNodes;
div1.removeChild(child[0]);

4、替换节点：

var div1 = document.getElementById('div1');
var p = document.createElement('p');
var child = div1.childNodes;
div1.replaceChild(p,child[0]);

三、BOM操作

browser object model:浏览器对象模型

1、navigator浏览器属性

可检测浏览器类型：console.log(navigator.userAgent)

var ua = navigator.userAgent;
var isChrome = ua.indexOf('Chrome');
console.log(isChrome);

解析一个URL参数以对象输出：

function parseQueryString(url){
    var para = url.split('?')[1];
    var arr_para=para.split('&');
    for(var i=0;ivar arr=arr_para[i].split('=');
        this[arr[0]]=arr[1];
    }
}
var url='http://m.quanmian.tv?tag=news_entertainment&ac=wap&item_type=4&count=20&format=json';
var obUrl=new parseQueryString(url);
console.log(obUrl);//{tag: "news_entertainment", ac: "wap", item_type: "4", count: "20", format: "json"}

2、screen 屏幕属性

console.log(screen.width);
console.log(screen.height);

3、location 地址

 console.log(location.href);
 console.log(location.protocol);
 console.log(location.host);
 console.log(location.pathname);
 console.log(location.search);
 console.log(location.hash);

4、history历史

history.back();
history.forward();