dom、dom相关属性与方法

---恢复内容开始---

　　一、节点

　　dom与dom树

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

　　二、文档结构（element元素范围）

　　// 父级

　　console.log(sup.parentElement);

　　// 子级们

　　console.log(sup.children);

　　// 第一个子级

　　console.log(sup.firstElementChild);

　　// 最后一个子级

　　console.log(sup.lastElementChild);

　　// 上兄弟

　　console.log(sup.previousElementSibling);

　　// 下兄弟

　　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，可以接受返回值，就是被替换的元素

　　res = bodyreplaceChild(box, oldEle);

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

　　box.cloneNode()

　　四、事件对象target属性

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

　　应用场景

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

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

　　五、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)

　　

　　

　　

---恢复内容结束---