JS-Web-API（上）

DOM 本质

DOM （document object model ）文本对象模型

可以理解为浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型。

或者说，DOM 本质上是一种树形结构

DOM 节点操作

var div1 = document.getElementById('div1'); // 元素
var divList = document.getElementsByTagName('div')； // 集合
console.log(divList.length);
console.log(divList[0]);

var containerList = document.getElementsByClassName('.container');  // 集合
var pList = document.querySelectorAll('p'); //集合
var p = pList[0];

console.log(p.style.width);
p.style.width = '100px';
console.log(p.className);
p.className = 'p1';

console.log(p.nodeName);
console.log(p.nodeType);

p.getAttribute('data-name');
p.setAttribute('data-name','test');
p.getAttribute('style');
p.setAttribute('style','font-size:30px;');

DOM 结构操作

var div1 = document.getElementById('div1');
var p1 = document.createElement('p');
p.innerHTML = 'this is p1';
div1.appendChild(p1);
var p2 = document.getElementById('p2');
div1.appendChild(p2);

var parent = div1.parentElement;
var child = div1.childNodes;  // 在子元素筛选的时候，可以使用 nodeName 和 nodeType 来进行条件判断
console.log(child[0]);

div1.removeChild(child[0]);

BOM 操作

BOM(Browser Object Model) 浏览器对象模型

var ua = navigator.userAgent;  // UA 可以进行修改，并不能完全信任
var isChrome = ua.indexOf('Chrome');
console.log(isChrome);

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

console.log(location.href);
console.log(location.protocol); // 协议类型
console.log(location.host); // 域名
console.log(location.pathname); // 路径
console.log(location.search); // 参数
console.log(location.hash);

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