dom与bom

1.节点

dom与bom属

// 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);// 添加

2.文档结构（element元素范围）

// 父级
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 // 自己

3.文档元素节点操作

// 操作步骤
// 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()

4.事件对象target属性

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

// 应用场景
// 1.父级的子类元素类型不同一，采用循环绑定不方便
// 2.父级子元素较多或不确定

5.BOM操作

// 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