// DOM：文档对象模型 =>提高给用户操作document obj的标准接口

// DOM：以document为根，树状展开所有子节点

// 节点分类：6个

// document | doctype文本类型 | element元素 | text文本 | attr属性 | comment注释

var info_node = document.createAttribute("info");//创建

console.log(info_node.nodeName);

console.log(info_node.nodeType);

info_node.value = '123';// 设置

console.log(info_node.nodeValue);

sup1.setAttributeNode(info_node);// 添加

// 父级

console.log(sup.parentElement)

// 子级们

console.log(sup.children);

// 第一个自级

console.log(sup.firstElementChild););

// 最后一个子级别

console.log(sup.lastElementChild);

// 上兄弟

console.log(sup.previousE;ementSibling);

// 下兄弟

console.log(sup.nextElementSibling);

// 注：文档结构操作是可以采用连。语法

// sup.children[0].parentElement // 自己

// 操作步骤

// 1. 创造div（元素节点）

// 2. 设置div属性（单一css | css 类名 | 文本 | 子标签 | 事件 | 。。。）

// 3. 添加到（文档结构中）指定位置

// 传经：只能由document调用

var box = document.createElement('div');

// 在body元素的最后追加一个子元素

body.appendChild(box);

// 在body元素oldEle之前添加一个子元素

body.insertBefore(box, oldEle);

// 从body中删除box元素，可以接受返回值，就是删除的元素

var res = body.removeChild(div);

// 将body中oldEle元素替换为box元素，可以接受返回值，就是被替换的元素

var res = body.removeChild(div);

// 将body中oldEle元素替换为box,可以接受返回值,就是被替换的元素

res = bodyreplaceChild(box, oldEle);

// true深拷贝,拷贝自身与内容, false浅拷贝,只拷贝自身标签

box.cloneNode()

// ev.target通过父级的事件对象，获取具体相应区域位置的子级元素

// 应用场景

// 1.父级的子类元素类型不同一，采用循环绑定不方便

// 2.父级子元素较多或不确定

// BOM:Browser Object Model,提供用户浏览器加护的标准接口

// BOM的*对象为window对象，页面中出现的其实所有对象都是window的子对象

// 重要子对象

// document | history | location | navigator | screen

// location => url 信息

console.log(location);

// 域名：端口号

console.log(location.host);

//域名

console.log(location.hostname);

// 端口号

console.log(location.port);

// 查询信息

console.log(location.search);

// history

history.back() | history.forward() | history.go(-num | num)

// navigator

console.log(navigator.userAgent)

// Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36